jquery实现轮播图效果

 

 *{

 margin: 0;

 padding: 0;

 }

 #slideshow{

 position: relative;

 width: 512px;

 height: 384px;

 margin: 0 auto;

 overflow: hidden;

 }

 #slideshow>ul,#slideshow>ul>li,#slideshow-nav{

 position: absolute;

 }

 #slideshow>ul>li{

 list-style: none;

 }

 #slideshow-nav{

 bottom: 20px;

 width: 100%;

 text-align: center;

 }

 #slideshow-nav>span{

 display: inline-block;

 width: 15px;

 height: 15px;

 margin: 0 7px;

 font-size: 0;

 background-color: rgba(255,255,255,.3);

 border-radius: 50%;

 user-select: none;

 -webkit-user-select: none;

 transition: all .5s;

 -webkit-transition: all .5s;

 cursor: pointer;

 }

 #slideshow-nav>span.active{

 background-color: #fff;

 }

 $(function(){

 var timer = null,

 curindex = 0,

 duration = 2000,

 speed = 500;

 var $imgWrap = $('#slideshow>ul');

 var totalIndex = $imgWrap.find('li').length;

 var width = $('#slideshow').width();

 //insert navigate span, let img in order

 $('#slideshow').find('ul>li').each(function(index){

 $(this).css('left', width*index + 'px');

 $('#slideshow-nav').append('' + (index+1) + '');

 })

 //

 $('#slideshow-nav>span').eq(0).addClass('active');

 //auto slide

 var move = function(){

 curindex += 1;

 if (curindex===totalIndex) {

 curindex = 0;

 }

 // current span add classname "active"

 $('#slideshow-nav>span').each(function(index) {

 $(this).removeClass('active')

 }).eq(curindex).addClass('active');

 //auto slide

 $imgWrap.animate({

 'left': width*curindex*(-1)+'px',

 }, speed)

 //一开始没加"timer = ",这个bug耽误了不少时间

 timer = setTimeout(move,duration+speed);

 };

 //init

 timer = setTimeout(move,duration);

 //click event

 $('#slideshow-nav>span').on('click', function(event) {

 event.preventDefault();

 /* Act on the event */

 clearTimeout(timer);

 $imgWrap.stop(true, true);

 curindex = $(this).index() - 1;

 move();

 });

 })