js 简单的滑动教程(四)

在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论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>

 

效果演示:


// <![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")
if(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 playclass= this;
document.getElementById("left_arrow").onclick = function(){
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();
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);
};
};
// ]]>

 
 

上一讲:js 简单的滑动教程(三)

Advertisements

js 简单的滑动教程(三)

在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高。
比如自动为图片的LI赋id值,这样在写网页的时候,可以不用麻烦再一个个为LI去添加ID,让程序自动赋值这样在开发的过程中效率可以更高,可移植性也会更强。除此之外,在已经可以循环显示的情况下,我们还可以写个功能让它自动播放,这也是一个很常见的功能。

<!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>
<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 }
    #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>
</head>

<body>
    <div id="window">
        <div id="left_arrow" onclick="sliderLeft()"></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" onclick="sliderRight()"></div>
    </div>

    
<script>
    // 图片总数
    var total;
    // 计数器
    var count;        
        
    window.onload = function ini(){
        // id名称计数器
        nameCount = 0;
        // 最后一个计数
        var last;
        // 获取列表的对象
        var temp = document.getElementById("list").childNodes;
        // 为列表内的LI赋上id的值
        for(var i=0;i<temp.length;i++){
            // 不是文本节点 且 是LI节点则执行
            if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){
                // li的id赋值
                temp[i].id = "list_" + nameCount;
                // 将其隐藏
                temp[i].style.display = "none";
                // 已经找到的li计数
                nameCount++;
                // 最后一计数
                last = i;
            }
        }
        // 图片总数为已经找到的LI的总数
        total = nameCount;
        // 当前图片为最后一个图片
        count = total-1;
        // 当前图片设为显示
        temp[last].style.display = "";
        // 调用自动播放方法
        AutoPlay();
    }
        
        
    function sliderLeft(){    
        // 拼出当前以及左右图片的id
        var left = "list_"+((count+total*100-1)%total);
        var center = "list_"+((count+total*100)%total);
        var right = "list_"+((count+total*100+1)%total);
        // 获取对象
        var pic_left = document.getElementById(left);
        var pic_center = document.getElementById(center);
        var pic_right = document.getElementById(right);
        // 向左滑,设置左边的图片显示
        pic_left.style.display = "";
        // 设置坐标
        pic_left.style.left = -160 + "px";
        pic_center.style.left = 0 + "px";
        pic_right.style.left = 160 + "px";
        var i=0;
        var timer = setInterval(function(){
            if(i<=160){
                //滑动
                pic_left.style.left = i-160 + "px";
                pic_center.style.left = i + "px";
                pic_right.style.left = i+160 + "px";
                i+=40;
            }else{
                clearInterval(timer);
            }
        },80);
        // 计数
        count--;            
    }
    function sliderRight(){
        // 拼出id
        var left = "list_"+((count+total*100-1)%total);
        var center = "list_"+((count+total*100)%total);
        var right = "list_"+((count+total*100+1)%total);
        // 获取对象
        var pic_left = document.getElementById(left);
        var pic_center = document.getElementById(center);
        var pic_right = document.getElementById(right);
        // 向右滑,设置右边的图片显示
        pic_right.style.display = "";
        //设置坐标
        pic_left.style.left = -160 + "px";
        pic_center.style.left = 0 + "px";
        pic_right.style.left = 160 + "px";
        var i=160;
        var timer = setInterval(function(){
            if(i>=0){
                // 滑动
                pic_left.style.left = i - 320 + "px";
                pic_center.style.left = i - 160 + "px";
                pic_right.style.left = i + "px";
                i-=40;
            }else{
                clearInterval(timer);
            }
        },80);
        // 计数
        count++;
    }
    
    // 自动播放的计时器
    var autoplayTimer;
    
    function AutoPlay(){
        // 鼠标悬停时停止自动播放
        document.getElementById("list").onmouseover = function(){
            clearInterval(autoplayTimer);
        };
        // 鼠标移开后继续自动播放
        document.getElementById("list").onmouseout = function(){
            AutoPlay();
        };
        
        autoplayTimer = setInterval(function(){
            sliderRight();
        },2000);// 每隔两秒调用一次sliderRight()方法,使其自动向右播放
    }
    </script>
