知识点:
1、index属性
2、className的用法
3、for循环的多次应用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大图滚动</title>
<style type="text/css">
#wrap {
position: relative;
width:510px;
margin:0 auto;
height: 286px;
overflow: hidden;
}
#wrap:hover .left-arrow,#wrap:hover .right-arrow{
/*display: block;*/
opacity: 1;
}
#inner {
position: relative;
left:0;
top:0;
width: 9999px;
}
#inner a{
float: left;
width:510px;
height: 286px;
-webkit-user-select:none;
}
.paganation {
position: absolute;
bottom:10px;
left:0;
width:100%;
text-align: center;
-webkit-user-select:none;
}
.paganation span {
display: inline-block;
width:30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.paganation span.active {
background-color: red;
color:#fff;
}
a {
text-decoration: none;
}
.left-arrow {
/*display: none;*/
opacity: 0;
transition:all 1s;
position: absolute;
font-family: "宋体";
left:0;
top:0;
width:40px;
height: 100%;
color:#fff;
text-align: center;
font-size: 40px;
line-height: 286px;
background-color: rgba(0,0,0,.5);
-webkit-user-select:none;
}
.right-arrow {
/*display: none;*/
opacity: 0;
transition:all 1s;
position: absolute;
font-family: "宋体";
right:0;
top:0;
width:40px;
height: 100%;
color:#fff;
text-align: center;
font-size: 40px;
line-height: 286px;
background-color: rgba(0,0,0,.5);
-webkit-user-select:none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<a href="###"><img src="img/1.jpg" alt=""></a>
<a href="###"><img src="img/2.jpg" alt=""></a>
<a href="###"><img src="img/3.jpg" alt=""></a>
<a href="###"><img src="img/4.jpg" alt=""></a>
<a href="###"><img src="img/5.jpg" alt=""></a>
<a href="###"><img src="img/6.jpg" alt=""></a>
<a href="###"><img src="img/7.jpg" alt=""></a>
<a href="###"><img src="img/8.jpg" alt=""></a>
</div>
<div class="paganation" id="paganation">
<span class ="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
<a class="left-arrow" href="javascript:void(0);"><</a>
<a class="right-arrow" href="javascript:void(0);">></a>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//1、自动平移
var wrap = document.getElementById("wrap");
var inner = document.getElementById("inner");
var spanList = document.querySelectorAll("span");
var imgList = document.getElementsByTagName("img");
var perWidth = 510;//每章图片的宽度。这里注意不要加"px"否则会与后面造成重复。
var index = 0;
var timer = setInterval(function(){
var t = 0;
var maxT = 30;
index++;
if (index >= 8) {
index = 0;
}
//求出在一个周期类inner的left变化量。当index再次为0时，下一周期inner的left变化量为7章图片的长度总和。
var begin = inner.offsetLeft;
var end = -perWidth*index;
var change = end - begin;
var timer1 = setInterval(function() {
t++;
inner.style.left = change/maxT*t + begin + "px";
if (t >= maxT) {
clearInterval(timer1);//结束平移，在wrap窗口悬停。
};
},17);
//spanList.removeAttribute("class","active");
//spanList1.removeAttribute("class","active");
for (var i = 0; i < spanList.length; i++) {
spanList[i].className = "";
}
spanList[index].setAttribute("class","active");
//spanList[index].previousSibling.removeAttribute("class","active");
},2000);
//点击按钮
//没有点击按钮，for循环完成后，j只有一个值即8
for (var j = 0; j < spanList.length; j++) {
spanList[j].index = j;//将j值保存到spanList[j]的属性index上。
spanList[j].onclick = function() {//给每一个按钮绑定一个click点击事件。
//clearInterval(timer)
inner.style.left = -perWidth*this.index + "px";//this.index可以获取当前按钮的index属性。
for (var k = 0; k < spanList.length; k++) {
spanList[k].className= "";
}
spanList[this.index].className = "active";
index = this.index;
}
};
</script>
</body>
</html>“`