一. 图片切换
实现功能：
当点击“下一页”时，跳转到下一张图片；当点击“上一页”时，跳转到上一张照片；显示当前页数/总页数，如：2/6。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片切换</title><style type="text/css">*{margin: 0;padding:0;}#outer{width: 500px;margin: 50px auto;padding: 10px;text-align: center;}</style><script type="text/javascript">window.onload = function(){var prev = document.getElementById('prev');var next = document.getElementById('next');var img = document.getElementsByTagName("img")[0];var imgArr = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg","img/06.jpg"]//创建一个变量，来保存当前正在显示的图片的索引var index = 0;var info = document.getElementById("info");info.innerHTML = (index+1)+'/' + imgArr.length;prev.onclick = function(){index--;if(index < 0){index = imgArr.length-1;}img.src = imgArr[index];info.innerHTML = (index+1)+'/' + imgArr.length;}next.onclick = function(){index++;if(index > imgArr.length-1){index = 0;}img.src = imgArr[index];info.innerHTML = (index+1)+'/' + imgArr.length;}}</script></head><body><div id="outer"><img src="img/01.jpg" width="500px" alt="太子悦神"/><p id="info"></p><button id="prev">上一张</button><button id="next">下一张</button></div></body></html>
效果图：
二. 定时器
实现功能：
按下“开始”键后，图片自动进行切换；按下“停止”键后，图片停止切换，并停留在当前页面。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>定时器</title><script type="text/javascript">window.onload = function(){var img = document.getElementById("img");var imgArr = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg", "img/06.jpg"];var index = 0;var timer; var btn1 = document.getElementById("btn1");btn1.onclick = function(){clearInterval(timer);timer = setInterval(function(){index ++;index = index % imgArr.length;img.src = imgArr[index];},1000);}var btn2 = document.getElementById("btn2");btn2.onclick = function(){clearInterval(timer);}}</script></head><body><img src="img/01.jpg" id="img" style="width: 300px;"/><br /><button id="btn1">开始</button><button id="btn2">停止</button></body></html>
效果图：
三. 轮播图
实现功能：
自动切换图片；点击某一张图片时，可跳转到该图片。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">*{margin: 0px;padding: 0px;}#outer{width: 520px;height: 350px;margin: 0 auto;/*background-color: #bfa;*/padding: 10px 0;position: relative;overflow: hidden;}#imgList{list-style: none;position: absolute; }#imgList li{float: left;margin: 0 10px;}#navDiv{position: absolute;bottom: 15px;}#navDiv a{float: left;width: 15px;height: 15px;background-color: red;margin: 0 5px;opacity: 0.5;filter: alpha(opacity=50); }#navDiv a:hover{background-color: black;}</style><script type="text/javascript">window.onload = function(){var imgList = document.getElementById("imgList");var imgArr = document.getElementsByTagName("img");imgList.style.width = 520*imgArr.length + "px";var navDiv = document.getElementById("navDiv");var outer =document.getElementById("outer");navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";var index = 0;var allA = document.getElementsByTagName("a");allA[index].style.backgroundColor = "black";/* 功能：点击超链接，切换到指定的图片*/function move(divobj, attr, target, speed, callback){var current = parseInt(getStyle(divobj,attr));if(current > target){speed = -speed;}clearInterval(divobj.timer);divobj.timer = setInterval(function(){var oldValue = parseInt(getStyle(divobj,attr)) ;var newValue = oldValue + speed;if(speed<0 && newValue < target || speed>0 && newValue >target){newValue = target;}divobj.style[attr] = newValue +"px";if(newValue == target){clearInterval(divobj.timer);callback && callback();}},30);};function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else{return obj.currentStyle[name];}}for(var i=0; i<allA.length; i++){allA[i].num = i;allA[i].onclick = function(){clearInterval(timer);index = this.num;setA();move(imgList, "left", -520*index , 20 , function(){autoChange();});}}autoChange();function setA(){if(index >= imgArr.length - 1){index = 0; //则将index设置为0imgList.style.left = 0;}for(var i=0; i<allA.length; i++){allA[i].style.backgroundColor = "";}allA[index].style.backgroundColor = "black";}var timer;//创建一个函数，用来定时去切换图片function autoChange(){timer = setInterval(function(){index++;index %= imgArr.length;move(imgList, "left", -520*index , 20 , function(){setA();})},2000);}}</script></head><body><div id="outer"><ul id="imgList"><li><img src="img/01.jpg"/></li><li><img src="img/02.jpg"/></li><li><img src="img/03.jpg"/></li><li><img src="img/04.jpg"/></li><li><img src="img/05.jpg"/></li><li><img src="img/06.jpg"/></li><li><img src="img/01.jpg"/></li></ul><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body></html>
效果图：
