原生JS实现轮播
JS 实现 原生 轮播
2023-09-14 08:58:01 时间
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
height: 400px;
width: 500px;
margin: 60px auto;
overflow: hidden;
position: relative;
margin: 100px auto;
}
.wrap ul {
position: absolute;
}
.wrap ol {
position: absolute;
right: 5px;
bottom: 10px;
}
.wrap ol li {
height: 20px;
width: 20px;
background: #ccc;
border: solid 1px #666;
margin-left: 5px;
color: #000;
float: left;
line-height:inherit;
text-align: center;
cursor: pointer;
}
.wrap ol .on {
background: #E97305;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function () {
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic').getElementsByTagName("li"),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = this.innerText - 1;
changePic(index);
};
};
function autoPlay() {
if (++index >= pic.length) index = 0;
changePic(index);
}
// 定义图片切换函数
function changePic(curIndex) {
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}
};
</script>
</head>
<body>
<div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="Images/p1.webp" alt=""></li>
<li><img src="Images/p2.webp" alt=""></li>
<li><img src="Images/p3.webp" alt=""></li>
<li><img src="Images/p4.webp" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
相关文章
- 原生js实现架子鼓特效
- 体验js之美第八课-面向对象创建和继承终结篇
- 原生Js_实现广告弹窗
- 原生Js_实现简单选项卡功能
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(Bootstrap.js)实现简单的轮播图
- JS计算字符串所占字节数
- JS原生方法实现jQuery的ready()
- Js apply方法详解
- python的前后端分离(一):django+原生js实现get请求
- 图片滚动js代码
- 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
- webpack VS Node.js - 二者对 require 功能的实现区别
- Atitit. Toast alert loading js控件 atiToast v2新特性
- 华为OD机试 - 最短木板长度(Java & JS & Python)
- javascript实现代码高亮-wangHighLighter.js
- JS:crypto-js模块实现数据加密解密
- leetcode 101. 对称二叉树 js实现
- leetcode 1019. 链表中的下一个更大节点 js实现
- js实现搜索数组中元素插入的位置
- js 的强制 类型 转换cast, 伪对象?
- js+css3简易实现2023新年快乐全屏满天星动画特效
- 通过原生js实现一个节流函数和防抖函数?
- JS判断相等或者不等于(==、===、!=、!==)运算符