0

我只想通过 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>  

<div id="rotator">
    <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>
4

2 回答 2

0

这是因为您的代码仅在一个 div 上应用了幻灯片功能。创建另一个 id = 'rotator2' 的 div，然后下面的代码将在两者上触发滑动。

<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>
于 2012-12-18T11:16:53.580 回答
0

您必须定义两个<div>，例如 rotator1 和 rotator2，并将 JS 代码应用于 2 个块。

<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>

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

于 2012-12-18T11:17:10.583 回答