永远对生活充满希望，对于困境与磨难，微笑面对。多看书，看好书，少吃点，吃好的。要有梦想，即使遥远。开朗的心情，这很重要。
html
<!--图片轮播 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 rel="nofollow noopener noreferrer" href="#0">1</a></li>
<li><a rel="nofollow noopener noreferrer" href="#1">2</a></li>
<li><a rel="nofollow noopener noreferrer" href="#2">3</a></li>
<li><a rel="nofollow noopener noreferrer" href="#3">4</a></li>
<li><a rel="nofollow noopener noreferrer" href="#4">5</a></li>
</ul>
</div>
<div class="pics-ulright"><img src="img/imgright.png"/></div>
</div>
<!--图片轮播 End-->
js
/*图片轮播*/
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);
}
})();
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
