<!--图片轮播 Start-->
<div class="pics-ul">
<div class="pics-ulleft">
<ul id="allImg">
<li><img src="img/img01.png"/></li>
<li><img src="img/img2.jpg"/></li>
<li><img src="img/img1.jpg"/></li>
<li><img src="img/img3.jpg"/></li>
<li><img src="img/img4.jpg"/></li>
</ul>
<a name="btn" id="prev" class="prev" style="display: block;"></a>
<a name="btn" id="next" class="next" style="display: block;"></a>
<ul id="btn" class="pagination">
<li class="hover"><a href="#0">1</a></li>
<li><a href="#1">2</a></li>
<li><a href="#2">3</a></li>
<li><a href="#3">4</a></li>
<li><a href="#4">5</a></li>
</ul>
</div>
<div class="pics-ulright"><img src="img/imgright.png"/></div>
</div>
<!--图片轮播 End-->
/*图片轮播*/
var but1 = document.getElementById("prev");
var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮
var lis = document.getElementById('allImg').getElementsByTagName('li');
var but2 = document.getElementById("next");
var index = 0;
var timer = null;
but2.onclick = function() {
index++;
if (index > lis.length - 1) {
index = 0;
}
setImg(index);
}
but1.onclick = function() {
index--;
if (index < 0) {
index = lis.length - 1;
}
setImg(index);
}
function changeImg() {
if (index == lis.length - 1) { //当到最后一张图片时
index = 0
} else {
index++; //图片索引发生改变
}
setImg(index);
}
function setImg(index) {
for (j = 0; j < lis.length; j++) {
lis[j].style.display = "none";
}
lis[index].style.display = "block";
//按钮的样式要与图片对应
for (var i = 0; i < abtn.length; i++) {
abtn[i].className = ""
}
abtn[index].className = "hover";
}
//自动切换
timer = setInterval(changeImg, 3000);
//按钮
for (var i = 0; i < abtn.length; i++) {
(function() {
var p = i
abtn[p].onclick = function() {
index = p;
setImg(index);
}
})();
}