</body>
</html>
 

效果演示(IE6+):

 
 
 

// <![CDATA[
var total;
var count;
window.onload = function ini(){
nameCount = 0;
var last;
var temp = document.getElementById("list").childNodes;
for(var i=0;i<temp.length;i++){
if(temp[i].nodeName != "#text"){
if(temp[i].nodeName == "LI"){
temp[i].id = "list_" + nameCount;
temp[i].style.display = "none";
nameCount++;
last = i;
}
}
}
total = nameCount;
count = total-1;
temp[last].style.display = "";
AutoPlay();
}
function sliderLeft(){
var left = "list_"+((count+total*100-1)%total);
var center = "list_"+((count+total*100)%total);
var right = "list_"+((count+total*100+1)%total);
var pic_left = document.getElementById(left);
var pic_center = document.getElementById(center);
var pic_right = document.getElementById(right);
pic_left.style.display = "";
pic_left.style.left = -160 + "px";
pic_center.style.left = 0 + "px";
pic_right.style.left = 160 + "px";
var i=0;
var timer = setInterval(function(){
if(i=0){
pic_left.style.left = i – 320 + “px”;
pic_center.style.left = i – 160 + “px”;
pic_right.style.left = i + “px”;
i-=40;
}else{
clearInterval(timer);
}
},80);
count++;
}
var autoplayTimer;
function AutoPlay(){
document.getElementById(“list”).onmouseover = function(){
clearInterval(autoplayTimer);
};
document.getElementById(“list”).onmouseout = function(){
AutoPlay();
};
autoplayTimer = setInterval(function(){
sliderRight();
},2000);
}
// ]]>

上一讲:js 简单的滑动教程(二)
下一讲:js 简单的滑动教程(四)

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);
};
};
// ]]>

 
 

js 简单的滑动教程(三)

作者:Lellansin 转载请标明出处,谢谢

在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高。
    比如自动为图片的LI赋id值,这样在写网页的时候,可以不用麻烦再一个个为LI去添加ID,让程序自动赋值这样在开发的过程中效率可以更高,可移植性也会更强。除此之外,在已经可以循环显示的情况下,我们还可以写个功能让它自动播放,这也是一个很常见的功能。

<!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>
<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 }
    #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>
</head>

<body>
    <div id="window">
        <div id="left_arrow" onclick="sliderLeft()"></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" onclick="sliderRight()"></div>
    </div>

    
