2

如何编写类似于Nivo 滑块的图像滑块？必须使用 Javascript/Jquery。

我想学习并创建自己的解决方案，因此我不希望为此建议任何插件。

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

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

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 属性示例隐藏它们。

div你可以很容易地使用 JavaScript创建这个隐藏：

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 回答