效果图如下：
GIF.gif
源码放在Github上了：
我是源码
我是效果预览
基本功能：
- 四张图片循环播放；
- 无操作时自动从左到右播放；
- 鼠标放在轮播图上时停止自动轮播，显示左右按钮；
- 按左按钮，会显示左边的图片，按右按钮会显示右边的图片；
- 鼠标移出后，又从当前开始自动播放；
- 随着图片的移动，下方的小长条也会跟着移动；
- 点击任意长条，会直接跳转至长条对应的图片。
原理介绍
图片从右往左或者从左往右的切换很容易理解，难点在于如何实现循环播放。下面就讲解循环播放的原理：
-
将要展示的图片依次水平排列，本例一共要展示4副图片
Paste_Image.png
-
我们将要展示的图片放置在可视窗口，其它图片隐藏掉（背景色改为灰色，代表隐藏）
Paste_Image.png
-
由于可视窗口的位置是不能调整的，所以我们通过整体的向左或向右移动4副图片来达到图片切换的目的。
Paste_Image.png
-
但是当窗口移动到第一张图片上时，再往左切换就没有图片了，同样最后一张图片再往右切换也就没有图片了。但是我们的目的是到1号图片后再往左移动是4号图片，再往左是3号……一直循环，到4号图片再往右是1号图，再往右是2号图……一直循环。
Paste_Image.png
Paste_Image.png
-
为了达到上述目的，我们必须做些手脚了！变化就是，在1号图左边加了一张4号图，再4号图右边加了一张1号图。
Paste_Image.png
- 是时候上演魔术戏法了！
这时当我们从1号图往左切换时，左边就有了一张可供使用的4号图替身，我们就可以营造一种又回到了4号图的假象。
Paste_Image.png
Paste_Image.png
这样就毫无违和感了，但是如果用户继续向左拉动怎么办？难不成再造一个3号图替身？当然不是，当从1切换到
4'这个动画执行完毕后，我们需要将4'瞬间切换到4，因为是瞬间，中间是没有缓慢的动画效果的，所以肉眼是感觉不到的，所以用户其实毫无察觉，但事实上我们已经变成下图了。
Paste_Image.png
这时候如果用户接着向左移动，4号图是不是就可以接上3号图了呢！
Paste_Image.png
向右拉的道理也是一样的，当到达
1'后，我们要瞬间在换回1。原理就是这样了，下面开始分析代码。
代码实现
HTML+CSS
轮播的4张图片放在ul的li里面，并利用浮动使他们在一排呈现（记得清除浮动哦），前面的4号图的复制品和后面的1号图复制品是通过js添加上去的，现在还没有，但是也可以提前在html中写好，都一样。
Paste_Image.png
设置父容器的大小刚好等于一张图片的大小，并且设置
overflow：hidden将不显示的图片都隐藏掉（记得为父容器加上可爱的圆角）。
Paste_Image.png
利用两个a链接做出按钮的样式，使用绝对定位将他们放到合适的地方。
Paste_Image.png
再利用下面的ul中的li做出滚动条的效果，使用绝对定位将他们放到合适的地方。
Paste_Image.png
静态效果就做好了，接下来开始写JS，让轮播具有灵魂。
JS
注：JS使用了jquery
首先在放置图片的ul里面添加我们的备用图片4'和1'。克隆4和1并将4放在列表的头部，将1放在列表的尾部。
var $page0 = $pages.eq(0).clone();
var $page3 = $pages.eq(3).clone();
$content.append($page0);
$content.prepend($page3);
为按钮添加点击事件，点击按钮可以使图片向左或向右移动。$btnPre显示左边的图片（例如：当前为2，点击后切换至1），$btnNext显示右边的图片（例如：当前是2，点击切换至3）。stateLock防止用户在一个切换动画没完成时进行过多的点击。play()函数是执行左右切换动画的函数，可以向左也可以向右。
$btnPre.on("click",function(){
if(!stateLock) return;
stateLock = false;
play($content,true);
});
$btnNext.on("click",function(){
if(!stateLock) return;
stateLock = false;
play($content,false)
});
为底部滚动条添加点击事件。当点击滚动条时，要做两件事，一是将当前图片切换到滚动条对应的图片，二是改变点击的滚动条的颜色，并将其他滚动条恢复默认色。
//底部长条添加点击事件
$(".carousel").on("click","li",function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
var liIndex = $(this).index();
if(liIndex>pageIndex){
play($content,false,liIndex-pageIndex);
}else if(liIndex<pageIndex){
play($content,true,pageIndex-liIndex);
}
});
添加自动播放功能。每过2.5秒就自动向右切换一张。
var auto1 = setInterval(function () {
play($content,false);
},2500);
为插件整体添加鼠标移入移出事件。鼠标移入时，做两件事，一是关闭自动播放功能，二是显示向左向右的按钮（其实在css样式中，这两个按钮是被隐藏掉的，上面说的显示出来，是为了让大家看清楚）；鼠标移出后，也做两件事，但是相反，打开自动播放功能，然后隐藏按钮。
//显示按钮
$wrapper.on({
mouseover:function () {
clearInterval(auto1);
$btnNext.show();
$btnPre.show();
},
mouseout:function () {
auto1 = setInterval(function () {
play($content,false);
},2500);
$btnNext.hide();
$btnPre.hide();
}
});
播放函数，传入三个参数，$obj是6张图片所在的父容器的jquery对象，dir是移动方向（true是向前移动，false是向后移动），len是一次移动的图片张数，默认是1张。移动的原理其实是改变父容器整体的绝对定位参数，然后利用animate方法添加动画效果。最后当图片移动后不能忘记改变其对应的滚动条的背景色。
function play($obj,dir,len) {
//dir ：true 向前/false 向后
if(len===undefined||len===null){
len=1;
}
var symbol = dir?"+=":"-=";
var backFlag = dir?-1:4;
var clear = dir?3:0;
var backIndex = dir?4:1;
$obj.animate({
left:symbol+len*pageWidth+"px"
},function () {
if(dir){
pageIndex -=len;
console.log(pageIndex);
if(pageIndex<backFlag+1){
pageIndex = clear;
$obj.css({
left:"-"+backIndex*pageWidth+"px"
})
}
}else{
pageIndex +=len;
console.log(pageIndex);
if(pageIndex>backFlag-1){
pageIndex = clear;
$obj.css({
left:"-"+backIndex*pageWidth+"px"
})
}
}
$carousels.eq(pageIndex).siblings().removeClass("active");
$carousels.eq(pageIndex).addClass("active");
stateLock = true;
})
}
版权归饥人谷和本人所有，转载请注明出处
网友评论