![](/img/trans.png)
[英]JavaScript: How to add multiple image slider on one page with same script?
[英]How does one add a slide effect to a javascript image slider
我是JavaScript新手,想从头开始学习。 我最近设法创建了图像幻灯片,但是到目前为止,它还没有幻灯片/淡入淡出效果。 如果有人可以帮助我,我将不胜感激,因为没有其他教程/答案对您有帮助。
这是我的JavaScript代码:
<script>
var images = new Array;
images[1] = "_images/_slideshow/slideImg01.png";
images[2] = "_images/_slideshow/slideImg02.png";
images[3] = "_images/_slideshow/slideImg03.png";
images[4] = "_images/_slideshow/slideImg04.png";
images[5] = "_images/_slideshow/slideImg05.png";
var currentImage = 1;
function changeimage(change){
currentImage += change;
if(currentImage > images.length -1){
currentImage = 1;
}
else if(currentImage < 1){
currentImage = images.length -1;
}
document.getElementById('slideshowIMG').innerHTML = '<img src="' +
images[currentImage] + '"/>';
}
changeimage(0);
</script>
这是我的HTML代码:
<div id="slideshow">
<div id="slideshowIMG"></div>
<div id="slideshowcontrols">
<a onclick="changeimage(-1);">next</a>
<a onclick="changeimage(1);">prev</a>
</div>
</div>
现在,在哪里可以编辑代码以添加幻灯片/淡入淡出效果? 代码可能是什么?
一个简单的从左到右-反之亦然-滑动效果就足够了:)
提前致谢
我的建议是检查一下JQuery,它具有丰富的滑动和淡入淡出效果,并且使用简单。 您提到您是javascript的新手-Codecademy的JQuery轨道可以教您如何添加滑动和淡入淡出效果。
不幸的是,这将意味着您不能使用已经编写的javascript代码,因为图像必须以html而不是javascript进行添加,因此您可以使用jQuery来操作它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.