简短的HTML+JS图片播放？

我写了个html代码如下：<!DOCTYPEhtml><html><head></head><body><divid="aa"><imgid="taa"src="t/1.... 我写了个html代码如下：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="aa">
<img id="taa" src="t/1.jpg" width="400" height="250" style="display: none;">
<img id="taa" src="t/2.jpg" width="400" height="250" style="display: none;">
<img id="taa" src="t/3.jpg" width="400" height="250" style="display: none;">
</div>
<div id="bb">
<img id="tbb" src="t/1.jpg" width="400" height="250" style="display: none;">
<img id="tbb" src="t/2.jpg" width="400" height="250" style="display: inline;">
<img id="tbb" src="t/3.jpg" width="400" height="250" style="display: none;">
</div>
<div id="cc">
<img id="tcc" src="t/1.jpg" width="400" height="250" style="display: none;">
<img id="tcc" src="t/2.jpg" width="400" height="250" style="display: none;">
<img id="tcc" src="t/3.jpg" width="400" height="250" style="display: none;">
</div>
</body>
</html>
需要怎么做才能实现鼠标移动(onmouseover)到AA/BB/CC里面时自动【轮播】显示DIV下的IMG图片
当鼠标移出(onmouseout)DIV层时停止继续播放IMG图片,具体怎么写...谢谢展开

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

yugi111
2015-12-05 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>test</title>
    <style>
        div {
    border: 1px solid black;
    width: 400px;
    height: 250px;
    margin: 10px;
}

div>img {
    width: 400px;
    height: 250px;
}

div>img:not(:first-child) {
    display: none;
}
    </style>
    <script>
        onload = function() {
            var divs = document.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                var div = divs[i];
                div.last = 0;
                div.curr = 0;
                div.imgs = div.getElementsByTagName("img");
                div.onmouseover = function() {
                    var me = this;
                    me.interval = setInterval(function() {
                        me.imgs[me.curr].style.display = "none";
                        me.last++;
                        me.last = me.last > me.imgs.length - 1 ? 0 : me.last;
                        me.imgs[me.last].style.display = "inline";
                        me.curr = me.last;
                    }, 1000);
                }
                div.onmouseout = function() {
                    clearInterval(this.interval);
                }
            }
        }
    </script>
</head>

<body>
    <div id="aa">
        <img src="t/1.jpg" />
        <img src="t/2.jpg" />
        <img src="t/3.jpg" />
    </div>
    <div id="bb">
        <img src="t/1.jpg" />
        <img src="t/2.jpg" />
        <img src="t/3.jpg" />
    </div>
    <div id="cc">
        <img src="t/1.jpg" />
        <img src="t/2.jpg" />
        <img src="t/3.jpg" />
    </div>
</body>

</html>