使用 JavaScript 滑动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10460523/
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
Sliding image using JavaScript
提问by Diwash Regmi
I am trying to create a image slider, using JavaScript.
我正在尝试使用 JavaScript 创建一个图像滑块。
HTML
HTML
<img src="firstcar.gif" name="slide" width="100" height="56" />
<img src="secondcar.gif" name="slide1" width="100" height="56" />
Script
脚本
var image1 = new Image()
image1.src = "firstcar.gif"
var image2 = new Image()
image2.src = "secondcar.gif"
var image3 = new Image()
image3.src = "thirdcar.gif"
//variable that will increment through the images
var step = 1
function slideit() {
//if browser does not support the image object, exit.
if (!document.images) return
document.images.slide.src = eval("image" + step + ".src")
if (step < 3) step++
else step = 1
//call function "slideit()" every 1.5 seconds
setTimeout("slideit()", 1500)
}
slideit()
I wanted to slide two image in such a way that the upcoming image displays in the second place and slides to the first place and both the image must be inline.
我想以这样一种方式滑动两个图像，即将到来的图像显示在第二位并滑动到第一位，并且两个图像都必须是内联的。
I can't find the error. Can someone help me fix it?
我找不到错误。有人可以帮我解决吗？
采纳答案by Starx
There are lots of image sliders available on the internet. You can googlethem.
互联网上有很多可用的图像滑块。你可以谷歌他们。
However, the script you are building above does not create sliding effect in any way. It just switches the image and fakes the effect to looks like as if it was sliding.
但是，您在上面构建的脚本不会以任何方式创建滑动效果。它只是切换图像并将效果伪装成看起来好像在滑动。
The working version of the script will look something like this.
脚本的工作版本看起来像这样。
var step = 1;
function slideit() {
//if browser does not support the image object, exit.
var img = document.getElementById('slide');
img.src = "image" + step + ".src";
console.log(img.src);
if (step < 3) step++;
else step = 1;
//call function "slideit()" every 1.5 seconds
setTimeout(slideit, 1500);
}
window.onload = slideit();
回答by Encode Dna
Image slider are pretty easy to design in java-script. All you need is a container on which the images will be shown or slides and a script which will rotate or slide the images. The sliding can be random or in a sequence. Check the below link which displays a manual slider with the script.
图像滑块在 java 脚本中很容易设计。您所需要的只是一个用于显示或滑动图像的容器以及一个用于旋转或滑动图像的脚本。滑动可以是随机的，也可以是顺序的。检查以下链接，该链接显示带有脚本的手动滑块。
http://www.encodedna.com/2012/11/javascript-thumbnail-slider.htm
http://www.encodedna.com/2012/11/javascript-thumbnail-slider.htm
