本文實例為大家介紹了javascript圖片切換的兩種方式，循環切換以及順序切換的實例代碼，分享給大家供大家參考，具體內容如下
<html> <head> <meta charset="utf-8"> <style> p{margin:0;} input{border:none;outline: none;margin:0;padding:0;} img{width:300px;height:300px;} #loop{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align: center;} #order{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align:center;} div{width:300px;height:300px;position:relative;} span{position:absolute;left:0;top:0;width:300px;height:20px;font-size:14px;line-height:20px;background:#000;opacity:0.5;color:#fff;text-align: center;} div p{position:absolute;left:0;bottom:0;width:300px;height:20px;font-size:14px;line-height:20px;text-align: center;color:#fff;background:#000;opacity:0.5;} div input{position:absolute;width:60px;height:60px;top:100px;background:pink;} #back{left:0;} #next{right:0;} </style> <script type="text/javascript"> window.onload=function(){ //循環切換 var oNext=document.getElementById("next"); var oBack=document.getElementById("back"); var oImg=document.getElementById("img"); var oText=document.getElementById("text"); var oSpan=document.getElementById("span"); var oLoop=document.getElementById("loop"); var Oorder=document.getElementById('order'); var oText1=document.getElementById("text1"); var aImg=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; var aText=["圖片1","圖片2","圖片3","圖片4"]; var num=0; //點擊下一張事件 function next(){ num=num+1; //每次加一 //進行判斷，如果num大于最后一張時,圖片返回第一張 //// 1 2 3 4 if(num>aImg.length-1){ num=0; } oImg.src=aImg[num]; oText.innerHTML=aText[num];//圖片信息變化，與數組關聯 oSpan.innerHTML=(num+1)+"/"+aImg.length;//數量變化，與數組關聯 //alert(num); } function back(){ num=num-1; //進行判斷，如果圖片小于第一張時,圖片返回最后一張 if(num<0){ num=aImg.length-1; } oImg.src=aImg[num]; oText.innerHTML=aText[num];//圖片信息變化，與數組關聯 oSpan.innerHTML=(num+1)+"/"+aImg.length;//數量變化，與數組關聯 } function next1(){ num=num+1; //每次加一 //進行判斷，如果num大于最后一張時,彈出警告并把圖片定在最后一張 //// 1 2 3 4 if(num>aImg.length-1){ num=aImg.length-1; alert("最后一張了"); } oImg.src=aImg[num]; oText.innerHTML=aText[num]; oSpan.innerHTML=num+1+"/"+aImg.length; //alert(num); } function back1(){ num=num-1; //進行判斷，如果圖片小于第一張時，彈出警告并把圖片定在第一張 if(num<0){ num=0; alert("已經是第一張了"); } oImg.src=aImg[num]; oText.innerHTML=aText[num]; oSpan.innerHTML=num+1+"/"+aImg.length; } oNext.onclick=next; oBack.onclick=back; oLoop.onclick=function(){ oText1.innerHTML="圖片可以從第一張到最后一張循環切換"; oNext.onclick=next; oBack.onclick=back; } Oorder.onclick=function(){ oText1.innerHTML="圖片只能從第一張到最后一張順序切換"; oNext.onclick=next1; oBack.onclick=back1; } } </script> </head> <body> <input id="loop" type="button" name="" value="循環切換"/> <input id="order"type="button" name="" value="順序切換"/> <p id="text1">圖片可以從第一張到最后一張循環切換</p> <div> <input id="back" type="button" name="" value="上一張"/> <input id="next" type="button" name="" value="下一張"/> <img id="img" src="img/1.jpg"/> <span id="span">1/4</span> <p id="text">圖片1</p> </div> </body></html>圖片切換即兩張圖片輪流切換代碼：
<html lang="en"> <head> <meta charset="utf-8"> <style> #text{width:200px;height:200px;font-size:40px;line-height:40px;text-align: center;} img{width:200px;height:200px;} </style> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById("btn"); var oImg=document.getElementById("img"); var oText=document.getElementById("text"); var onOff=true; oBtn.onclick=function(){ if(onOff){ oImg.src="img/7.jpg"; oText.innerHTML="圖片2"; onOff=false; } else{ oImg.src="img/5.jpg"; oText.innerHTML="圖片1"; onOff=true; } } } </script> </head> <body> <input id="btn" type="button" name="" value="切換圖片"/> <img id="img" src="img/5.jpg"/> <p id="text">圖片1</p> </body></html>以上就是本文的全部內容，希望對大家的學習javascript程序設計有所幫助。
新聞熱點
疑難解答
