js 简单的滑动教程（四）
作者：Lellansin 转载请标明出处，谢谢
在大概的了解滑动的基本原理和怎么去实现之后，现在我们将更深入的去讨论js的滑动。
相信细心的朋友应该已经发现了，在本教程前几篇中的代码，还存在着bug，比如多点击几下之后图片会嗖的一下连着，或者点一下左边再点一下右边之后，图片会左右晃动一下等等……这些是由于每一次点击左滑或者右滑的时候，都会new一个计时器出来，然后几个计时器同时在操作当前的图片，自然就混乱了起来。解决方案很简单，让计时器变成一个公用的变量，并且让计时器在使用的用的过程中再去点击也无法调用。
还有，当图片自动滑动的时候，再去点击一下，图片一会自动滑一会执行点击的滑动，这样的用户体验也不好，解决方案是，把鼠标悬停时候停止自动播放的范围扩大（相对前一篇教程），让用户的鼠标移动到左右滑动的肩头上就不再自动滑动了。
现在，我们要改一下排版，将js外置。因为接下可能要书写的代码可能会比较长了。
slider.js:
function SliderClass(){ // 计数 var total = 0; var count = 0; // 前缀 var pre = "list_"; // 图片宽度 this.width = 160; // 左中右对象 this.pic_left=null; this.pic_center=null; this.pic_right=null; // 公用计时器 this.timer = null; // 自动播放计时器 this.autoplayTimer; // 初始化 this.ini = function(){ }; // 获取操作对象 this.getObject = function(){ }; // 左滑 this.slideLeft = function(){ }; // 右滑 this.slideRight = function(){ }; // 自动播放 this.autoPlay = function(){ }; };
如你所见，现在我们使用的是javascript面向对象的方式，构建一个SliderClass类，来专门处理这个滑动事件。
首先，让我们来看一看ini()方法，事实上这个方法也可以说成是构造函数：
// 初始化 this.ini = function(){ nameCount = 0; var last; var list = document.getElementById("list"); list.style.width = this.width + "px"; var temp = list.childNodes; for(var i=0;i<temp.length;i++){ if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){ temp[i].id = "list_" + nameCount; temp[i].style.width = this.width + "px"; temp[i].style.display = "none"; nameCount++; last = i; } } total = nameCount; count = total-1; temp[last].style.display = ""; //绑定左右滑动 var sliderclass= this; document.getElementById("left_arrow").onclick = function(){ sliderclass.slideLeft(); }; document.getElementById("right_arrow").onclick = function(){ sliderclass.slideRight(); }; };
如果你是从教程开始几篇看过的来话，相信你对代码的前一部分一定不会陌生，不过后面绑定滑动这里或许会让你有些奇怪。其实这里这样调用的原因并不复杂，中间只是先用sliderclass这个临时变量来保存this（也就是SliderClass的当前对象），之所以这样做，是因为如果不这样的话，在绑定onclick方法以后，点击调用this，获取到的，将是你点击div的对象。
// 获取操作对象 this.getObject = function(){ var left = pre+((count+total*100-1)%total); var center = pre+((count+total*100)%total); var right = pre+((count+total*100+1)%total); this.pic_left = document.getElementById(left); this.pic_center = document.getElementById(center); this.pic_right = document.getElementById(right); this.pic_left.style.display = ""; this.pic_right.style.display = ""; this.pic_left.style.left = -this.width + "px"; this.pic_center.style.left = 0 + "px"; this.pic_right.style.left = this.width + "px"; };
这个方法没什么好说的，前几篇中已经出现好几次了，只不过这一次将它封装了起来。顺便说一句，里面拼装字符串的时候，通过count和total计算获取id的地方，博主本来想好好的算算的，不过最后嫌麻烦还是偷懒了，直接让count+total*100去%total，因为count到了负数的时候，计算id变得有点麻烦，所以就这样子算了，需要一提的时候，如果用户点了一百次向左的话，这个程序就会出现bug了，不过一般人应该不会这么无聊，如果你觉得浏览你的网站的人里面会有这么无聊的人的话，你也可以把乘的数设的大一点，比如一千或者一万，呵呵。。。
// 左滑 this.slideLeft = function(){ // 获取对象 this.getObject(); // 若timer不会null,则表示计时器正在使用,未避免冲突此时return if(this.timer != null){ return; } var i=0; // 保存当前对象 var sliderclass = this; this.timer = setInterval(function(){ if(i<=sliderclass.width){ sliderclass.pic_left.style.left = i-sliderclass.width + "px"; sliderclass.pic_center.style.left = i + "px"; sliderclass.pic_right.style.left = i+sliderclass.width + "px"; i+=sliderclass.width/4; }else{ clearInterval(sliderclass.timer); // 若滑动结束,则将计时器设为null sliderclass.timer = null; } },80); count--; }; // 右滑 this.slideRight = function(){ this.getObject(); var i=this.width; if(this.timer != null){ return; } var sliderclass = this; this.timer = setInterval(function(){ if(i>=0){ sliderclass.pic_left.style.left = i - sliderclass.width*2 + "px"; sliderclass.pic_center.style.left = i - sliderclass.width + "px"; sliderclass.pic_right.style.left = i + "px"; i-=sliderclass.width/4; }else{ clearInterval(sliderclass.timer); sliderclass.timer = null; } },80); count++; };
左滑和右滑，这两个方法本身没有太大的改变，重点是使用了公用的计时器，并加上了判断，若计时器在使用（正在滑动）的话则不能调用（return），然后是将滑动的坐标根据图片宽度来联动生成。关于保存对象的原因上面已经说过，这里不做赘述了。
// 自动播放 this.autoPlay = function(){ // 保存对象 var sliderclass = this; // 鼠标悬停时停止自动播放 document.getElementById("window").onmouseover = function(){ clearInterval(sliderclass.autoplayTimer); }; // 鼠标离开后继续自动播放 document.getElementById("window").onmouseout = function(){ sliderclass.autoPlay(); }; // 自动播放计时器 this.autoplayTimer = setInterval(function(){ sliderclass.slideRight(); },2000); };
这里跟上一个版本几乎一样，只是把暂停自动播放的范围扩大了一些（相对上一个版本），这样就避免了客户跟自动播放互相抢着切换图片了。
好了，下面是整个js的完整内容。
slider.js：
function SliderClass(){
var total = 0;
var count = 0;
// 前缀
var pre = "list_";
// 图片宽度
this.width = 160;
// 左中右对象
this.pic_left=null;
this.pic_center=null;
this.pic_right=null;
// 计时器
this.timer = null;
this.autoplayTimer;
// 初始化
this.ini = function(){
nameCount = 0;
var last;
var list = document.getElementById("list");
list.style.width = this.width + "px";
var temp = list.childNodes;
for(var i=0;i<temp.length;i++){
if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){
temp[i].id = "list_" + nameCount;
temp[i].style.width = this.width + "px";
temp[i].style.display = "none";
nameCount++;
last = i;
}
}
total = nameCount;
count = total-1;
temp[last].style.display = "";
// 保存SliderClass当前的对象
var sliderclass= this;
//绑定左右滑动
document.getElementById("left_arrow").onclick = function(){
// 如果上面不保存this对象的话，这里使用this关键字获取的将是你点击的div(id="left_arrow")
sliderclass.slideLeft();
};
document.getElementById("right_arrow").onclick = function(){
sliderclass.slideRight();
};
};
// 获取操作对象
this.getObject = function(){
var left = pre+((count+total*100-1)%total);
var center = pre+((count+total*100)%total);
var right = pre+((count+total*100+1)%total);
this.pic_left = document.getElementById(left);
this.pic_center = document.getElementById(center);
this.pic_right = document.getElementById(right);
this.pic_left.style.display = "";
this.pic_right.style.display = "";
this.pic_left.style.left = -this.width + "px";
this.pic_center.style.left = 0 + "px";
this.pic_right.style.left = this.width + "px";
};
// 左滑
this.slideLeft = function(){
// 获取对象
this.getObject();
// 若timer不会null,则表示计时器正在使用,未避免冲突此时return
if(this.timer != null){
return;
}
var i=0;
// 保存当前对象
var sliderclass = this;
this.timer = setInterval(function(){
if(i<=sliderclass.width){
sliderclass.pic_left.style.left = i-sliderclass.width + "px";
sliderclass.pic_center.style.left = i + "px";
sliderclass.pic_right.style.left = i+sliderclass.width + "px";
i+=sliderclass.width/4;
}else{
clearInterval(sliderclass.timer);
// 若滑动结束,则将计时器设为null
sliderclass.timer = null;
}
},80);
count--;
};
// 右滑
this.slideRight = function(){
this.getObject();
var i=this.width;
if(this.timer != null){
return;
}
var sliderclass = this;
this.timer = setInterval(function(){
if(i>=0){
sliderclass.pic_left.style.left = i - sliderclass.width*2 + "px";
sliderclass.pic_center.style.left = i - sliderclass.width + "px";
sliderclass.pic_right.style.left = i + "px";
i-=sliderclass.width/4;
}else{
clearInterval(sliderclass.timer);
sliderclass.timer = null;
}
},80);
count++;
};
// 自动播放
this.autoPlay = function(){
var sliderclass = this;
document.getElementById("window").onmouseover = function(){
clearInterval(sliderclass.autoplayTimer);
};
document.getElementById("window").onmouseout = function(){
sliderclass.autoPlay();
};
this.autoplayTimer = setInterval(function(){
sliderclass.slideRight();
},2000);
};
};
页面index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js简单的滑动教程（四） - Lellansin</title> <script src="slider.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0; padding:0; } li{ list-style: none; } #window{ height:200px; width:230px; margin:0 auto; overflow:hidden; } #center_window{ height:200px; width:160px; float:left; } #center_window ul{ height:200px; width:160px; position:absolute; overflow:hidden; z-index: -1; } #center_window ul li{ height:200px; width:160px; float:left; position:absolute; } #center_window img{ display:block; margin:5px auto; } #left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; } #left_arrow:hover{ cursor: pointer; } #right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; } #right_arrow:hover{ cursor: pointer; } </style> <script> window.onload = function(){ var slider = new SliderClass(); slider.ini(); slider.autoPlay(); } </script> </head> <body> <div id="window"> <div id="left_arrow"></div> <div id="center_window"> <ul id="list"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> </ul> </div> <div id="right_arrow"></div> </div> </body> </html>
效果演示：
