如何用jq实现图片轮播

最新推荐文章于 2024-08-27 19:30:26 发布

Glay96

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量336

点赞数 1

本文链接：https://blog.csdn.net/qq_25784049/article/details/77980271

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>mbb</title>
   <style>
       *{
           margin: 0;
           padding: 0;
           list-style: none;
       }
       img{
           width: 500px;

}

/*ul移动必须有position属性*/

       .show{
           position: absolute;
           width: 500px;
           height: 231px;
           border: solid 2px red;
           overflow: hidden;

}

/*初始定位*/

       .show>.xulie{
           position: absolute;
           width: 2500px;
           left: -2000px
       }
       .show>.xulie>li{
           float: right;

}

/*z-index表示显示优先*/

       .sec{
           position: absolute;
           z-index: 1;
           left: 180px;
           top: 210px;

}

/*将li变形*/

       .sec>ul>li{
           height: 5px;
           width: 5px;
           float: left;
           margin-left: 20px;
           background-color: red;
           cursor: pointer;

}

/*点击后添加样式*/

       .sec ul .current{
           background-color: black;
       }
   </style>
   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

//图片轮播原理：设定一个div，ul的图片在里面进行位移，overflow为hidden

       $(function(){
           var cur_num=0;
           var timer=0;
           window.num=0;
           timer=setInterval(function(){
               num++;
               if(num>4){
                   num=0

}

//点击变换颜色

$('.sec ul li').eq(num).addClass('current').siblings('li').removeClass('current');

//往右边位移

$('.xulie').animate({'left':-(2000-(num*500))+'px'},1000);

},2000);

//点击跳转

           $('.sec ul li').click(function(){
               var cur_num=$(this).index();
               num=cur_num;
               $('.xulie').css('left',-(2000-(num*500))+'px');
               $('.sec ul li').eq(cur_num).addClass('current').siblings('li').removeClass('current');
           })
       });
   </script>
</head>
<body>
<div class="show">

//我的图片，读者自己替换成自己的图片

       <li><img src="images/01.jpg" alt=""></li>
       <li><img src="images/02.jpg" alt=""></li>
       <li><img src="images/03.jpg" alt=""></li>
       <li><img src="images/04.jpg" alt=""></li>
       <li><img src="images/05.jpg" alt=""></li>

   </ul>
    //点击实现跳转
</div>
   <div class="sec">
       <ul>
           <li class="current"></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
</body>
</html>