第二张图片滑动不适用于javascript

我想添加两个图片滑块在同一页的JavaScript只。但只有一个滑块工作，另一个是静态的

这是我从一个网站上得到的代码

<script type="text/javascript">    
    window.onload = function() {
        var rotator = document.getElementById("rotator");
        var images = rotator.getElementsByTagName("img");
        for (var i = 1; i < images.length; i++) {
            images[i].style.display = "none";
        }
        var counter = 1;
        setInterval(function() {
            for (var i = 0; i < images.length; i++) {
                images[i].style.display = "none";
            }
            images[counter].style.display = "block";
            counter++;
            if (counter == images.length) {
                counter = 0;
            }
        }, 3000);
    };​
</script>  

window.onload=函数（）{
var rotator=document.getElementById（“rotator”）；
var images=rotator.getElementsByTagName（“img”）；
对于（变量i=1；i

---

这是因为您的代码只在一个div上应用了slide函数。 创建另一个id为'rotator2'的div，然后下面的代码将在这两个div上触发slide

<script type="text/javascript">
        window.onload = function() {  slideIt("rotator");slideIt("rotator2") ; } ;  
        function slideIt(contId) {
            var rotator = document.getElementById(contId);
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script> 

window.onload=function（）{slideIt（“rotator”）；slideIt（“rotator2”）；}；
函数slideIt（contId）{
var rotator=document.getElementById（contId）；
var images=rotator.getElementsByTagName（“img”）；
对于（变量i=1；i

您必须定义两个

示例rotator1和rotator2，并将JS代码应用于这两个块

<script type="text/javascript">
        window.onload = function () {
            var rotator = document.getElementById("rotator1");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script>  


    <div id="rotator1">
    <img height="250px" width="200px" src="images/claim/1.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/2.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" />
    </div>

<script type="text/javascript">
        window.onload = function () {
            var rotator = document.getElementById("rotator2");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script>  


    <div id="rotator2">
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/4.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/5.jpg" alt="" />
    </div>

window.onload=函数（）{
var rotator=document.getElementById（“rotator1”）；
var images=rotator.getElementsByTagName（“img”）；
对于（变量i=1；i

---

注意您最好在一个单独的文件中定义一个JS函数，并调用它两次

我用第二个div尝试过，但结果是一样的。第二张幻灯片是静态的。我想我必须使用一个函数，但由于我不擅长javascript，这就是为什么不能使它成为可能。正如回答中提到的，你也需要更改javascript。如果我使用这个，那么我必须编写更多的代码，是否有其他方法可以最小化，例如使用函数。

<script type="text/javascript">
        window.onload = function () {
            var rotator = document.getElementById("rotator1");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script>  


    <div id="rotator1">
    <img height="250px" width="200px" src="images/claim/1.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/2.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" />
    </div>

<script type="text/javascript">
        window.onload = function () {
            var rotator = document.getElementById("rotator2");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script>  


    <div id="rotator2">
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/4.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/5.jpg" alt="" />
    </div>