3

4 つの画像を含む div がある場合

<div id='imgs' class='sectionImage'>
    <img id='imgj1' imgn='1' class='carouselImage carouselActive' src='img/image1.jpg'/>
    <img id='imgj2' imgn='2' class='carouselImage' src='img/image2.jpg'/>
    <img id='imgj3' imgn='3' class='carouselImage' src='img/image3.jpg'/>
    <img  id='imgj4' imgn='4'class='carouselImage' src='img/image4.jpg'/>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

アクティブなクラスを次の画像に移動して循環を続けることで、配列内の 4 つの画像をスクロールするように配列と関数を設定するにはどうすればよいでしょうか? Javascriptのみをお願いします...ライブラリはありません

4

1 に答える 1

1

2 つの関数を定義します。1 つは次へ、もう 1 つは前へ移動します。

    function gotoNext() {
        var active = document.querySelector(".carouselImage.carouselActive");  //select active image
        if (active == null) { //if no active image select the first
            document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
        } else {
            active.className = "carouselImage";
            var curId = active.getAttribute("imgn"); //imgn of selected image
            var next = document.querySelector(".carouselImage[imgn='" + (++curId) + "']"); //next image. if there is no next image select the first
            if (next == null) document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
            else next.className += " carouselActive";
        }
    }

function gotoPrev() {
    var active = document.querySelector(".carouselImage.carouselActive");  //select active image
    if (active == null) { //if no active image select the first
        document.querySelector(".carouselImage[imgn='1']").className += " carouselActive";
    } else {
        active.className = "carouselImage";
        var curId = active.getAttribute("imgn"); //imgn of selected image
        var prev = document.querySelector(".carouselImage[imgn='" + (--curId) + "']"); //prev image. if there is no prev image select the last
        if (prev == null) document.querySelector(".carouselImage[imgn='4']").className += " carouselActive";
        else prev.className += " carouselActive";
    }
}

注: className = ... を、クラスを削除または追加できる関数に置き換えることをお勧めします。たとえば、jquery には removeClass("className") と addClass("className") があります。jquery を使用しない実装もあります。

于 2012-06-29T19:06:14.337 に答える