js 简单的滑动2

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>