Jquery实现简单图片轮播

Posted 2021-02-16 tandongcn

html代码:

 1   <div class="show">
 2         <div class="left">
 3             <div class="show_content">
 4                 <img src="img/3.jpg" alt="" style="width:695px;height: 612px">
 5                 <img src="img/4.jpg" alt="" style="width:695px;height: 612px">
 6                 <img src="img/5.jpg" alt="" style="width:695px;height: 612px">
 7                 <img src="img/6.jpg" alt="" style="width:695px;height: 612px">
 8             </div>
 9         </div>
10         <div class="right">
11                 <ul>
12                         <li>
13                         <img src="img/3.jpg" alt="">
14                         <img src="img/4.jpg" alt="">
15                         <img src="img/5.jpg" alt="">
16                         <img src="img/6.jpg" alt="">
17                     </li>
18                 </ul>
19         </div>
20     </div>

css 代码:

 1   *{
 2             margin: 0;
 3             padding: 0;
 4         }
 5         .show{
 6             width: 800px;
 7             height: 612px;
 8             border: 1px solid blue;
 9             margin: 0 auto;
10         }
11         li{
12             list-style: none;
13            
14         }
15         li img{
16             float: right;
17             padding-top: 5px;
18             padding-left: 5px;
19         }
20         li{
21             width: 100px;
22         }
23         .left{
24             width: 695px;
25             height: 612px;
26             /* background-color: black; */
27             float: left;
28         }
29         .right{
30             float: left;
31         }

script 代码:

 1  var  ind = 0 ;
 2     var timeplay = null;
 3     // 显示第一张
 4     $(‘.show_content img‘).eq(0).show().siblings(‘img‘).hide();
 5     $(‘li img‘).hover(function(){
 6              clearInterval(timeplay);
 7              ind = $(this).index();
 8             $(this).removeClass(‘hover‘);  // 取消第一个li标签里的img的透明
 9             //给下一标签添加 hover属性
10             $(this).siblings().addClass(‘hover‘);
11         //    $(‘.show_content img‘).eq(ind).fadeIn().siblings().fadeOut();
12         $(‘.show_content img‘).eq(ind).show().siblings().hide();
13            
14     },function(){
15         autoplay();
16     })
17 
18 
19     // 自动轮播
20     function autoplay(){
21          timeplay = setInterval(function(){
22              ind++;
23              if(ind>3){
24                 ind=0;
25              }  
26              $(‘li img‘).eq(ind).removeClass(‘hover‘);
27              $(‘li img‘).eq(ind).siblings().addClass(‘hover‘);
28             //  $(‘.show_content img‘).eq(ind).fadeIn().siblings().fadeOut();
29             $(‘.show_content img‘).eq(ind).show().siblings().hide();
30          },1000)
31     }
32 
33     autoplay();

使用的jquery版本

实现的代码效果: