纯前端实现—鼠标轮播图
实现效果：
前面有篇文讲解过手动轮播图——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>
??可通过点击下面——>关注本人运营
公众号??
公众号后台回复【鼠标轮播图】，可得本小创作源码&&所有图片~
【可以公众号里私聊并标明来自CSDN，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】