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>

 

  

 

 

 

 

效果演示:

http://www.cnblogs.com/lellansin/admin/slider.js

// <![CDATA[
window.onload = function(){
var player = new PlayerClass();
player.ini();
player.autoPlay();
}

function PlayerClass(){

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 = "";
// 保存playerClass当前的对象
var playclass= this;
//绑定左右滑动
document.getElementById("left_arrow").onclick = function(){
// 如果上面不保存this对象的话,这里使用this关键字获取的将是你点击的div(id="left_arrow")
playclass.slideLeft();
};
document.getElementById("right_arrow").onclick = function(){
playclass.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 playclass = this;
this.timer = setInterval(function(){
if(i=0){
playclass.pic_left.style.left = i – playclass.width*2 + “px”;
playclass.pic_center.style.left = i – playclass.width + “px”;
playclass.pic_right.style.left = i + “px”;
i-=playclass.width/4;
}else{
clearInterval(playclass.timer);
playclass.timer = null;
}
},80);
count++;
};

// 自动播放
this.autoPlay = function(){
// 保存对象
var playclass = this;
// 鼠标悬停时停止自动播放
document.getElementById(“window”).onmouseover = function(){
clearInterval(playclass.autoplayTimer);
};
// 鼠标离开后继续自动播放
document.getElementById(“window”).onmouseout = function(){
playclass.autoPlay();
};
// 自动播放计时器
this.autoplayTimer = setInterval(function(){
playclass.slideRight();
},2000);
};
};
// ]]>

 
 

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s