js 圖片輪轉

最後更新：2014-05-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：圖片輪轉 javascript 圖片自動運動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>    <title></title><style  type="text/css" >a  { text-decoration:none; color:blue;}    #div1 {  width:400px; height:298px; background-color:Blue; overflow:hidden; position:absolute; top:50px; left:40px;}    #div2 {  filter: alpha(opacity=50); width:400px; height:20px; color:Orange; background-image: url(‘img/bg.jpg‘); background-repeat:repeat-x;  position:absolute; left:40px;  top :330px; }#div3 {  width:400px; height:20px; color:Blue;   background-color:yellow; position:absolute; left:40px;  top :350px; }img   {  filter: alpha(opacity=100); width:400px; height:300px;}#div2 span{ cursor:pointer;}</style><script type="text/javascript" src="my_js.js"></script><script type="text/javascript" language="javascript">        //初始化圖片    var img_Array = new Array();    for (var i = 0; i < 4; i++) {        img_Array[i] = new Image();    }    img_Array[0].src = "img/1.jpg";    img_Array[0].text = "<a href=‘http://www.baidu.com‘>這是第1個</a>";    img_Array[0].index = 1;    img_Array[1].src = "img/2.jpg";    img_Array[1].text = "這是第2個";    img_Array[1].index = 2;    img_Array[2].src = "img/3.jpg";    img_Array[2].text = "這是第3個";    img_Array[2].index = 3;    img_Array[3].src = "img/4.jpg";    img_Array[3].text = "這是第4個";    img_Array[3].index = 4;        //初始化時賦值，添加事件    window.onload = function () {        var j = 0;        var timer = null;        var oimg = document.getElementById("img1");        var odiv_txt = document.getElementById("div3");        oimg.src = img_Array[0].src;        odiv_txt.innerHTML = img_Array[0].text;        timer = setInterval(function () {            auto(j++);            if (j >= 3) { j = -1; }        }, 3000);        var ospans = document.getElementsByTagName("span");        for (var i = 0; i < ospans.length; i++) {            ospans[i].index = i;            ospans[i].onmouseover = function () { this.style.backgroundColor = "black"; }            ospans[i].onmouseout = function () { this.style.backgroundColor = ""; }            ospans[i].onclick = function () {                oimg.src = img_Array[this.index].src;                odiv_txt.innerHTML = img_Array[this.index].text;                clearInterval(timer);                j = this.index>=3?-1:this.index;                timer = setInterval(function () {                      auto(j++);                    if (j >= 3) { j = -1; }                }, 3000);            }        }    }    function auto(index) {        var oimg = document.getElementById("img1");        var odiv_txt = document.getElementById("div3");        oimg.src = img_Array[index + 1].src;        odiv_txt.innerHTML = img_Array[index + 1].text;            }          </script></head><body ><div  id="div1">    <img id="img1" alt="" src="" />    </div>    <div id="div2" align="right">   <span>  1   </span>   <span>  2   </span>      <span>  3   </span>     <span>  4   </span> </div>   <div id="div3" align="center">       </div></body></html>

js 圖片輪轉

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More