Jquery实现简单图片轮播

html代码:

   <div class="show">
         <div class="left">
             <div class="show_content">
                 <img src="img/3.jpg" alt="" style="width:695px;height: 612px">
                 <img src="img/4.jpg" alt="" style="width:695px;height: 612px">
                 <img src="img/5.jpg" alt="" style="width:695px;height: 612px">
                 <img src="img/6.jpg" alt="" style="width:695px;height: 612px">
             </div>
         </div>
         <div class="right">
                 <ul>
                         <li>
                         <img src="img/3.jpg" alt="">
                         <img src="img/4.jpg" alt="">
                         <img src="img/5.jpg" alt="">
                         <img src="img/6.jpg" alt="">
                     </li>
                 </ul>
         </div>
     </div>

css 代码:

   *{
             margin:;
             padding:;
         }
         .show{
             width: 800px;
             height: 612px;
             border: 1px solid blue;
             margin: 0 auto;
         }
         li{
             list-style: none;

         }
         li img{
             float: right;
             padding-top: 5px;
             padding-left: 5px;
         }
         li{
             width: 100px;
         }
         .left{
             width: 695px;
             height: 612px;
             /* background-color: black; */
             float: left;
         }
         .right{
             float: left;
         }

script 代码:

  var  ind = 0 ;
     var timeplay = null;
     // 显示第一张
     $('.show_content img').eq(0).show().siblings('img').hide();
     $('li img').hover(function(){
              clearInterval(timeplay);
              ind = $(this).index();
             $(this).removeClass('hover');  // 取消第一个li标签里的img的透明
             //给下一标签添加 hover属性
             $(this).siblings().addClass('hover');
         //    $('.show_content img').eq(ind).fadeIn().siblings().fadeOut();
         $('.show_content img').eq(ind).show().siblings().hide();

     },function(){
         autoplay();
     })

     // 自动轮播
     function autoplay(){
          timeplay = setInterval(function(){
              ind++;
              if(ind>3){
                 ind=0;
              }
              $('li img').eq(ind).removeClass('hover');
              $('li img').eq(ind).siblings().addClass('hover');
             //  $('.show_content img').eq(ind).fadeIn().siblings().fadeOut();
             $('.show_content img').eq(ind).show().siblings().hide();
          },1000)
     }

     autoplay();

使用的jquery版本

实现的代码效果: