js 简单的滑动教程（一）

作者：Lellansin 转载请标明出处，谢谢


首先我们要实现一个简单的滑动，三张图、点击左边向左滑动，点右向右滑，碰到临界值的时候就不能滑动。

这个简单滑动的原理是，通过改变边距来达到移动图片的效果，比如向右滑动的时候，让左边li的左边距不断减小来移动图片，而右边的li（向左浮动）会自动靠过来，等到图片移出center_window之后，再设置左边li的display为none使其隐藏。在时间恰当好的情况下，看起来就好像是当前的图片向左滑动，而右边的图片滑了过来。

要实现这一功能并不难，我们首先需要把静态页面准备好。

    <div id="window">
        <div id="left_arrow"></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"></div>
    </div>

整体一个window，里面包含三个部分，分别是向左和向右的箭头，以及中间的显示列表。

<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:600px; }
    #center_window ul li{ height:200px; width:160px; float:left; }
    #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>

以上是css部分，我们将显示的图片宽高需在160px和200px以内。

    <script>
        //全局计数器
        var count = 0; 
        
        function sliderLeft(){
            if(count>0){
                count--;
            }
            //获取当前要操作的li
            var pic = document.getElementById("list_"+count);
            //若上一个li已经被隐藏，表示已经到了第一个li
            if(!(pic.style.display == "none")){
                return;
            }
            //显示li
            pic.style.display = "";
            var i=250;
            var timer = setInterval(function(){
                if(i<251){
                    //通过改变边距来滑动
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i-=50;
                }else{
                    // 清楚计时器
                    clearInterval(timer);
                }
            },80);
            //80为每80微秒执行一次,通过这个执行间隔与上方每次减少的像素来控制滑动的速度
            
        }
        
        function sliderRight(){
            if(count<2){
                count++;
            }
            /** count-1 是为了让计数器计到当前的li,
            /* 否则计数器未计到当前的li,会导致向左滑动时向左多减一个
            **/
            var pic = document.getElementById("list_"+(count-1));
            var i=0;
            var timer1 = setInterval(function(){
                if(i<251){
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i+=50;
                }else{
                    // 滑出边界后使其隐藏
                    pic.style.display = "none";
                    clearInterval(timer1);
                }
            },80);
        }
    </script>

简单的js已经出现，具体已经有注释，注意getElementById的时候里面的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滑动</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:600px; }
    #center_window ul li{ height:200px; width:160px; float:left; }
    #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>
    
    <script>
        
        var count = 0;
        
        function sliderLeft(){
            if(count>0){
                count--;
            }
            var pic = document.getElementById("list_"+count);
            if(!(pic.style.display == "none")){
                return;
            }
            pic.style.display = "";
            var i=250;
            var timer = setInterval(function(){
                if(i<251){
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i-=50;
                }else{
                    clearInterval(timer);
                }
            },80);
            
        }
        function sliderRight(){
            if(count<2){
                count++;
            }
            var pic = document.getElementById("list_"+(count-1));
            var i=0;
            var timer1 = setInterval(function(){
                if(i<251){
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i+=50;
                }else{
                    pic.style.display = "none";
                    clearInterval(timer1);
                }
            },80);
        }
    </script>
</body>
</html>

效果演示（本代码不支持IE6）：

js 简单的滑动教程（二）

posted @ 2012-07-18 23:10 Lellansin 阅读(948) 评论(0) 收藏举报

刷新页面返回顶部

Lellansin

js 简单的滑动教程（一）

公告