纯前端实现—鼠标轮播图
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—鼠标轮播图相关的知识，希望对你有一定的参考价值。
实现效果：
前面有篇文讲解过手动轮播图——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>
以上是关于纯前端实现—鼠标轮播图的主要内容，如果未能解决你的问题，请参考以下文章