JS轮播图的梳理
- 拿Dom元素中的oLis和oImg和父元素oNav，可以用documemt.querySelectorAll
- 用for循环可以拿出oLis的index值，
- 写一个显示函数 activeOne()，
functiom activeOne(index){
documemt.querySelector(“li.active”).classList.remove(“active”)
document.querySelector(“img .active”).classList.remove(“active”)
oLis[index].classList.add(“active”)
oImg[index].classList.add('active")
} - 写一个计时器函数 start(){
计时器先清再用clearInterval(timer)
timer=setInterval(function(){
index++
if(index>=oLis.length){
index=0}
调用显示函数active(index)
},100 )
以上基本可以实现轮播图的动态效果
接下来实现鼠标停留时图片不动和鼠标移开时继续动态 - 写一个鼠标移入的事件绑定 oNav.onmouseover
oNav.οnmοuseοver=function(e){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标停留在此位置if(target.tagName===“LI”){
清除计时器停止动态clearInterval(timer)
index= target.index
activeOne(target.index)显示效果给到这个停留的位置图
}} - 写一个鼠标移出的事件绑定oNav.onmouseout
oNav.οnmοuseοut=function(){
var ev=e||event ;
var target=ev.target||ev.srcElement;
如果鼠标离开此位置if(target.tagName===“LI”){
开始继续计时器start()
}
html代码如下
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> * { padding: 0; margin: 0; } li { list-style: none } .wrapBox { width: 400px; margin: 50px auto; position: relative; } .swiperBox img { width: 100%; display: none; } .swiperBox .active { display: block; } .nav { position: absolute; right: 20px; bottom: 25px; } .nav li { width: 20px; height: 20px; border-radius: 50%; background-color: #000; float: left; margin: 0 10px; display: flex; align-items: center; justify-content: center; } .nav .active { background-color: red; color: #ffffff; } </style>
</head>
<body>
<div class="wrapBox">
<div class="swiperBox">
<img class="active" src="./source/girlbig1.jpg" alt="">
<img src="./source/girlbig2.jpg" alt="">
<img src="./source/girlbig3.jpg" alt="">
<img src="./source/girlbig4.jpg" alt="">
</div>
<ul class="nav">
<li class="active" data-index="0"></li>
<li data-index="1"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
js详细代码如下
<script>
//拿元素
var oLis = document.querySelectorAll(".nav li")
var oImg = document.querySelectorAll(".swiperBox img")
var oNav = document.querySelector(".nav")
var index = 0;
var timer
//页面加载动态开始调用计时器
start()
for (var i = 0; i < oLis.length; i++) {
oLis[i].index = i
}
//页面显示函数
function activeOne(index) {
document.querySelector(" img.active").classList.remove("active")
document.querySelector("li.active").classList.remove("active")
oLis[index].classList.add("active")
oImg[index].classList.add("active")
}
//计时器开始函数
function start() {
clearInterval(timer)
timer = setInterval(function () {
index++
if (index >= oLis.length) {
index = 0
}
activeOne(index)
}, 1000)
}
//鼠标停留动态停止
oNav.onmouseover = function (e) {
var ev = e || event;
var target = ev.target || ev.srcElement;
if (target.tagName === "LI") {
clearInterval(timer)
index = target.index
activeOne(target.index)
}
}
//鼠标移开动态继续
oNav.onmouseout = function (e) {
var ev = e || event;
var target = ev.target || ev.srcElement;
if (target.tagName === "LI") start()
}
</script>
