2

私はフロントエンド開発の新しい人ですが、1つの大きな問題に直面しているのは、3つの画像を互いに配置しているのに、1つの画像を移動して、もう1つの画像が表示されてから、3番目の画像が表示されることです。時間の間隔。

私は自分のサイトの同じ位置に3つの画像が欲しいのですが、しばらくしてからこれらの3つの画像を次々と見たいだけです。私がこれを行う方法を手伝ってください??

マーキープロパティまたはjavascriptを使用できますか？

4

5 に答える 5

4

非jQueryオプション

jqueryルートをたどりたくない場合は、http：//www.menucool.com/javascript-image-sliderを試すことができます。セットアップも同様に簡単です。画像がidのdivにsliderあり、そのdivのサイズが画像の1つと同じであることを確認する必要があります。

jQueryオプション

jQueryサイクルプラグインはこれを達成するのに役立ちます。jqueryが機能する必要がありますが、単純なスリップルスライドショーを作成するために多くの設定を行う必要はありません。

「スーパーベーシック」デモをご覧ください。

$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});

少し凝ったものが必要な場合は、多くのオプションがあります。

于 2012-10-05T08:03:29.813 に答える
3

ここでは、PUREJavaScriptソリューションを紹介します。

編集私は画像の回転を追加しました...ライブの例をチェックしてください（以下のリンク）

<script>

    var current = 0;
    var rotator_obj = null;

    var images_array = new Array();
    images_array[0] = "rotator_1";
    images_array[1] = "rotator_2";
    images_array[2] = "rotator_3";

    var rotate_them = setInterval(function(){rotating()},4000);

    function rotating(){

        rotator_obj = document.getElementById(images_array[current]);

        if(current != 0) {

            var rotator_obj_pass = document.getElementById(images_array[current-1]);
            rotator_obj_pass.style.left = "-320px";

        }
        else {

            rotator_obj.style.left = "-320px";

        }

        var slideit = setInterval(function(){change_position(rotator_obj)},30);

        current++;

        if (current == images_array.length+1) {

            var rotator_obj_passed = document.getElementById(images_array[current-2]);
            rotator_obj_passed.style.left = "-320px";
            current = 0;
            rotating();

        }

    }

    function change_position(rotator_obj, type) {

        var intleft = parseInt(rotator_obj.style.left);

        if (intleft != 0) {

            rotator_obj.style.left = intleft + 32 + "px";

        }
        else if (intleft == 0) {

            clearInterval(slideit);

        }

    }


</script>

<style>

    #rotate_outer {

        position: absolute;
        top: 50%;
        left: 50%;
        width: 320px;
        height: 240px;
        margin-top: -120px;
        margin-left: -160px;
        overflow: hidden;

    }

    #rotate_outer img {

        position: absolute;
        top: 0px;
        left: 0px;

    }

</style>

<html>
<head>
</head>
<body onload="rotating();">

    <div id="rotate_outer">
        <img src="0.jpg" id="rotator_1"  style="left: -320px;" />
        <img src="1.jpg" id="rotator_2"  style="left: -320px;" />
        <img src="2.jpg" id="rotator_3"  style="left: -320px;" />
    </div>

</body>
</html>

そして実際の例：
http ：//simplestudio.rs/yard/rotate/rotate.html

于 2012-10-05T08:24:31.700 に答える
1 
arrayImageSource= ["Image1","Image2","Image3"];

setInterval(cycle, 2000);
var count = 0;

function cycle()
{
  image.src = arrayImageSource[count]
  count = (count === 2) ? 0 : count + 1;
}​

多分このようなもの？

于 2012-10-05T08:13:04.297 に答える
1

良いトランジションと効果を目指すなら、「jqFancyTransitions」と呼ばれる画像スライダーをお勧めします

于 2012-10-05T08:13:55.817 に答える
1 
<html>
<head>
<script type="text/javascript">
    window.onload = function(){
        window.displayImgCount = 0;
        function cycleImage(){
            if (displayImgCount !== 0) {
                document.getElementById("img" + displayImgCount).style.display = "none";
            }
            displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
            document.getElementById("img" + displayImgCount).style.display = "block";
            setTimeout(cycleImage, 1000);
        }
        cycleImage();
    }
</script>
</head>
<body>
    <img id="img1" src="./img1.png" style="display: none">
    <img id="img2" src="./img2.png" style="display: none">
    <img id="img3" src="./img3.png" style="display: none">
</body>
</html>​

フィドル： http： //jsfiddle.net/SReject/F7haV/

于 2012-10-05T08:25:10.547 に答える