先看效果
定制app开发鼠标悬浮时停止，离开时自动轮播，点下一张小圆点会随着动
直接上代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrapper { width: 600px; height: 350px; border: 1px solid red; position: relative; } /* 5张图片叠加到一块 */ .wrapper img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; } .wrapper img:nth-of-type(1) { display: block; } /* 小圆点 */ .btn { width: 150px; display: flex; justify-content: space-around; position: absolute; left: 225px; bottom: 10px; z-index: 100 } .btn span { display: block; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; } /* 左右箭头 */ .wrapper a { text-decoration: none; font-size: 50px; color: red; position: absolute; top: 35%; } .wrapper a:nth-of-type(1) { left: 10px; } .wrapper a:nth-of-type(2) { right: 10px; } .active { background-color: red; } </style> </head> <body> <div class="wrapper"> <div class="contain"> <img src="./imgs/1.png" alt=""> <img src="./imgs/2.png" alt=""> <img src="./imgs/3.png" alt=""> <img src="./imgs/4.png" alt=""> <img src="./imgs/5.png" alt=""> </div> <div class="btn"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:void(0);"><</a> <a href="javascript:void(0);">></a> </div> <script src="js/jquery-3.6.0.js"></script> <script> var index=0; // 点击上一张 $("a:first").click(function(){ prev_pic(); }) // 点击下一张 $("a:last").click(function(){ next_pic(); }) // 悬浮停止 $(".wrapper").mouseover(function(){ clearInterval(id); }); $(".wrapper").mouseout(function(){ autoplay(); }) // 下一张 function next_pic(){ index++; if(index>4){ index=0; } addStyle(); } // 上一张 function prev_pic(){ index--; if(index<0){ index=4; } addStyle(); } // 控制图片显示隐藏,小圆点背景色 function addStyle(){ $("img").eq(index).fadeIn(); $("img").eq(index).siblings().fadeOut(); $("span").eq(index).addClass("active"); $("span").eq(index).siblings().removeClass("active"); } // 自动轮播 var id; autoplay(); function autoplay(){ id=setInterval(function(){ next_pic(); },1000) } </script> </body></html>- 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
这里只要把图片地址更换一下 ，引用文件就可以了