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 简单的滑动教程(四)

发表评论

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