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以内。

    
        //全局计数器
        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){
                    //通过改变边距来滑动
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i-=50;
                }else{
                    // 清楚计时器
                    clearInterval(timer);
                }
            },80);
            //80为每80微秒执行一次,通过这个执行间隔与上方每次减少的像素来控制滑动的速度
            
        }
        
        function sliderRight(){
            if(count){
                count++;
            }
            /** count-1 是为了让计数器计到当前的li,
            /* 否则计数器未计到当前的li,会导致向左滑动时向左多减一个
            **/
            var pic = document.getElementById("list_"+(count-1));
            var i=0;
            var timer1 = setInterval(function(){
                if(i){
                    pic.style.margin = "0 0 0 -"+ i +"px";
                    i+=50;
                }else{
                    // 滑出边界后使其隐藏
                    pic.style.display = "none";
                    clearInterval(timer1);
                }
            },80);
        }
    
简单的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):

 
 

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

 

下一篇:

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