Javascript 如何编码图像滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11262253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to code an image slider?
提问by RSM
How can I code an image slider similar to the Nivo slider? Must be in Javascript/Jquery.
如何编写类似于Nivo 滑块的图像滑块？必须在 Javascript/Jquery 中。
I want to learn and create my own solution, so I dont want any plugins suggested for this reason.
我想学习和创建我自己的解决方案，所以我不希望因为这个原因建议任何插件。
Is there any advice any one can give me, i.e. what should I do not do? starting points etc? If anyone knows of any good tutorials that would be good. Helpful tutorials though only, not the ones that just tell you to download the source code at the end of a load of jumble.
有没有人可以给我任何建议，即我不应该做什么？起点等？如果有人知道任何好的教程会很好。虽然只是有用的教程，而不是那些只是告诉您在一堆混乱的末尾下载源代码的教程。
One way I thought of doing it was to insert all the images into divs, and hiding all those divs, and one by one unhiding those divs and sliding them in.
我想到的一种方法是将所有图像插入到 div 中，然后隐藏所有这些 div，然后一个一个地取消隐藏这些 div 并将它们滑入。
回答by see613
http://naldzgraphics.net/tutorials/25-must-learn-slider-tutorials-with-jquery/
http://naldzgraphics.net/tutorials/25-must-learn-slider-tutorials-with-jquery/
http://designmodo.com/image-slider-jquery-css3/
http://designmodo.com/image-slider-jquery-css3/
and
和
http://www.google.com/search?q=jquery+create+slider
http://www.google.com/search?q=jquery+create+slider
good luck
祝你好运
回答by Manse
You could do something like this :
你可以这样做：
// 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);?
Im sure there are ways to improve and extend this code - this is a simple example of an image slider with next / previous buttons and a timer. And effects are a whole different ball game - I suggest you look at the source for Nivo Slider
我确信有一些方法可以改进和扩展此代码 - 这是带有下一个/上一个按钮和计时器的图像滑块的简单示例。效果是完全不同的球类游戏 - 我建议您查看 Nivo Slider 的来源
Update - preloading ....
更新 - 预加载 ....
I have added a divat the bottom of the image with the images preloaded, then hidden them using display:nonecss attribute example here.
我div在图像底部添加了一个预加载的图像，然后使用display:nonecss 属性示例将它们隐藏在这里。
You could create this hidden divusing JavaScript quite easily :
你可以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);
}
}?
