<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
div{
margin-top: 30px;
width: 730px;
height: 454px;
border: 1px solid black;
position: relative;
}
#nums{
position: absolute;
bottom: 10px;
right: 20px;
list-style: none;
}
#nums>li{
float: left;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
background-color: pink;
margin: 0 10px;
color: white;
}
</style>
</head>
<body>
<div>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<ul id="nums">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
//1.首先先放图片
//2.设置div样式 超出部分隐藏
//3 先找到4张图片
var img_ = document.getElementsByTagName('img');
//查找到所有的li
var li_ = document.getElementsByTagName('li');
//4.让全部都隐藏
//5.初始化一个值
var index = 0;
//定义定时器
timer = setInterval(run,1000);
function run(){
for(var i=0;i<img_.length;i++){
img_[i].style.display = 'none';
li_[i].style.backgroundColor = 'pink';
}
index++;
if(index==img_.length){
index=0;
}
img_[index].style.display = 'block';
li_[index].style.backgroundColor = 'black';
}
//6.通过循环得到图片的下标
for(var j=0;j<img_.length;j++){
//调用本身的函数 j的值传入v
(function(v){
li_[v].onmouseenter = function(){
//其他的所有display变为none
//让自己变为block
for(var i=0;i<img_.length;i++){
img_[i].style.display = 'none';
li_[i].style.backgroundColor = 'pink';
}
img_[v].style.display = 'block';
li_[v].style.backgroundColor = 'black';
//点击清除定时器
clearInterval(time);
}
li_[v].onmouseleave = function(){
timer = setInterval(time,1000);
}
})(j)
}
</script>
</body>
</html>
js轮播图
最新推荐文章于 2022-08-29 17:10:39 发布