开发者社区> 问答> 正文

js轮播图的一个问题求助

a123456678 2016-03-12 11:36:56 728
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" charset="utf-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>demo</title>
</head>
<style type="text/css">
    *{margin:0;padding:0;}
    ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
    #list{height:250px;list-style-type:none;overflow:hidden;}
    #luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}

    #imgs li{float:left;height:200px;width:600px;}
    #imgs{height:200px;background:#ddd;position:absolute;}
    .a{background:red;}
    .b{background:yellow;}

    #num{overflow:auto;position:absolute;right:0;bottom:0;}
    #num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}
</style>
<body>
<div id="luanpo">
    <ul id="imgs" style="left:0px;">
        <li><img src="../imgs/img01.jpg" alt="" width="600" height="300"/></li>
        <li><img src="../imgs/img02.jpg" alt="" width="600" height="300"/></li>
        <li><img src="../imgs/img03.jpg" alt="" width="600" height="300"/></li>
        <li><img src="../imgs/img04.jpg" alt="" width="600" height="300"/></li>
    </ul>
    <ul id="num">
        <li class="a">1</li>
        <li class="b">2</li>
        <li class="b">3</li>
        <li class="b">4</li>
    </ul>

</div>


<script type="text/javascript">
    var imgs = document.getElementById('imgs').getElementsByTagName('li');
    var nums = document.getElementById('num').getElementsByTagName('li');
    var img = document.getElementById('imgs');
    var timer;
    var index = 0;
    for(var i = 0; i<nums.length; i++){
        nums[i].index = i;
        nums[i].onclick = function(){
            clearInterval(timer);
            for(var j = 0; j<nums.length; j++){
                nums[j].className = 'b';
            }
            index = this.index;
            this.className = 'a';
            var Left =  -(imgs[0].offsetWidth * this.index);
            var time = 300;
            var interval = 10;
            var offset = Left - parseInt(img.style.left);
            var speed = offset/(time/interval);
            var go = function(){
                if(offset == 0){return};
                if(parseInt(img.style.left) < Left && speed > 0 || parseInt(img.style.left) > Left && speed < 0 ){
                    img.style.left = parseInt(img.style.left) + speed +'px';
                    setTimeout(go,interval);
                }
            }
            go();
        }
        nums[i].onmouseout = function(){
            start();
        }
    }
    function start(){
        clearInterval(timer);
        timer = setInterval(function(){
            if(index == 4){
                index = 0;
            }else{
                img.style.left = -(imgs[0].offsetWidth * index) +'px';
                for(var k = 0; k<nums.length; k++){
                    if(nums[k].index === index){
                        nums[k].className = 'a';
                    }else{
                        nums[k].className = 'b';
                    }
                }
                index+=1;
            }
        },3000);
    }
    start();
</script>
</body>
</html>

我最后一张图到第一张图的时候 比第一张到第二张慢 是怎么回事啊? 求指点

JavaScript Go
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:00:35
    timer = setInterval(function () {
        img.style.left = -(imgs[0].offsetWidth * index) + 'px';
        for (var k = 0; k < nums.length; k++) {
            if (nums[k].index === index) {
                nums[k].className = 'a';
            } else {
                nums[k].className = 'b';
            }
        }
        index += 1;
        if(index == 4){
            index = 0;
        }
        }, 3000);
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程