輪播圖效果

時間 2019-11-09

標籤效果简体版

原文原文鏈接

1.輪播圖效果
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>輪播圖效果</title>

<script type="text/javascript">

    var arr=null;

    var tp = null;

    var index = 0;

    //當頁面加載完成之後執行

    window.onload=function(){

        //定義一個一維數組用來存儲圖片

         arr = ["images/d.jpg","images/q.jpg","images/c.jpg","images/b.jpg"];

        //獲取img元素

         tp = document.getElementById("tp");

         start();

         

    }

    function change(obj){

        //獲取用戶點擊的是哪一個按鈕

        index = obj.value;

        tp.src=arr[index];

    }

    //下一頁

    function next(){

        //若是當前圖片是最後一張

        if(index==arr.length-1){

            index=0;

        }else{

            index=index+1;

        }

        tp.src=arr[index];

    }

        //上一頁

    function up(){

        //若是當前圖片是最後一張

        if(index==0){

            index=arr.length-1;

        }else{

            index=index-1;

        }

        tp.src=arr[index];

    }

    //自動開始輪播

    function start(){

        var timer = setInterval("next()",3000);

    }

     

     

</script>

</head>

<body>    

    <img src="images/d.jpg" alt="" id="tp">

    <input type="button" value="上一頁" onClick="up()">

    <input type="button" value="0" onClick="change(this)">

    <input type="button" value="1" onClick="change(this)">

    <input type="button" value="2" onClick="change(this)">

    <input type="button" value="3" onClick="change(this)">

    <input type="button" value="下一頁" onClick="next()">

</body>

</html>
2.cursor：pointer（鼠標移動上去變小手）

 
   <!doctype html> 
  
   <html> 
  
   <head> 
  
   <meta charset= 
   "utf-8" 
   > 
  
   <title>無標題文檔</title> 
  
   <style> 
  
   #d1{ 
  
   height: 200px; 
  
   width: 200px; 
  
   background-color: red; 
  
   } 
  
   #d1:hover{ 
  
   /*鼠標變小手*/ 
  
   cursor:pointer; 
  
   } 
  
   </style> 
  
   </head> 
  
   <body> 
  
   <div id= 
   "d1" 
   ></div> 
  
   </body> 
  
   </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。