版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82387346
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js简单轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 创建相框，宽度与图片的大小一致。padding有5px的空隙 */
#mainBox{
width: 730px;
height: 454px;
padding: 5px;
border: 1px solid #333;
margin: 100px auto;
}
/*设置显示内容的宽高与图片的一致。子元素超出部分使用 overflow：hidden 属性进行隐藏*/
#innerBox{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
ul{
width: 1000%; /* 设置为1000%使得所有li图片可以在同一排上 */
list-style: none;
position: absolute;
}
li{
float: left;
}
#index{
bottom: 0;
right: 0;
position:absolute;
margin-bottom: 15px;
margin-right: 10px;
}
span{
background-color:#fff;
padding: 0 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="mainBox">
<div id="innerBox">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<div id="index">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script type="text/javascript">
function spanOver(){
this.style.backgroundColor = "green";
// var moveImg = this.inNum; //自定inNum属性，不可以直接通过this.inNum的方式获取属性
var moveImg = this.getAttribute("inNum"); //使用setAttribute设置自定义属性，必须使用getAttribute获取属性
var imgObj = document.getElementById("innerBox").firstElementChild;
imgObj.style.left = moveImg*(-730)+"px";
}
function spanOut(){
this.style.backgroundColor = "";
}
function Imgmove(){
var spanObj = document.getElementById("index").children;
for (var i = 0; i < spanObj.length; i++) {
spanObj[i].setAttribute("inNum",i); //给每个属性添加标签
spanObj[i].onmouseover =spanOver; //为每个span添加鼠标进入函数
spanObj[i].onmouseout = spanOut; //为每个span添加鼠标离开事件
}
}
Imgmove();
</script>
</body>
</html>