- 用到的知识点:setInterval定时器+Array数组==>[通过改变下标来改变图片]
- 难点:定时器加速问题
- 目标效果
- HTML代码
<table class="table" >
<tr>
<th colspan="6">
<h1>JS版图片浏览器</h1>
</th>
</tr>
<tr>
<td colspan="6">
<img src="../../img/image1.jpg" id="in_img" width="712px" height="400px"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="自动播放" id="btn_start"/>
</td>
<td>
<input type="button" value="停止播放" id="btn_stop"/>
</td>
<td>
<input type="button" value="下一张" id="btn_next"/>
</td>
<td>
<input type="button" value="上一张" id="btn_last"/>
</td>
<td>
<input type="button" value="第一张" id="btn_first"/>
</td>
<td>
<input type="button" value="最后一张" id="btn_end"/>
</td>
</tr>
</table>
- CSS代码
.table{
margin: 20px auto;
border: 1px solid orange;
width: 600px;
height: 600px;
}
tr{
border: 1px solid orange;
}
th{
border: 1px solid orange;
}
td{
border: 1px solid orange;
}
- JS代码
var arr3 = ["../../img/image1.jpg",
"../../img/image2.jpg",
"../../img/image3.jpg",
"../../img/image4.jpg",
"../../img/image5.jpg",
"../../img/image6.jpg",
"../../img/image7.jpg",
"../../img/image8.jpg",
"../../img/image9.jpg",
"../../img/image10.jpg",
"../../img/image11.jpg",
"../../img/image12.jpg"];
var btn_start = document.getElementById("btn_start");
var btn_stop = document.getElementById("btn_stop");
var btn_next = document.getElementById("btn_next");
var btn_last = document.getElementById("btn_last");
var btn_first = document.getElementById("btn_first");
var btn_end = document.getElementById("btn_end");
var in_img = document.getElementById("in_img");
var index=0;
var timer = null;
btn_start.onclick = function () {
if (timer==null) {
timer = setInterval(start1,234);
}
};
function start1() {
index++;
if(index>=arr3.length){
index=0;
}
in_img.src=arr3[index];
}
btn_stop.onclick = function () {
clearInterval(timer);
};
btn_next.onclick = function () {
start1();
};
btn_last.onclick = function () {
index--;
if(index<0){
index=arr3.length-1;
}
in_img.src=arr3[index];
};
btn_first.onclick = function () {
index=0;
in_img.src=arr3[index];
};
btn_end.onclick = function () {
index=arr3.length-1;
in_img.src=arr3[index];
};