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

发表评论

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