新手关于无缝滚动onmouseover问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无缝滚动3</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #div1{
            width: 800px;
            height: 107px;
            background-color:red;
            position: relative;
            margin: 100px auto;
            overflow:hidden;
        }
        #div1 ul{
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        #div1 ul li{
            float: left;
            position: relative;
            top: 0;
            left: 0;
        }
        #div1 ul li img{
            width: 200px;
        }

    </style>
    <script>
        window.onload=function() {
            var oDiv = document.getElementById("div1");
            var aUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oDiv.getElementsByTagName("Li");
            var aImg = oDiv.getElementsByTagName("img");
            aUl.innerHTML += aUl.innerHTML;
            aUl.style.width = aLi[1].offsetWidth * aLi.length + "px";
            var speed = 2;
            function move() {
                if (aUl.offsetLeft < -aUl.offsetWidth / 2) {
                    aUl.style.left = 0
                } else if (aUl.offsetLeft > 0) {
                    aUl.style.left = -aUl.offsetWidth / 2 + "px";
                }
                aUl.style.left = aUl.offsetLeft + speed + "px";
            }

            var timer = setInterval(move, 30);
            for (var n=0;n<aLi.length;n++) {
                aLi[n].onmouseover = function () {
                    clearInterval(timer);
                    aLi[n].top=-10+"px";
                };
                aLi[n].onmouseout = function () {
                    timer = setInterval(move, 30);
                    aLi[n].top=0;
                };
            }

        }
    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="dog1.jpg"></li>
        <li><img src="dog2.jpg"></li>
        <li><img src="dog5.jpg"></li>
        <li><img src="dog4.jpg"></li>
    </ul>
</div>
</body>
</html>

我想实现鼠标停在哪个图片上后停止滚动然后对应指住的那张图片向上稍微偏移一下以达到和其他图片区别的效果

但只能做到让整个滚动停止不知道怎么做让单独指住的那张图片做出区别于其他的效果。。

Ni14

浏览 1240回答 1

1回答

随时随地看视频慕课网APP