0

マウスホイールで画像を垂直にスクロールさせようとしています。最初から最後の画像まで、始点にあるときはスクロールバックせず、最後の画像にあるときはそれ以上スクロールしないようにするにはどうすればよいですか?

var myimages=[
            "https://d248fncte96e1e.cloudfront.net/xs/0137.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0138.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0139.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0140.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0141.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0142.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0143.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0144.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0145.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0146.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0147.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0148.jpg",
            "https://d248fncte96e1e.cloudfront.net/xs/0149.jpg"                
        ]

        var slideshow=document.getElementById("slideshow")
        var nextslideindex=0

        function rotateimage(e){
            var evt=window.event || e //equalize event object
            var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
            nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
            nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
            slideshow.src=myimages[nextslideindex]
            if (evt.preventDefault) //disable default wheel action of scrolling page
                evt.preventDefault()
            else
                return false

        }

        var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

        if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
            slideshow.attachEvent("on"+mousewheelevt, rotateimage)
        else if (slideshow.addEventListener) //WC3 browsers
            slideshow.addEventListener(mousewheelevt, rotateimage, false)
});
4

1 に答える 1

0

配列に次の画像があるかどうかを確認する必要があります。つまり、画像を設定する前に if ステートメントを追加し、未定義の場合は最初の画像に戻ってカウンターをリセットすることを意味します。 

var slideshow=document.getElementById("slideshow")
var nextslideindex=0

function rotateimage(e){
        var evt=window.event || e //equalize event object
        var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
        nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
        if(myimages[nextslideindex] != undefined) {
            slideshow.src=myimages[nextslideindex]
        }
        else {
            slideshow.src=myimages[0]
            nextslideindex = 0;
        }
        if (evt.preventDefault) //disable default wheel action of scrolling page
            evt.preventDefault()
        else
            return false

}

編集

これで、jsFiddle とコメントに基づいて、あなたが何をしようとしているのか理解できました。あなたはそれが終わりを過ぎないようにしたいだけです。if ステートメントを追加して行を削除するだけで、このように非常に簡単に実行できます。

nextslideindex=(nextslideindex<0)?...

アップデートされた機能

var slideshow = document.getElementById("slideshow");
var nextslideindex = 0;

function rotateimage(e){
    var evt = window.event || e; //equalize event object
    var delta = evt.detail? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextslideindex = (delta <= -120)? nextslideindex + 1 : nextslideindex - 1 //move image index forward or back, depending on whether wheel is scrolled down or up

    if(myimages[nextslideindex] != undefined) {
        slideshow.src = myimages[nextslideindex];
    }
    else {
        // You can put an alert or something here if you'd like
    }

    if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault();
    else
        return false;

}
于 2013-08-08T16:33:50.013 に答える