• jquery聚焦轮播图片


    jquery聚焦轮播图片(原理:属性display->显示与隐藏)

    最终显示效果:

     

    HTML代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>jquery聚焦轮播图片(原理:属性display->显示与隐藏)</title>
            <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
            <script type="text/javascript" src="js/carousel.js"></script>
            <link rel="stylesheet" href="css/carousel.css" />
        </head>
        <body>
            <div id="igs">
                <!--显示图片-->
                <a class="ig" href="#"><img src="img/carousel1.jpg" /></a>
                <a class="ig" href="#"><img src="img/carousel2.jpg"  /></a>
                <a class="ig" href="#"><img src="img/carousel3.jpg"  /></a>
                <a class="ig" href="#"><img src="img/carousel4.jpg"  /></a>
                <a class="ig" href="#"><img src="img/carousel5.jpg"  /></a>
                <!--左右键-->
                <div class="btn btn1"><</div>
                  <div class="btn btn2">></div>
                <!--小圆点-->
                <ul id="tabs">
                    <li class="tab"></li>
                    <li class="tab"></li>
                    <li class="tab"></li>
                    <li class="tab"></li>
                    <li class="tab"></li>
                </ul>
            </div>
        </body>
    </html>

    CSS代码:

    * {
      margin: 0;
      padding: 0;
    }
     
    #igs {
      margin: 10px auto;
      width: 700px;
      height: 320px;
      position: relative;
    }
     
    .ig {
      position: absolute;
    }
     
    #tabs {
      position: absolute;
      list-style: none;
      background-color: rgba(255,255,255,.5);
      left: 300px;
      bottom: 10px;
      border-radius: 10px;
      padding: 5px 0 5px 5px;
    }
     
    .tab{
      float: left;
      text-align: center;
      line-height: 10px;
      width: 10px;
      height: 10px;
      cursor: pointer;
      overflow: hidden;
      margin-right: 10px;
      border-radius: 100%;
      background-color: #FFCF3F;
    }
     
    .btn{
      position: absolute;
      color: #fff;
      top: 110px;
      width: 40px;
      height: 100px;
      background-color: rgba(255,255,255,.3);
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      line-height: 100px;
      border-radius: 5px;
      margin: 0 5px;
    }
     
    .btn2{
      position: absolute;
      right: 0px;
    }
     
    .btn:hover{
      background-color: rgba(0,0,0,.7);
    }
    
    .ig img{
        width:100%;
    }

    javaScript代码:

    //定义全局变量和定时器
    var i = 0 ;
    var timer;
     
    $(document).ready(function(){
      //用jquery方法设置第一张图片显示,其余隐藏
      $('.ig').eq(0).show().siblings('.ig').hide();
       
      //调用showTime()函数(轮播函数)
      showTime();
       
      //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
      $('.tab').hover(function(){
        //获取当前i的值,并显示,同时还要清除定时器
        i = $(this).index();
        Show();
        clearInterval(timer);
      },function(){
        //
        showTime();
      });
       
      //鼠标点击左侧的箭头
      $('.btn1').click(function(){
        clearInterval(timer);
        if(i == 0){
          i = 5;//注意此时i的值
        }
        i--;
        Show();
        showTime();
      });
       
      //鼠标点击右侧的箭头
      $('.btn2').click(function(){
        clearInterval(timer);
        if(i == 4){
          i = -1;//注意此时i的值
        }
        i++;
        Show();
        showTime();
      });
       
    });
     
    //创建一个showTime函数
    function showTime(){
      //定时器
      timer = setInterval(function(){
        //调用一个Show()函数
        Show();
        i++;
        //当图片是最后一张的后面时,设置图片为第一张
        if(i==5){
          i=0;
        }
      },2000);
    }
    //创建一个Show函数
    function Show(){
      //在这里可以用其他jquery的动画
      $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
       
      //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
      $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
    }
  • 相关阅读:
    面试准备
    论文投稿Cover letter
    Pycharm 快捷键
    linux下常用命令:
    Qt中数据模块学习
    Qt 多线程和网络编程学习
    VS高效开发快捷键
    良好编码风格习惯整理
    Qt QAxObject操作excel文件过程总结(转):
    Qt开发中的实用笔记三--关于各种类的零碎知识点:
  • 原文地址:https://www.cnblogs.com/firstflying/p/8567677.html
Copyright © 2020-2023  润新知