<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
ul{
list-style: none;
}
.imgs{
width: 500px;
height: 470px;
overflow: hidden;
}
.dots{
width: 164px;
position: absolute;
left: 250px;
top: 450px;
z-index: 999;
}
.dot{
width: 10px;
height: 10px;
border: 2px solid #fff;
border-radius: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="ad">
<ul id="imgs" class="imgs">
<li class="img_li"><img src="img/1.jpg" ></li>
<li class="img_li"><img src="img/2.jpg" ></li>
<li class="img_li"><img src="img/3.jpg" ></li>
<li class="img_li"><img src="img/4.jpg" ></li>
<li class="img_li"><img src="img/5.jpg" ></li>
<li class="img_li"><img src="img/6.jpg" ></li>
</ul>
<ul class="dots">
<li data="1" class="dot" style="background-color: #fff;"></li>
<li data="2" class="dot"></li>
<li data="3" class="dot"></li>
<li data="4" class="dot"></li>
<li data="5" class="dot"></li>
<li data="0" class="dot"></li>
</ul>
</div>
<script>
// 整合综合效果
//封装一个函数,根据一个数字参数,显示指定的图片
function change(n){
var img_lis = document.querySelectorAll('.img_li');
var dot_lis = document.querySelectorAll('.dot');
for(var i=0; i<img_lis.length; i++)
{
//将所有的图片都隐藏
//将所有的小白圈背景色去掉
img_lis[i].style.display = 'none';
dot_lis[i].style.background = '';
}
// 根据下表参数n 将指定的图片显示
img_lis[n].style.display = 'block';
//根据下标参数n 将指定的小白圈背景色加上
dot_lis[n].style.background = 'white';
}
//自动切换
var num = 0; //num 和timeout 一定要是全局的
var timeout;
function setTimer(){
timeout = setInterval(function(){
var img_lis = document.querySelectorAll('.img_li');
num++;
if(num==img_lis.length){
num=0;
}
// 根据num显示对应的图片;
change(num);
},1000)
}
setTimer()
//鼠标悬浮
var dot_lis = document.querySelectorAll('.dot');
for(var i=0; i<dot_lis.length; i++){
(function(i){
dot_lis[i].onmouseover = function(){
// 鼠标悬浮,停止切换的定时器
// 获取悬浮的小白圈的下表
clearInterval(timeout);
//调用change函数
change(i);
num = i;// 如果需要让自动切换的图片按照之前的顺序继续 则设置num = i;
}
dot_lis[i].onmouseout = function(){
setTimer();
}
}(i))
}
</script>
</body>
</html>
js简单轮播图
最新推荐文章于 2022-03-11 14:06:16 发布