为什么越播越快

main.onmouseout=function(){
        timer=setInterval(function(){   
        index++;
        if (index>=len) {
            index=0;
        }
        changeImg();
        },3000)
    }
     
function changeImg(){
    //console.log(index);
    //pics[index].className=slide-active;
    for (var i = 0; i < len; i++) {
        pics[i].style.display="none";
    }
    pics[index].style.display="block";
}

为什么鼠标滑过移出后之后再移出会越播越快。。咋办

大脸猫大脸猫喵喵喵 2017-11-09

源自：项目：JS实现轮播特效 3-4 图片自动轮播

收起

5回答

怎么都被占用了呢回答被采纳获得+3积分 2017-11-09 18:42:04

每次移入移出，没有清除定时器，它就会累加的。多个计时器一块作用，设置的时间就会发生交叉，速度就越来越快了

收起回答

大脸猫大脸猫喵喵喵提问者 #1

哦哦了解了，谢谢老师

2017-11-09 18:45:24

怎么都被占用了呢 2017-11-09 18:32:25

鼠标移入，要清除定时器

收起回答

提问者大脸猫大脸猫喵喵喵 #1

可是为什么会在移出的时候越来越快呢？

2017-11-09 18:39:49

提问者大脸猫大脸猫喵喵喵 2017-11-09 18:22:11

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>图片轮播</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
    <!--图片轮播-->
    <div class="banner" id="banner">
        <a href="#">
            <div class="banner-slide slide1 slide-active "></div>
        </a>
        <a href="#">
            <div class="banner-slide slide2"></div>
        </a>
        <a href="#">
            <div class="banner-slide slide3 "></div>
        </a>
    </div>
    <!--上一张下一张按钮-->
    <a href="javascript:void(0)" class="button prev"></a>
    <a href="javascript:void(0)" class="button next"></a>
    <!--圆点导航-->
    <div class="dots">
        <span class="active"></span><!--active表示当前圆点-->
        <span></span>
        <span></span>
    </div>
    <script type="text/javascript" src="js/js.js"></script>
</div>
</body>
</html>
 
CSS:
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body{
    font-family: "微软雅黑";
    color: #14191e;
}
.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    position: relative;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}
.slide1{
    background-image: url("../img/bg1.jpg");
}
.slide2{
    background-image: url("../img/bg2.jpg");
}
.slide3{
    background-image: url("../img/bg3.jpg");
}
.slide-active{
    display: block;
}
 
 
.button{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url("../img/n.png") no-repeat center center;
 
}
.button:hover{
    background-color: #333;
}
.prev{
    transform: rotate(90deg);
}
.next{
    left: auto;
    right: 0;
    /*transform: rotate(270deg);*/
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    text-align: right;
}
.dots span{
    display: inline-block;/*行内元素转为块元素，不然没办法设宽高*/
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 8px;
    cursor: pointer;
}
.dots span.active{
    background: #fff;
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}
 
JS:
//封装一个代替document.getElementById()的方法，以免获取元素时一直写太麻烦，之后直接调用即可
function byId(id){//要有形参
    return typeof(id)==="string"?document.getElementById(id):id;
}
 
 
var index=0,
    timer,
    pics=byId("banner").getElementsByTagName("div"),
    len=pics.length;
 
function slideImg(){
 
    var main=byId("main");
    main.onmouseover=function(){
        /*setTimeout(
            clearTimeout(timer)
            );*/
    }
    main.onmouseout=function(){
 
        timer=setInterval(function(){
             
        index++;
        if (index>=len) {
            index=0;//轮流
        }
         
        changeImg();
        },3000)
        //clearInterval(timer);
    }
 
}
 
//切换图片
function changeImg(){
    //console.log(index);
    //pics[index].className=slide-active;
    for (var i = 0; i < len; i++) {
        pics[i].style.display="none";
    }
    pics[index].style.display="block";
}
slideImg();