js（无缝） 轮播图

javascript 轮播图

appendTo() prependTo()

新建如图，

运行代码如图：默认显示第一个背景颜色

新建js文件（如图）并引入，或者也可以在html里面嵌入，不需要新建其他文件，前者清晰明了，后者冗余代码较多，不易观看。//总共4个背景色，从第四个直接跳转第一个（中途不会以这样的顺序返回4>3>2>1（这是有缝轮播图，注意区别），而是1>2>3>4>1>2....）$('.right').click(function(){ $('.list').animate({ 'margin-left':'-300px' },1000,function(){ $('li').eq(0).appendTo($('.list'婶掩爬)); $('.list').css('margin-left','0'); });});//总共4个背景色，从第一个直接跳转第四个（这样的顺序：1>4>3>2>1）$('.left').click(function(){ $('li').eq(3).prependTo($('.list')); $('.list').css('margin-left','-300px'); $('.list').animate({ 'margin-left':'0' },1000);});

注意哦，有缝轮播图和无缝轮播图的区别就在于：有缝散脂轮播图：1>2>3>4，然后紧跟4321的顺序直接 有轨迹 的跳回第一个；无缝轮播图：1>2>3>4>1>2>3>4>1  &&  1>4>3>2>1>4                    无轨迹 的顺序，挨个跳转