我的轮播效果出了问题，谁可以帮我看一下-慕课网

首页课程实战体系课手记专栏慕课教程

我的轮播效果出了问题，谁可以帮我看一下

来源：4-1 焦点轮播图效果

arlenhui

2015-04-27 17:27

下面的a标签相当于切换图片，在a标签扫过几下后，图片轮播的时间就不正确了，根本停不下来，是不是定时器的开关有问题，我看了好多遍代码，找不出bug

写回答关注

2回答

一起去看海咯

2015-12-15 18:48:53

每次打开定时器的时候先检测下现在有定时器运行吗？如果有就清除定时器！

0 0

hey自然: 2015-09-14 20:34:08

你的代码写的还好。之所以出现bug是因为太乱。导致timer这个变量有点乱。每次在执行一个新计时器时，先在里面清除一下之前的计时器就可以。我把你多余的给你注释了。你参考一下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
/*
任务
    1 .banner_imgs的宽度应该等于多少？
    2 如果让.number 里面a 居中？

 */

body,ul{margin: 0; padding: 0;}
li{list-style: none;}

.banner{
    width: 800px;
    height: 450px;
    margin: 100px auto;
    position: relative;
    overflow:hidden;
}
.banner_imgs{
    width: 500%;
    position: absolute;
    left: 0; top: 0;
    
}
.banner_imgs li{
    float: left;
}
.banner_imgs img{
    width: 800px;
    height: 100%;
    display: block;
}
.number{
    width: 100%;
    text-align:center;
    position: absolute;
    left: 0;
    bottom: 20px;
    
}
.number a{
    display: inline-block;
    width: 20px;
    background-color: #fff;
    height: 6px;
    overflow: hidden;
}
.number .on{
    background-color:red;
}
</style>
<script>
    window.onload=function(){
        var warp=document.getElementById("warp"),
            img=document.getElementById("img"),
            list=document.getElementById("num").getElementsByTagName("a"),
            index=0,
            timer=null;
            //初始化
    
    //自动切换函数
    function play(){
        index++;
        if(index>=list.length) index=0;
        count(index);
    }
    /*if(timer){
        clearInterval(timer);
        timer=null;
    }*/
    timer = setInterval(play,1000);
    //切到哪张图函数
    function count(cindex){
        for(var i=0;i<list.length;i++){
            list[i].className="";
        }
        list[cindex].className="on";
        img.style.left="-"+800*cindex+"px";
        index=cindex;
    }
    //移入容器停止
  /*  warp.onmouseover=function(){
        clearInterval(timer);
        timer=null;
    }*/
    //移出容器开始
  /*  warp.onmouseout=function(){
        timer=setInterval(play,1000);
    }*/
    //划过标签切换
     for(var j=0;j<list.length;j++){
         list[j].index=j;
         list[j].onmouseover=function(){
             clearInterval(timer);
             count(this.index);
         }
         list[j].onmouseout = function(){
            timer=setInterval(play,2000);
       }
     }        
    }
</script>
</head>

<body>
<div class="banner" id="warp">
    <ul class="banner_imgs" id="img">
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="http://img.mukewang.com/53ad26320001289e13660768.jpg" alt=""></a></li>
    </ul>
    <div class="number" id="num">
        <a href="javascript:;" class="on"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
</body>
</html>

0 0

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65469 学习 · 533 问题

查看课程

相似问题

我的延迟效果代码出现问题，谁可以帮我看看

回答 1

有bug，谁帮我看下

回答 3

求高手帮我看下，那里错了我效果实现不了~~~~

回答 3

焦点轮播图效果实现

回答 3

我看了下我没有效果，为什么divs.length打出来是6啊不是5好奇怪啊

回答 1

打开慕课网App查看更多内容