2

Nivo スライダーに似た画像スライダーをコーディングするにはどうすればよいですか? Javascript/Jquery である必要があります。

私は独自のソリューションを学び、作成したいので、この理由でプラグインを提案したくありません.

誰かが私に与えることができるアドバイスはありますか?つまり、何をすべきでないか? スタート地点など? 誰かが良いチュートリアルを知っていれば、それは良いでしょう。ただし、役立つチュートリアルのみであり、ごちゃまぜの負荷の最後にソースコードをダウンロードするように指示するものではありません。

私が考えた方法の 1 つは、すべての画像を div に挿入し、それらすべての div を非表示にし、それらの div を 1 つずつ非表示にしてからスライドさせることでした。

4

2 に答える 2

3

次のようなことができます：

// create an array of images (borrowed from Nivo Slider site)
var images = ["http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png", "http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png", "http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png"];

// some variables
var imgNum = 0;
var imgLength = images.length - 1;

// function to change images
function changeImage(direction) {
    // get next image number
    imgNum = imgNum + direction;
    // make sure we loop
    if (imgNum > imgLength) {
        imgNum = 0;
    }
    if (imgNum < 0) {
        imgNum = imgLength;
    }
    // change the src attribute of the image
    document.getElementById('slideshow').src = images[imgNum];
    return false; // prevent default link
}

// call changeImage function on interval (3 seconds here)
window.setInterval(function() {
    changeImage(1);
}, 3000);​

簡単な作業例はこちら

このコードを改善および拡張する方法があると確信しています。これは、次/前のボタンとタイマーを備えた画像スライダーの簡単な例です。そして、エフェクトはまったく別の球技です - Nivo Slider のソースを見ることをお勧めします

更新 - プリロード中 ....

div画像がプリロードされた状態で画像の下部にを追加し、display:nonecss 属性の例を使用して非表示にしました。

divJavaScript を使用して非常に簡単にこれを非表示にすることができます。

window.onload = function() {
    for (var i = 0; i <= imgLength; i++) {
        var img = document.createElement('img');
        img.src = images[i];
        document.getElementById('preload').appendChild(img);
    }
}​

例はこちら

于 2012-06-29T13:16:53.027 に答える