简单实现jquery轮播图

首先需要定义个切换图片的funcation

##### 1、找到图片所在li，将其显示出来，并缩放1.1倍
##### 2、其他兄弟li，渐变隐藏，并还原至原大小比例
##### 3、将底部的圆点列表ul中对应的li，添加样式，其他兄弟元素移除该样式

function changeimg(a){
  $('.imgs li ').eq(a).fadeIn(500).css("transform" ,"scale(1.1)").
        siblings().fadeOut('slow').css("transform" ,"scale(1.0)");
        
  $('.btn-list li').eq(a).addClass('active-list').siblings().removeClass('active-list');
 };

#### 写一个自动播放的funcation，实现每5秒自动切换

##### 1、定义一个全局 time，和set
##### 2、设置每5秒切换一次图片

 function autoplay(){
  time = setInterval(function(){
   set++ ;
   if(set > len -1 )
   {
    set = 0 ;
   }
   changeimg(set) ;
  } , 5000);
 };

给切换按钮绑定事件

1、点击切换按钮时候，得先停止自动播放

2、根据所点击的按钮将全局变量set自增或者自减

3、将自动播放开启

//btn
 //up
 $('.btn .up').click(function(){
  clearInterval(time) ;
  
  set-- ;
  if(set < 0 )
  {
   set = len-1 ;
  }
  changeimg(set) ;
  autoplay() ;
 });
 //down
 $('.btn .down').click(function(){
  clearInterval(time) ;
  
  set++ ;
  if(set === len )
  {
   set = 0 ;
  }
  changeimg(set) ;
  autoplay() ;
 });

写完以上内容，我们就剩下最后一个步骤了。如果点击那些小圆点，要如何才能切换到对应的图片上去。问题其实不难，回头看下，咱们写的切换图片函数，是需要传参的，这也就意味着我们只需要找到对应的小圆点的索引传进函数里，就可以实现。

//btn-list
 $('.btn-list li').click(function(){
  clearInterval(time) ;
  set = $(this).index() ;
  changeimg(set) ;
  autoplay() ;
 });

这里我们需要注意一下，也是需要先暂停自动切换。

再次回头我们发现，还漏掉了一个环节。如果当鼠标移动上去的时候，需要让自动切换暂停，鼠标移开，又开始自动切换。这里我们使用到了hover

注意注意！time是全局的，所以我们可以访问到

$('.imgs li').hover(function(){clearInterval(time)} , function(){autoplay()});

来源：https://www.cnblogs.com/alongz/p/11715644.html

标签

轮播

autoplay

jquery