简单实现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()});