Javascript特效：轮播图

知识点

排他思想：当前图片和标签只能有一个带有特殊属性
利用索引记录当前的值
一共有n张图片，loop %= n

运行结果

每隔一秒不断播放

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;color: #000;}#box{width: 322px;height: 250px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.left, .right{width: 60px;height: 250px;float: left;}.center{width: 200px;height: 250px;float: left;border-left:1px solid #ccc;border-right:1px solid #ccc;overflow: hidden;}li{line-height: 27px;text-align: center;border-bottom: 1px solid #ccc;}.left li:last-child, .right li:last-child{border-bottom: none;}.current{background: red;}</style>
</head>
<body>
<div id="box"><ul class="left"><li class="current"><a href="#">美食1</a></li><li><a href="#">美食2</a></li><li><a href="#">美食3</a></li><li><a href="#">美食4</a></li><li><a href="#">美食5</a></li><li><a href="#">美食6</a></li><li><a href="#">美食7</a></li><li><a href="#">美食8</a></li><li><a href="#">美食9</a></li></ul><div class="center"><a href="#"><img src="data:images/img1.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img2.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img3.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img4.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img5.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img6.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img7.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img8.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img9.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img10.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img11.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img12.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img14.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img15.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img16.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img17.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img18.jpg" width="200" height="250"/></a><a href="#"><img src="data:images/img19.jpg" width="200" height="250"/></a></div><ul class="right"><li><a href="#">美食10</a></li><li><a href="#">美食11</a></li><li><a href="#">美食12</a></li><li><a href="#">美食13</a></li><li><a href="#">美食14</a></li><li><a href="#">美食15</a></li><li><a href="#">美食16</a></li><li><a href="#">美食17</a></li><li><a href="#">美食18</a></li></ul>
</div>
<script src="../../MyTools/MyTools.js"></script>
<script>window.addEventListener('load',function (ev) {// 1. 获取需要的标签var allLis = document.getElementsByTagName('li');var allImg = document.getElementsByTagName('img');// 2. 定义索引var loop = 0;// 3. 定时器setInterval(function () {// 3.1 索引++loop += 1;loop %= 18;// 3.2 排他for (var i = 0; i < allLis.length; i++) {allLis[i].className = '';allImg[i].style.display = 'none';}// 3.3 处理自己选中allImg[loop].style.display = 'block';allLis[loop].className = 'current';}, 1000);});
</script>
</body>
</html>

Javascript特效：轮播图相关推荐

html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图代码话不多说,先上代码,方便复制粘贴.演示轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
JavaScript模拟轮播图效果
轮播图相信小伙伴们应该不会陌生吧~ 就是网站中间的那个会定时切换的商品图今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
JavaScript图片轮播图
轮播图四张图片每隔2秒换下一张四张图片每隔2秒换下一张 <!DOCTYPE html> <html lang="en"> <head>< ...
教你用JavaScript制作轮播图
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
JavaScript之轮播图制作
目录 1.轮播布局 2.JS动态效果 (1)根据图片个数得到图片列表区域的宽度 (2)根据图片个数创建相应的圆点并为每个圆点绑定自定义属性 (3)通过事件委托给圆点切换区域绑定点击事件,根据圆点的自定 ...
纯HTML与JavaScript实现轮播图
一.效果轮播图代码实现 1.HTML部分 <div class="box" id="box"><div class="inner ...
前端：HTML+CSS+JavaScript实现轮播图
1. 最简单的轮播图效果如下: 这个实现非常简单,就是使用相对定位和绝对定位,将这三张图片压在一块.然后搞一个定时器,当到下一张图片的时候,把当前这张图片相应的标签上设置它的属性display,把它 ...

Javascript特效：轮播图

知识点

运行结果

代码

Javascript特效：轮播图相关推荐

最新文章

热门文章