<script>
    // 图片总数
    var total;
    // 计数器
    var count;        
        
    window.onload = function ini(){
        // id名称计数器
        nameCount = 0;
        // 最后一个计数
        var last;
        // 获取列表的对象
        var temp = document.getElementById("list").childNodes;
        // 为列表内的LI赋上id的值
        for(var i=0;i<temp.length;i++){
            // 不是文本节点 且 是LI节点则执行
            if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){
                // li的id赋值
                temp[i].id = "list_" + nameCount;
                // 将其隐藏
                temp[i].style.display = "none";
                // 已经找到的li计数
                nameCount++;
                // 最后一计数
                last = i;
            }
        }
        // 图片总数为已经找到的LI的总数
        total = nameCount;
        // 当前图片为最后一个图片
        count = total-1;
        // 当前图片设为显示
        temp[last].style.display = "";
        // 调用自动播放方法
        AutoPlay();
    }
        
        
    function sliderLeft(){    
        // 拼出当前以及左右图片的id
        var left = "list_"+((count+total*100-1)%total);
        var center = "list_"+((count+total*100)%total);
        var right = "list_"+((count+total*100+1)%total);
        // 获取对象
        var pic_left = document.getElementById(left);
        var pic_center = document.getElementById(center);
        var pic_right = document.getElementById(right);
        // 向左滑,设置左边的图片显示
        pic_left.style.display = "";
        // 设置坐标
        pic_left.style.left = -160 + "px";
        pic_center.style.left = 0 + "px";
        pic_right.style.left = 160 + "px";
        var i=0;
        var timer = setInterval(function(){
            if(i<=160){
                //滑动
                pic_left.style.left = i-160 + "px";
                pic_center.style.left = i + "px";
                pic_right.style.left = i+160 + "px";
                i+=40;
            }else{
                clearInterval(timer);
            }
        },80);
        // 计数
        count--;            
    }
    function sliderRight(){
        // 拼出id
        var left = "list_"+((count+total*100-1)%total);
        var center = "list_"+((count+total*100)%total);
        var right = "list_"+((count+total*100+1)%total);
        // 获取对象
        var pic_left = document.getElementById(left);
        var pic_center = document.getElementById(center);
        var pic_right = document.getElementById(right);
        // 向右滑,设置右边的图片显示
        pic_right.style.display = "";
        //设置坐标
        pic_left.style.left = -160 + "px";
        pic_center.style.left = 0 + "px";
        pic_right.style.left = 160 + "px";
        var i=160;
        var timer = setInterval(function(){
            if(i>=0){
                // 滑动
                pic_left.style.left = i - 320 + "px";
                pic_center.style.left = i - 160 + "px";
                pic_right.style.left = i + "px";
                i-=40;
            }else{
                clearInterval(timer);
            }
        },80);
        // 计数
        count++;
    }
    
    // 自动播放的计时器
    var autoplayTimer;
    
    function AutoPlay(){
        // 鼠标悬停时停止自动播放
        document.getElementById("list").onmouseover = function(){
            clearInterval(autoplayTimer);
        };
        // 鼠标移开后继续自动播放
        document.getElementById("list").onmouseout = function(){
            AutoPlay();
        };
        
        autoplayTimer = setInterval(function(){
            sliderRight();
        },2000);// 每隔两秒调用一次sliderRight()方法,使其自动向右播放
    }
    </script>
</body>
</html>

 

 

效果演示(IE6+):

 
 
 

// <![CDATA[
// 图片总数
// 图片总数
var total;
// 计数器
var count;

window.onload = function ini(){
// id名称计数器
nameCount = 0;
// 最后一个计数
var last;
// 获取列表的对象
var temp = document.getElementById("list").childNodes;
// 为列表内的LI赋上id的值
for(var i=0;i<temp.length;i++){
// 不是文本节点 且 是LI节点则执行
if(temp[i].nodeName != "#text" && temp[i].nodeName == "LI"){
// li的id赋值
temp[i].id = "list_" + nameCount;
// 将其隐藏
temp[i].style.display = "none";
// 已经找到的li计数
nameCount++;
// 最后一计数
last = i;
}
}
// 图片总数为已经找到的LI的总数
total = nameCount;
// 当前图片为最后一个图片
count = total-1;
// 当前图片设为显示
temp[last].style.display = "";
// 调用自动播放方法
AutoPlay();
}

function sliderLeft(){
// 拼出当前以及左右图片的id
var left = "list_"+((count+total*100-1)%total);
var center = "list_"+((count+total*100)%total);
var right = "list_"+((count+total*100+1)%total);
// 获取对象
var pic_left = document.getElementById(left);
var pic_center = document.getElementById(center);
var pic_right = document.getElementById(right);
// 向左滑,设置左边的图片显示
pic_left.style.display = "";
// 设置坐标
pic_left.style.left = -160 + "px";
pic_center.style.left = 0 + "px";
pic_right.style.left = 160 + "px";
var i=0;
var timer = setInterval(function(){
if(i=0){
// 滑动
pic_left.style.left = i – 320 + “px”;
pic_center.style.left = i – 160 + “px”;
pic_right.style.left = i + “px”;
i-=40;
}else{
clearInterval(timer);
}
},80);
// 计数
count++;
}

// 自动播放的计时器
var autoplayTimer;

function AutoPlay(){
// 鼠标悬停时停止自动播放
document.getElementById(“list”).onmouseover = function(){
clearInterval(autoplayTimer);
};
// 鼠标移开后继续自动播放
document.getElementById(“list”).onmouseout = function(){
AutoPlay();
};

autoplayTimer = setInterval(function(){
sliderRight();
},2000);// 每隔两秒调用一次sliderRight()方法,使其自动向右播放
}
// ]]>

下一篇:

