DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript圖片切換綜合實例(循環切換、順序切換)
javascript圖片切換綜合實例(循環切換、順序切換)
編輯:關於JavaScript     

本文實例為大家介紹了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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved