轮播图jQuery

2024-01-24 22:58:40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../day48/jquery-3.2.1.js"></script>
    <title>Title</title>


    <style>

            .outer{
                width: 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;

            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;


           }

           .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }


        .hide{
            display: none;
        }
    </style>

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <li class="active"></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>

<script>
    var i=0;
    //功能1：  鼠标悬浮到图标的位置时实现切换

    $(".num li").mouseover(function () {
          $(this).addClass("active").siblings().removeClass("active");

          var $icon_index=$(this).index();

          i=$icon_index;

          $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide")
    });


    // 自动轮播   setInterval(fn,1000)


    function foo() {
         if(i==5){
             i=-1
         }

         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

    var ID=setInterval(foo,1000);


    //  悬浮终止定时器
        $(".outer").hover(function () {
             // 终止定时器
            clearInterval(ID)

        },function () {
           // 重新开启一个定时器
           ID=setInterval(foo,1500);

        });


    //  通过按钮实现切换

    $(".right").click(function () {
        foo()
    });



    function bar() {
         if(i==0){
             i=6
         }

         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

     $(".left").click(function () {
        bar()
    })
    




</script>
</body>
</html>
轮播图
轮播图片文件　　就去京东首页右击另存为吧
码农公寓

相关文章
