0

JavaScriptのみで同じページに2つの画像スライダーを追加したい。ただし、1つのスライダーのみが機能し、別のスライダーは静的です。

これが私がウェブサイトから得たこれまでの私のコードです。

<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

これは、コードが1つの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の2つを定義し、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関数を定義し、それを2回呼び出す方がよいことに注意してください。

于 2012-12-18T11:17:10.583 に答える