js 简单的滑动教程(四)

js 简单的滑动教程(二)

作者:Lellansin 转载请标明出处,谢谢

现在我们让滑动多一个功能,三张图、点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动
原理也很将简单,用position:absolute将定位设置成决定定位,通过改变图片相对于绝对位置的坐标来实现滑动。

<!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简单的滑动教程(2)</title>

<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 }
    #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>

</head>

<body>
    <div id="window">
        <div id="left_arrow" onclick="sliderLeft()"></div>
        <div id="center_window">
            <ul>
                <li id="list_0"><img src="img/1.jpg" /></li>
                <li id="list_1"><img src="img/2.jpg" /></li>
                <li id="list_2"><img src="img/3.jpg" /></li>
            </ul>
        </div>
        <div id="right_arrow" onclick="sliderRight()"></div>
    </div>
    <div id="text" style="margin:0 auto;width:200px;">
    </div>
    
    <script>
        // 图片总数
        var total = 3;
        //当所有图片都显示的时候,所有图片的left都=0,这个时候最后一张图会叠最上面,所以计数器从最后一个开始计数
        var count = total-1;
function sliderLeft(){ // 拼出当前以及左右图片的id var left = "list_"+((count+total*100-1)%total); var center = "list_"+((count+total*100)%total); var right = "list_"+((count+total*100+1)%total); // 获取对象 var pic_left = document.getElementById(left); var pic_center = document.getElementById(center); var pic_right = document.getElementById(right); // 设置坐标 pic_left.style.left = -160 + "px"; pic_center.style.left = 0 + "px"; pic_right.style.left = 160 + "px"; var i=0; var timer = setInterval(function(){ if(i<=160){ //滑动 pic_left.style.left = i-160 + "px"; pic_center.style.left = i + "px"; pic_right.style.left = i+160 + "px"; i+=40; }else{ clearInterval(timer); } },80); // 计数 count--; } function sliderRight(){ // 拼出id var left = "list_"+((count+total*100-1)%total); var center = "list_"+((count+total*100)%total); var right = "list_"+((count+total*100+1)%total); // 获取对象 var pic_left = document.getElementById(left); var pic_center = document.getElementById(center); var pic_right = document.getElementById(right); //设置坐标 pic_left.style.left = -160 + "px"; pic_center.style.left = 0 + "px"; pic_right.style.left = 160 + "px"; var i=160; var timer = setInterval(function(){ if(i>=0){ // 滑动 pic_left.style.left = i - 320 + "px"; pic_center.style.left = i - 160 + "px"; pic_right.style.left = i + "px"; i-=40; }else{ clearInterval(timer); } },80); // 计数 count++; } </script> </body> </html>

效果演示(IE6+):

 
 
 

// <![CDATA[
// 图片总数
var total = 3;
//当所有图片都显示的时候,所有图片的left都=0,这个时候最后一张图会叠最上面,所以计数器从最后一个开始计数
var count = total-1;

function sliderLeft(){
// 拼出当前以及左右图片的id
var left = "list_"+((count+total*100-1)%total);
var center = "list_"+((count+total*100)%total);
var right = "list_"+((count+total*100+1)%total);
// 获取对象
var pic_left = document.getElementById(left);
var pic_center = document.getElementById(center);
var pic_right = document.getElementById(right);
// 设置坐标
pic_left.style.left = -160 + "px";
pic_center.style.left = 0 + "px";
pic_right.style.left = 160 + "px";
var i=0;
var timer = setInterval(function(){
if(i=0){
// 滑动
pic_left.style.left = i – 320 + “px”;
pic_center.style.left = i – 160 + “px”;
pic_right.style.left = i + “px”;
i-=40;
}else{
clearInterval(timer);
}
},80);
// 计数
count++;
}
// ]]>

下一篇:

js 简单的滑动教程(三)

js 简单的滑动教程(二)

现在我们让滑动多一个功能,三张图、点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动
原理也很将简单,用position:absolute将定位设置成决定定位,通过改变图片相对于绝对位置的坐标来实现滑动。

<!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简单的滑动教程(2)</title>

<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 }
    #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>

</head>

