纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
2024-04-24 09:42:43
基于js和css，跟着网上的视频教程，结合自己想要的效果，做出了一个类似于淘宝海报的效果。
如图：淘宝首页
自己做的：
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>lunbo3</title>
6 <style type="text/css">
7 *{ 8 margin: 0;
9 padding: 0;
10 }
11 li{ 12 list-style: none;
13 }
14 a{ 15 text-decoration: none;
16 }
17 img{ 18 vertical-align: middle;
19 }
20 .warp{ 21 width: 640px;
22 height: 270px;
23 margin: 0 auto;
24 position: relative;
25 overflow: hidden;
26 }
27 .box{ 28 height: 270px;
29 position: absolute;
30 left: 0px;
31 /*平移过渡动画，时间为半秒钟*/
32 transition: all 0.5s;
33 }
34 .box li{ 35 width: 640px;
36 height: 270px;
37 float: left;
38 }
39 .box li a{ 40 width: 640px;
41 height: 270px;
42 }
43 .box li a img{ 44 width: 100%;
45 height: 100%;
46 cursor: pointer;
47 }
48 .buts span{ 49 color: #FFFFFF;
50 display: none;
51 width: 8px;
52 height: 14px;
53 line-height: 18px;
54 background-color: rgba(0,0,0,0.5);
55 text-align: center;
56 margin: 0 auto;
57 cursor: pointer;
58 -moz-user-select: none; /*火狐*/
59 -webkit-user-select: none; /*webkit浏览器*/
60 -ms-user-select: none; /*IE10*/
61 -khtml-user-select: none; /*早期浏览器*/
62 user-select: none;
63
64 }.buts span:hover{ 65 background-color: rgba(0,0,0,0.8);
66 }
67 .buts span img{ 68 display: block;
69 width: 8px;
70 height: 14px;
71 }
72 .butL{ 73 position: absolute;
74 z-index: 100;
75 top: 120px;
76 padding: 10px 10px 10px 5px;
77 border-top-right-radius: 17px;
78 border-bottom-right-radius: 17px;
79 }
80 .butR{ 81 position: absolute;
82 z-index: 100;
83 top: 120px;
84 right: 0;
85 padding: 10px 5px 10px 10px;
86 border-top-left-radius: 17px;
87 border-bottom-left-radius: 17px;
88 }
89 .dotBox{ 90 position: absolute;
91 z-index: 999;
92 bottom: 10px;
93 width: 100%;
94 height: 18px;
95 text-align: center;
96 }
97 .dot{ 98 display: inline-block;
99 margin: 0 auto;
100 height: 8px;
101 padding: 5px;
102 border-radius: 15px;
103 background-color: rgba(255,255,255,0.3);
104 }
105 .dot li{106 float: left;
107 width: 8px;
108 height: 8px;
109 line-height: 8px;
110 border-radius: 4px;
111 color: #FFFFFF;
112 text-align: center;
113 margin: 0 4px;
114 background-color: #FFFFFF;
115 cursor: pointer;
116 user-select:none;
117 -moz-user-focus: none;
118 -webkit-user-select: none;
119 -lhtml-user-select:none;
120 -moz-user-select: none;
121 -ms-user-select: none;
122 font-size: 10px;
123 }
124 .dot li:hover{125 background-color: #FF0000;
126 }
127 #dotIs{128 background-color: #FF0000;
129 }
130 </style>
131
132 </head>
133 <body>
134 <div class="warp">
135 <!--图片-->
136 <ul class="box" id="box">
137 <li><a href="#"><img src="../image/lunbo/00.jpg" /></a></li>
138 <li><a href="#"><img src="../image/lunbo/01.jpg" /></a></li>
139 <li><a href="#"><img src="../image/lunbo/02.jpg" /></a></li>
140 <li><a href="#"><img src="../image/lunbo/03.jpg" /></a></li>
141 <li><a href="#"><img src="../image/lunbo/04.jpg" /></a></li>
142 <li><a href="#"><img src="../image/lunbo/05.jpg" /></a></li>
143 </ul>
144 <!--按钮-->
145 <div class="buts">
146 <span class="butL" id="butL"><img src="../image/lunbo/L.png" /></span>
147 <span class="butR" id="butR"><img src="../image/lunbo/R.png" /></span>
148 </div>
149 <!--圆点-->
150 <div class="dotBox">
151 <ul class="dot" id="dot">
152 <li id="dotIs"></li>
153 <li></li>
154 <li></li>
155 <li></li>
156 <li></li>
157 <li></li>
158 </ul>
159 </div>
160 </div>
161
162 <script type="text/javascript">
163 window.onload = function(){
164
165 //获取ul（图片外框）
166 var box = document.getElementById("box");
167 //获取li（图片）
168 var li = box.getElementsByTagName("li");
169 //获取单个li宽度（单张图片宽度）
170 var liWidth = li[0].scrollWidth;
171 //获取左按钮
172 var butL = document.getElementById("butL");
173 //获取右按钮
174 var butR = document.getElementById("butR");
175 //获取小圆点
176 var dot = document.getElementById("dot").getElementsByTagName("li");
177 //定义数字
178 var index = 0;
179 //定义开关
180 var flag = true;
181
182 //更改图片外框宽度（图片的数量*单张图片的宽度）
183 box.style.width = li.length*liWidth+"px";
184
185 //点击下一张
186 butR.onclick = function(){
187 //判断flag是否为true
188 if(flag){
189 //更改flag为false
190 flag = false;
191 //数字加1
192 index++;
193 //判断数字是否等于图片的总数量
194 if(index == li.length){
195 //将数字改为0
196 index = 0;
197 };
198 //更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度
199 box.style.left = -index*liWidth+"px";
200 //遍历循环查找小圆点下标位置
201 for(var i = 0 ; i < dot.length; i++){
202 //判断小圆点的下标位置是否与数字相同
203 if(i == index){
204 //更改已匹配到li，将已写好的css样式id名字赋给它
205 dot[index].id = "dotIs";
206 }else{
207 //去掉未匹配的id名字
208 dot[i].id = "";
209 };
210 };
211 //延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致
212 setTimeout(function(){
213 //改变flag为true
214 flag = true;
215 },500)
216 };
217 };
218
219 //点击上一张
220 butL.onclick = function(){
221 //判断flag是否为true
222 if(flag){
223 //更改flag为false
224 flag = false;
225 //数字减1
226 index--;
227 //判断数字是否小于0
228 if(index < 0){
229 //将数字图片总数的数字
230 index = li.length-1
231 };
232 //更改图片外边框的left，向右边移动，移动的尺寸为数字*单张图片图片的宽度
233 box.style.left = -index*liWidth+"px";
234 //遍历循环查找小圆点下标位置
235 for(var i = 0 ; i < dot.length; i++){
236 //判断小圆点的下标位置是否与数字相同
237 if(i == index){
238 dot[index].id = "dotIs";
239 //更改已匹配到li，将已写好的css样式id名字赋给它
240 }else{
241 //去掉未匹配的id名字
242 dot[i].id = "";
243 };
244 };
245 //延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致
246 setTimeout(function(){
247 //改变flag为true
248 flag = true;
249 },500);
250 };
251 };
252
253 //设置自动播放
254 function play(){
255 //连续不断持续的执行
256 lunbo = setInterval(function(){
257 //数字加1
258 index++;
259 //判断数字是否等于图片的总数量
260 if(index == li.length){
261 //将数字改为0
262 index = 0;
263 };
264 //更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度
265 box.style.left = -index*liWidth+"px";
266 //遍历循环查找小圆点下标位置
267 for(var i = 0 ; i < dot.length; i++){
268 //判断小圆点的下标位置是否与数字相同
269 if(i == index){
270 //更改已匹配到li，将已写好的css样式id名字赋给它
271 dot[index].id = "dotIs";
272 }else{
273 //去掉未匹配的id名字
274 dot[i].id = "";
275 };
276 };
277 //每3000（3秒）执行一次。
278 },3000);
279 };
280
281 //设置停止自动播放
282 function stop(){
283 //停止（lunbo）已写好的持续执行方法。
284 clearTimeout(lunbo);
285 };
286
287 //默认启动自动播放
288 play();
289
290 //点击圆点
291 for(var i = 0; i < dot.length; i++){
292 //给每个小圆点赋值，每个小圆点都有一个相对应的数字。
293 dot[i].is = i;
294 //鼠标移入小圆点
295 dot[i].onmouseover = function(){
296 //停止图片自动播放
297 stop();
298 }
299
300 //鼠标移出小圆点
301 dot[i].onmouseout = function(){
302 //图片继续自动播放
303 play();
304 }
305
306 //点击小圆点
307 dot[i].onclick = function(){
308 //更改图片外边框的left，向选择的小圆点移动方向，移动的尺寸为小圆点的数字*单张图片图片的宽度
309 box.style.left = -this.is*liWidth+"px";
310 //循环遍历小圆点
311 for(var i = 0 ; i < dot.length; i++){
312 //判断小圆点的数字是否等于选中的小圆点数字
313 if(i == this.is){
314 //更改数字（index）等于的小圆点选中的数字
315 index = dot[i].is;
316 //更改已匹配到li，将已写好的css样式id名字赋给它
317 dot[this.is].id = "dotIs";
318 }else{
319 //去掉未匹配的id名字
320 dot[i].id = "";
321 };
322 };
323 };
324 };
325
326 //鼠标移入左按钮
327 butL.onmouseover = function(){
328 //停止自动轮播
329 stop();
330 //左按钮显示
331 butL.style.display = "block";
332 //右按钮显示
333 butR.style.display = "block";
334 };
335
336 //鼠标移出左按钮
337 butL.onmouseout = function(){
338 //继续自动轮播
339 play();
340 //左按钮隐藏
341 butL.style.display = "none";
342 //右按钮隐藏
343 butR.style.display = "none";
344 }
345
346 //鼠标移入右按钮
347 butR.onmouseover = function(){
348 //停止自动轮播
349 stop();
350 //左按钮显示
351 butL.style.display = "block";
352 //右按钮显示
353 butR.style.display = "block";
354 };
355
356 //鼠标移出右按钮
357 butR.onmouseout = function(){
358 //继续自动轮播
359 play();
360 //左按钮隐藏
361 butL.style.display = "none";
362 //右按钮隐藏
363 butR.style.display = "none";
364 }
365
366 //鼠标移入图片
367 box.onmouseover = function(){
368 //停止自动轮播
369 stop();
370 //左按钮显示
371 butL.style.display = "block";
372 //右按钮显示
373 butR.style.display = "block";
374 };
375
376 //鼠标移出图片
377 box.onmouseout = function(){
378 //继续自动轮播
379 play();
380 //左按钮隐藏
381 butL.style.display = "none";
382 //右按钮隐藏
383 butR.style.display = "none";
384 }
385
386 }
387 </script>
388 </body>
389 </html>未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
转载于:https://www.cnblogs.com/iFangHuanrui/p/10625500.html
纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图相关推荐
- 制作类似于淘宝点击简单的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- 爬虫第二弹：千图网电商淘宝模板图片下载
爬虫第二弹:千图网电商淘宝模板图片下载 一.功能分析: 1.下载千图网电商淘宝的所有模板图片要求是高清版本: 2.并按照主页面将图片归类文件夹. 二.思路分析: 1.利用scrapy构建scra ...
- 淘宝主图优化技巧 测试淘宝女鞋主图点击率方法
其实我们在网上购物的时候,第一印象不是说你这个商品有多好,而是说这图片有多美,毕竟视觉上给我们的触动还是挺大的,所以不同的店家都会在图片上下文章,那么对于女鞋店来说,我们要如何优化这个主图呢?估计各位 ...
- 【iOS_GitHub】评分条/星级条（类似于淘宝/京东/1号店/亚马逊等商城类的评分条，支持0.5分哦）
RatingBar 评分条(类似于淘宝/京东/1号店/亚马逊等商城类的评分条,支持0.5分哦) 先上图,看一下是否符合你的场景吧! Function Description 点击评分 滑动评分 个 ...
- 最新淘宝主图下载方法-最新淘宝主图下载工具-马赛克视频助手
做电商的朋友经常需要去下载淘宝上的别人的主图视频,那么淘宝主图视频怎么下载呢? 工具/材料 马赛克视频助手,免费工具,www.mask4.com,大家自行下载 操作方法 1.先打开马赛克视频助手 2. ...
- 纯JS实现带小圆点缩略图及左右箭头的轮播图
HTML部分 <body> <div id="container"><div id="list" class="pic& ...
- html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- 淘宝直播怎么做，主播怎么做才能引流，卖出产品
现在做淘宝直播的人越来越多,竞争越来越大,所以接下来考验的就是各位主播的能力了.能力强,能积累更多的粉丝,直播在线观看人数也多,这样的话淘宝肯定就会优先推送给买家,因为淘宝是希望淘宝直播为平台带来更多 ...
最新文章
- ASP.NET的(HttpModule,HttpHandler)
- Invalidate和postInvalidate
- Sql Server 开窗函数Over()的使用
- jq mysql二级联动_jq+php+mysql 实现二级菜单联动
- python分形几何_Python教程之绘制Mandelbrot集合
- 很抱歉 此功能看似已中断 并需要修复。请使用Windows控制面板中的“程序与功能”选项修复
- Mysql学习总结（40）——MySql之Select用法汇总
- Struts2与Ajax数据交互
- 适用于protel99SE初学者
- 细胞自动机 通用计算机,科学网—《走近混沌》-27-初级细胞自动机 - 张天蓉的博文...
- 技嘉ide模式怎么改,电脑BIOS中怎么设置硬盘为IDE模式
- 洛谷 P5708 三角形面积 C语言
- Windows7 VS2015 下编译 PythonQt3.2
- 能量英语(一)之激情英语
- 企立方：拼多多用客服机器人怎么样
- 【OVS2.5.0源码分析】sFlow实现分析（3）
- Frenetic Python实验(二)
- 云服务器和VPS服务器的区别
- nelder mead方法求解非线性方程组matlab实现
- SAP 设置定时任务
热门文章
- Selctive Search中的ABO评价方法
- ecu可以用计算机控制吗,ECU应该怎么调？买来的电脑里的默认ECU程序能用么？
- .NET设计模式系列文章 CHM电子书版
- 如何解决chrome浏览器地址栏变黑色（chrome搜索栏变黑）(mac电脑）
- Python实战：利用Uplift模型识别营销敏感用户提升市场策略（二）
- 你知道中国历届奥运会中获得了多少金牌吗？
- Android短信验证码控件,Android中实现短信验证码自动填入
- wordpress mysql缓存_WordPress 如何启用 Memcached 内存缓存来提高网站速度
- ms12-020复现-xp蓝屏
- uos服务器系统rpm安装oracle 19c