JS轮播图定时播放，鼠标经过轮播图时不停，鼠标离开轮播图时播放速度越来越快

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .box2{
            position: relative;
            width: 500px;
            height: 400px;
            border: 10px solid rgb(247, 241, 241);
            box-shadow: 10px 10px 10px #aeaeae;
            overflow: hidden;
        }
        .tup{
            position: absolute;
            width: 3000px;
            height: 100%;
            border: 1px solid blueviolet;
        }
        .tup li{
            list-style: none;
           width: 500px;
           height: 400px;
           /* border: 1px solid burlywood; */
           float: left;
 
        }
        .tup li:nth-child(1){
            background: url(images/大1.jpg);
           
        }
        .tup li:nth-child(2){
            background: url(images/大2.jpg);
        }
        .tup li:nth-child(3){
            background: url(images/大5.png);
        }
        .tup li:nth-child(4){
            background: url(images/大6.jpg);
        }
        .tup li:nth-child(5){
            background: url(images/大7.jpg);
        }
        .tup li:nth-child(6){
            background: url(images/大8.jpg);
        }
        .right{
            position: absolute;
            top: 50%;
            margin-top: -10px;
            right: 20px;
            width: 20px;
            height: 20px;
            background-color:rgba(0,0,0,0.4);
        }
        a{
            color: aliceblue;
            text-decoration: none;
        }
        .left{
            position: absolute;
            top: 50%;
            margin-top: -10px;
            left: 20px;
            width: 20px;
            height: 20px;
            background-color:rgba(0,0,0,0.4);
        }
       
    </style>
</head>
<body>
    <div class="box2">
        <ul class="tup">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="right">
            <a href="#">></a>
        </div>
        <div class="left">
            <a href="#"><</a>
        </div>
    </div>
     
</body>
<script>
const right=document.querySelector('.right');
const left=document.querySelector('.left');
const ul=document.querySelector('.tup');
const box2=document.querySelector('.box2');
let arr=document.querySelectorAll('.tup li');
console.log(arr)
let index=0;
let width=500;
function stepy(){
    ul.style.left=-index*width+'px';
}
right.addEventListener('click',function(){
    index++;
    //如果这只写大于arr.length，最后会多一个空白li
    if(index>=arr.length){
        index=0;
    }
    stepy();
   
})
left.addEventListener('click',function(){
    index--;
    if(index<0){
        index=5;
    }
    -stepy();
})
let xh=setInterval(function(){
  right.click();
    
     
},1000)
box2.addEventListener('mouseenter',function(){
    clearInterval(xh);
    
    console.log(xh);
})
 
box2.addEventListener('mouseleave',function(){
    clearInterval(xh);
   setInterval(function(){
    right.click();
},1000)
 
})
 
 
 
</script>
</html>

　　解决方法：鼠标离开时，设置的定时器没有命名，也没有关闭定时器

复制代码
box2.addEventListener('mouseleave',function(){
    clearInterval(xh);
   xh= setInterval(function(){
    right.click();
},1000)

})
复制代码

 

posted @   晓葡萄在路上  阅读(43)  评论(0)  编辑  收藏  举报
相关博文：
· Element UI 实现上传图片的功能
· HTML中的marquee标签
· jquery 手写定时轮播与鼠标滑过取消轮播效果
· 简单轮播图bug
· ajax自动轮播图-可点击-鼠标悬停止等-完善版
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示