js版图片查看器【完整版】

1. 用到的知识点：setInterval定时器+Array数组==>[通过改变下标来改变图片]
2. 难点：定时器加速问题
3. 目标效果
4. 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>

4. 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;
			}

6. 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];
		};