<body>
    <div id="window">
        <div id="left_arrow" onclick="sliderLeft()"></div>
        <div id="center_window">
            <ul>
                <li id="list_0"><img src="img/1.jpg" /></li>
                <li id="list_1"><img src="img/2.jpg" /></li>
                <li id="list_2"><img src="img/3.jpg" /></li>
            </ul>
        </div>
        <div id="right_arrow" onclick="sliderRight()"></div>
    </div>
    <div id="text" style="margin:0 auto;width:200px;">
    </div>
    
    <script>
        // 图片总数
        var total = 3;
        //当所有图片都显示的时候,所有图片的left都=0,这个时候最后一张图会叠最上面,所以计数器从最后一个开始计数
        var count = total-1;

        function sliderLeft(){    
            // 拼出当前以及左右图片的id
            var left = "list_"+((count+total*100-1)%total);
            var center = "list_"+((count+total*100)%total);
            var right = "list_"+((count+total*100+1)%total);
            // 获取对象
            var pic_left = document.getElementById(left);
            var pic_center = document.getElementById(center);
            var pic_right = document.getElementById(right);
            // 设置坐标
            pic_left.style.left = -160 + "px";
            pic_center.style.left = 0 + "px";
            pic_right.style.left = 160 + "px";
            var i=0;
            var timer = setInterval(function(){
                if(i<=160){
                    //滑动
                    pic_left.style.left = i-160 + "px";
                    pic_center.style.left = i + "px";
                    pic_right.style.left = i+160 + "px";
                    i+=40;
                }else{
                    clearInterval(timer);
                }
            },80);
            // 计数
            count--;            
        }
        function sliderRight(){
            // 拼出id
            var left = "list_"+((count+total*100-1)%total);
            var center = "list_"+((count+total*100)%total);
            var right = "list_"+((count+total*100+1)%total);
            // 获取对象
            var pic_left = document.getElementById(left);
            var pic_center = document.getElementById(center);
            var pic_right = document.getElementById(right);
            //设置坐标
            pic_left.style.left = -160 + "px";
            pic_center.style.left = 0 + "px";
            pic_right.style.left = 160 + "px";
            var i=160;
            var timer = setInterval(function(){
                if(i>=0){
                    // 滑动
                    pic_left.style.left = i - 320 + "px";
                    pic_center.style.left = i - 160 + "px";
                    pic_right.style.left = i + "px";
                    i-=40;
                }else{
                    clearInterval(timer);
                }
            },80);
            // 计数
            count++;
        }
    </script>
</body>
</html>

效果演示(IE6+):

 
 
 

// <![CDATA[
// 图片总数
var total = 3;
//当所有图片都显示的时候,所有图片的left都=0,这个时候最后一张图会叠最上面,所以计数器从最后一个开始计数
var count = total-1;
function sliderLeft(){
// 拼出当前以及左右图片的id
var left = "list_"+((count+total*100-1)%total);
var center = "list_"+((count+total*100)%total);
var right = "list_"+((count+total*100+1)%total);
// 获取对象
var pic_left = document.getElementById(left);
var pic_center = document.getElementById(center);
var pic_right = document.getElementById(right);
// 设置坐标
pic_left.style.left = -160 + "px";
pic_center.style.left = 0 + "px";
pic_right.style.left = 160 + "px";
var i=0;
var timer = setInterval(function(){
if(i=0){
// 滑动
pic_left.style.left = i – 320 + “px”;
pic_center.style.left = i – 160 + “px”;
pic_right.style.left = i + “px”;
i-=40;
}else{
clearInterval(timer);
}
},80);
// 计数
count++;
}
// ]]>

上一讲:js 简单的滑动教程(一)
下一讲:js 简单的滑动教程(三)

js 判断undefined类型

    if (reValue == undefined){ alert("undefined"); } // 无法判断,使用typeof
    if (typeof(reValue) == "undefined") { alert("undefined"); } 

typeof 返回的是字符串,有六种可能:”number”、”string”、”boolean”、”object”、”function”、”undefined”

undefined的获得,两种方法 第一种是void 0 第二种是自己写空函数获得返回值

如:var undefined = (function(){})();