<div class="pic_tab">
<p class="info"></p>
<div class="pic">
<img src="images/service_pic1.jpg"/>
</div>
<div class="btn">
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
</div>
<style>
.pic_tab{
width: 550px;
overflow: hidden;
padding: 10px;
background-color: blueviolet;
margin: 50px auto;
text-align: center;
}
p{
font-size: 18px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];
var img = document.getElementsByTagName("img")[0];
var imgArr = ["images/service_pic1.jpg","images/service_pic2.jpg","images/service_pic3.jpg","images/service_pic4.jpg"]
var index = 0;
var info = document.getElementsByClassName("info")[0];
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
prev.onclick = function(){
index --;
if(index < 0){
index = imgArr.length - 1;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
};
next.onclick = function(){
index ++;
if(index > imgArr.length - 1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
}
}
</script>