html onmouseover如何对多个div层中的图片自动播放

问题是这样的：我有多个div层，每个div层有若干张图片，我想实现图片自动播放，但是用了setInterval()和onmouseover(),onmouseout()等函数，却发现：
1每次鼠标要先移动到图片上，再离开图片，图片才会自动播放，而不是我一进入网页就自动播放每个div层的图片
2每次最多有一个div层中的图片会自动播放图片，其余的不会自动播放图片。
下面是我的代码

var picTimer; function play_pic(object) { var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.jpg"; arr[1] = "2.jpg"; arr[2] = "3.jpg"; arr[3] = "4.jpg"; arr[4] = "5.jpg"; picTimer = setInterval(function() { var obj = object; if(curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.src = arr[curIndex]; } , timeInterval); } function stop_pic(object) { clearInterval(picTimer); }

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

Go 旅城通票 2015-04-16 01:21

关注

你进页面的时候又没有执行播放，只有触发时间了才播放。你的计时器是公用的，改为私有的

 <script type="text/javascript">
    function play_pic(object) {
        var curIndex = 0;
        var timeInterval = 1000;
        var arr = new Array();
        arr[0] = "1.jpg";
        arr[1] = "2.jpg";
        arr[2] = "3.jpg";
        arr[3] = "4.jpg";
        arr[4] = "5.jpg";
        object.picTimer = setInterval(function () {
            var obj = object;
            if (curIndex == arr.length - 1) {
                curIndex = 0;
            }
            else {
                curIndex += 1;
            }
            obj.src = arr[curIndex];
        }, timeInterval);
    }

    function stop_pic(object) {
        clearInterval(object.picTimer);
    }
    window.onload = function () {
        for (var i = 1; i < 4; i++) play_pic(document.getElementById('obj' + i));
    }
</script>

</head>

<body>
<div id="div_1">
        <img id="obj1" src="1.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" />
</div>
<div id="div_2">
    <img id="obj2" src="2.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" />
</div>
<div id="div_3">
    <img id="obj3" src="3.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" />
</div>

本回答被题主选为最佳回答 , 对您是否有帮助呢?