Question

我正在尝试使用纯javascript创建幻灯片。我可以使用javascript移动第一个图像。但是当我尝试移动第二个图像并将左侧应用于第二个图像时，左侧未应用于该图像第二张图片。这是我的代码。有人可以帮我吗？

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        #slideshow
        {
            width: 600px;
            height: 200px;
            position: absolute;
            left: 100px;
            background-color: green;
            overflow: hidden;
        }
        #slideshow img
        {
            visibility: hidden;
            position: relative;
        }
        </style>
        <script type="text/javascript">
        var images = ["first","second","third"];
        var i = 0;
        window.addEventListener("load",slideshow,true);
        function slideshow()
        {
            var currentImage = images[i];
            var nextImage = images[i+1];
            var parentLeft = document.getElementById("slideshow").offsetLeft;
            var imgWidth = document.getElementById("second").width;
            document.getElementById(currentImage).style.visibility = "visible";
            document.getElementById(nextImage).style.visibility = "visible"; 
            document.getElementById(nextImage).style.left = (parentLeft - imgWidth)+"px";
            document.getElementById(nextImage).style.left = "50px";
            move(currentImage,nextImage);
        }
        function move(currentImage,nextImage)
        {
            var currentImageLeft = document.getElementById(currentImage).offsetLeft;
            var nextImageLeft = document.getElementById(nextImage).offsetLeft;          
            document.getElementById(currentImage).style.left = (currentImageLeft + 5)+"px";
            document.getElementById(nextImage).style.left = (nextImageLeft + 5)+"px";
            setTimeout(function(){move(currentImage,nextImage)},4);
        }
        </script>
    </head>
    <body>
        <div id="slideshow">
            <img src="1.jpg" id="first" width="600px" height="200px" />
            <img src="2.jpg" id="second" width="600px" height="200px" />
            <img src="3.jpg" id="third" width="600px" height="200px" />
        </div>
    </body>
</html>

无法将style.left应用于imges

0 个答案: