标签：
DEMO1：两张图片来回切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS点击两张图片来回切换</title> <script> window.onload = function(){ // 获取元素 var oImg = document.getElementById(‘img1‘); // 定义一个自定义开关 默认为true var onOff = true; oImg.onclick = function(){ if(onOff){ oImg.src = ‘img/2.jpg‘; }else{ oImg.src = ‘img/1.jpg‘; } // 取反 onOff = !onOff; }; }; </script> </head> <body> <img id="img1" src="img/1.jpg" /> </body> </html>
DEMO2：点击图片，循环切换（多张）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击图片循环切换——多张</title> <script> window.onload = function(){ // 获取相关元素 var oImg = document.getElementById(‘img1‘); var arr = [‘img/1.jpg‘,‘img/2.jpg‘,‘img/3.jpg‘,‘img/4.jpg‘]; var num = 0; oImg.onclick = function(){ num ++; if(num == arr.length){ num = 0; } oImg.src = arr[num]; }; }; </script> </head> <body> <img id="img1" src = ‘img/1.jpg‘ /> </body> </html>
DEMO3：点击按钮图片切换综合实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { text-align:center; } p { margin:0; } #box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; background: url(img/loading.gif) center center no-repeat; } a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; } a:hover { filter:alpha(opacity:30); opacity:0.3; } #prev { left:10px; } #next { right:10px; } #p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; } strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; } #img1 { width:400px; height:400px; } span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:‘微软雅黑‘; } </style> <script> window.onload = function(){ // 获取相关元素 var oPrev = document.getElementById(‘prev‘); var oNext = document.getElementById(‘next‘); var oStrong = document.getElementById(‘strong1‘); var oP = document.getElementById(‘p1‘); var oImg = document.getElementById(‘img1‘); var aBtn = document.getElementsByTagName(‘input‘); var oSpan = document.getElementById(‘span1‘); var arrUrl = [‘img/1.jpg‘ ,‘img/2.jpg‘ ,‘img/3.jpg‘ ,‘img/4.jpg‘ ,‘img/5.jpg‘]; var arrText = [‘图片一‘,‘图片二‘,‘图片三‘,‘图片四‘,‘图片五‘]; var num = 0; var onOff = true; // 初始化 function init(){ oStrong.innerHTML = num+1 +‘/‘+ arrText.length; oImg.src = arrUrl[num]; oP.innerHTML = arrText[num]; }; init(); // 向左切换 oPrev.onclick = function(){ num--; if(num == -1){ if(onOff){ num = arrUrl.length-1; }else{ alert(‘已经到第一张了！‘); num = 0; } } init(); }; // 向右切换 oNext.onclick = function(){ num++; if(num == arrUrl.length){ if(onOff){ num = 0; }else{ alert(‘已经到最后一张了！‘); num = arrUrl.length-1; } } init(); }; // 循环切换 aBtn[0].onclick = function(){ onOff = true; oSpan.innerHTML = ‘图片可以从最后一张跳转到第一张循环切换‘; }; // 顺序切换 aBtn[1].onclick = function(){ onOff = false; oSpan.innerHTML = ‘图片只能到最后一张或只能到第一张‘; }; }; </script> </head> <body> <input type="button" value="循环切换" /> <input type="button" value="顺序切换" /> <div id="box"> <span id="span1">图片可以从最后一张跳转到第一张循环切换</span> <a href="javascript:;" id="prev"><</a> <a href="javascript:;" id="next">></a> <strong id="strong1">图片数量计算中...</strong> <p id="p1">图片文字加载中...</p> <img id="img1" /> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/bokebi520/p/4417710.html
