脚本宝典收集整理的这篇文章主要介绍了纯前端实现—鼠标轮播图,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前面有篇文讲解过手动轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121314887,还得鼠标点,有点麻烦,所以这篇给B格提升些!
鼠标轮播图1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 820px;
height: 380px;
margin: 30px auto;
/*border: 1px solid red;*/
overflow: hidden;
position: relative;
}
#box .image{
width: 820px;
height: 340px;
}
#box .image img{
width: 820px;
height: 340px;
}
#box .image ul{
height: 100%;
width: 500%;
margin-left: 0;
/*border: 1px solid red;*/
/*过滤,实现延时*/
transition: margin-left 0.3s;
}
#box .image ul li{
float: left;
}
#box .but{
width: 100%;
height: 40px;
font-size: 12px;
background-color: grey;
position: absolute;
bottom: 0;
}
#box .but ul{
width: 500%;
height: 100%;
}
#box .but ul li{
width: 164px;
height: 100%;
text-align: center;
line-height: 40px;
float: left;
color: white;
/*border: 1px solid red;*/
}
#box .but ul li.show,#box .but ul li:hover{
cursor: pointer;
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div class="image">
<ul>
<li><img src="轮播图的图片/2.jpg" alt=""></li>
<li><img src="轮播图的图片/1.jpg" alt=""></li>
<li><img src="轮播图的图片/3.jpg" alt=""></li>
<li><img src="轮播图的图片/4.jpg" alt=""></li>
<li><img src="轮播图的图片/5.jpg" alt=""></li>
</ul>
</div>
<div class="but">
<ul>
<li class="show">第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</div>
</div>
<script>
var oUl = document.querySelector("#box .image ul"),
aLi = document.querySelectorAll("#box .but ul li");
index = 0;
for(var i=0;i<=aLi.length-1;i++){
aLi[i].num = i;
aLi[i].onmouseover = function () {
aLi[index].classList.remove("show");
index = this.num;
this.classList.add("show");
oUl.style.marginLeft = -(index*820)+"px";
}
}
</script>
</body>
</html>
以上是脚本宝典为你收集整理的纯前端实现—鼠标轮播图全部内容,希望文章能够帮你解决纯前端实现—鼠标轮播图所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。