快捷導(dǎo)航

javascript圖片切換綜合實例（循環(huán)切換、順序切換）

更新時間：2016年01月13日 17:11:37 投稿：lijiao

這篇文章主要介紹了javascript圖片切換綜合實例，包括javascript圖片循環(huán)切換、javascript圖片順序切換，兩張圖片的切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家介紹了javascript圖片切換的兩種方式，循環(huán)切換以及順序切換的實例代碼，分享給大家供大家參考，具體內(nèi)容如下

<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(){
   //循環(huán)切換
   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];//圖片信息變化，與數(shù)組關(guān)聯(lián)
    oSpan.innerHTML=(num+1)+"/"+aImg.length;//數(shù)量變化，與數(shù)組關(guān)聯(lián)
    //alert(num);
    
   }
    function back(){
    num=num-1;
    //進行判斷，如果圖片小于第一張時,圖片返回最后一張
    if(num<0){
     num=aImg.length-1;
    }
    oImg.src=aImg[num];
    oText.innerHTML=aText[num];//圖片信息變化，與數(shù)組關(guān)聯(lián)
    oSpan.innerHTML=(num+1)+"/"+aImg.length;//數(shù)量變化，與數(shù)組關(guān)聯(lián)
   }
   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("已經(jīng)是第一張了");
    }
    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="圖片可以從第一張到最后一張循環(huán)切換";
     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="循環(huán)切換"/>
  <input id="order"type="button" name="" value="順序切換"/>
  <p id="text1">圖片可以從第一張到最后一張循環(huán)切換</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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: