Question

如何编码类似于Nivo slider的图像滑块？必须在Javascript / Jquery。

我想学习并创建自己的解决方案，所以我不希望出于这个原因建议使用任何插件。

是否有任何人可以给我的建议，即我应该做什么？起点等？如果有人知道任何好的教程会很好。虽然只是有用的教程，而不是那些只是告诉你在混乱的负载结束时下载源代码的教程。

我想到的一种方法是将所有图像插入到div中，然后隐藏所有这些div，并逐个取消隐藏这些div并将它们滑入。

Answer 1

http://naldzgraphics.net/tutorials/25-must-learn-slider-tutorials-with-jquery/

http://designmodo.com/image-slider-jquery-css3/

和

http://www.google.com/search?q=jquery+create+slider

祝你好运

Answer 2

你可以这样做：

// 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);

<强> Simple working example here

我确信有一些方法可以改进和扩展此代码 - 这是一个带有下一个/上一个按钮和一个计时器的图像滑块的简单示例。效果是一个完全不同的球类游戏 - 我建议你看看Nivo Slider的来源

更新 - 预加载....

我在图片底部添加了div并预先加载了图片，然后使用display:none css属性example here隐藏了它们。

您可以非常轻松地使用JavaScript创建隐藏的div：

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

Example here

如何编码图像滑块？

2 个答案:

更新 - 预加载....