js 图片轮转

最新推荐文章于 2022-10-27 13:50:43 发布

fighting-ff

最新推荐文章于 2022-10-27 13:50:43 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签：图片轮转 javascript 图片自动运动

本文链接：https://blog.csdn.net/i99121570/article/details/24839793

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>