非常简短的jQuery图像幻灯片
我正在寻找使用jQuery创建淡入淡出图像幻灯片的最短路径。 我在谷歌上发现的例子总是有很多不必要的特殊内容，我很难理解它们。 ：/
幻灯片需要输入现有图像：
使用follogin图像：
imgArray = ["img1.jpg","img2.jpg","img3.jpg"]
最简单/最简单的方法是什么？
在这里，你把它放在一起15分钟……
FIDDLE： http ： //jsfiddle.net/eEg3R/4/
HTML：
![]()
码：
var images = ['http://placehold.it/300x300/000','http://placehold.it/300x300/ddd','http://placehold.it/300x300/123456']; function slideshow(options) { var defaults ={ fadeInSpeed:1000, fadeOutSpeed:1000, slideLength:4000 } //merge options with defaults var settings= $.extend({},defaults,options); //get a reference to our image holder var $slide = $('#slide'); //initialize the slide index var slideIndex=0; //begin the slideshow nextSlide(); function nextSlide(){ //load the new image... $slide[0].src = images[slideIndex]; //show it $slide.fadeIn(settings.fadeInSpeed,function(){ setTimeout(function(){ $slide.fadeOut(settings.fadeOutSpeed,nextSlide); //increment index and reset to 0 when we have reached the end slideIndex = ++slideIndex % images.length; },settings.slideLength); }); } } $(function(){ //optionally pass in custom settings, or just run normal to use defaults... slideshow(); });
希望下面的代码可以帮助你，
var imgArray = ["img1.jpg","img2.jpg","img3.jpg"]; var i=0; setInterval(function(){ $('div').fadeToggle(2000,function(){ $(this).text(imgArray[i]); }); i++; if(imgArray.length==i-1){ i=0; } },2000);
演示
您可以遍历数组并使用Jquery的fadeIn与fadeOut一起使用指定的持续时间。 这将以指定的间隔淡入和淡出您的图像。
你可以按照这个链接用很少的代码创建你的图像幻灯片背后的整个想法是滑动图像位置并在改变图像位置时使用转换效果。
http://jforjs.com/creating-image-slider-html-css-without-plugin/
好的是你可以创建一个面向对象的代码（jquery pluing）以及用几行代码创建多个图像幻灯片。