博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

yj轮播图2

Posted on 2017-02-07 15:20  程序员入门到放弃  阅读(132)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{list-style:none;}
        *{margin:0;padding:0;}
        #box{width:1750px;height:940px;margin: 0 auto;overflow:hidden;position:relative;border: 2px #000 solid;}
        #ul{height:940px;width: 8750px;position:absolute;left:-1750px;}
        #ul li{width:1750px;height:940px;float:left;}
        span{width:25px;height:25px;background:#000;}
        span a{text-decoration:none;font-size:20px;color:#fff;line-height:25px;}
        .none{margin-left:5px;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="box">
            <ul id="ul">
                <li>
                    <img src="banner3.jpg">
                </li>
                <li>
                    <img src="banner1.jpg">
                </li>
                <li>
                    <img src="banner2.jpg">
                </li>
                <li>
                    <img src="banner3.jpg">
                </li>
                <li>
                    <img src="banner1.jpg">
                </li>
            </ul>
        </div>

        <span id="span_1"><a href="#"> < </a></span>
        <span id="span_2"><a href="#" class="none"> > </a></span>    
    </div>
        <script type="text/javascript">

        var ul = document.getElementById("ul");
        var lis = ul.getElementsByTagName("li");
        var span_1 = document.getElementById("span_1");
        var span_2 = document.getElementById("span_2");
        index = 1;
        var lislen = lis.length;
        var nim = lis[0].offsetLeft * lislen + "px";
        var toggle = true;
        var speed = -50; 
        var newleft = ul.offsetLeft;
        span_1.onclick = function(){
            if(toggle){
                toggle = false;
                index++;        
                var timer = setInterval(function(){
                        newleft = newleft + speed;
                        
                            //console.log(newleft);
                        if (newleft <= -1750*index){

                                newleft = -1750*index;                            
                                toggle =true;
                            clearInterval(timer);
                        }

                        ul.style.left = newleft + "px";

                        if(index==4 && newleft == -1750*index){
                            index = 1;
                            ul.style.left = -1750 + "px";
                            newleft = -1750;
                        }
                        
                    },1000/60)
            }
            
                    
        };

        span_2.onclick = function(){
            index--;
            ul.style.left = -1750*index+"px";
            
            if(index<=0){
                index=3;
            }
        };

        /*span_1.onclick = function(){
            index++;
            ul.style.left = -1750*index+"px";
            
            if(index>=4){
                index=1;
            }
        }*/

        </script>
</body>
</html>