jQuery的简单图像幻灯片教程

我从哪里可以find一个简单的jQuery图像幻灯片教程初学者从零开始（无插件）没有左，右导航button？

谢谢。

Answer 1

这是迄今为止我在网上find的最简单的例子。 http://jonraasch.com/blog/a-simple-jquery-slideshow

总结这个例子，这是你需要做一个幻灯片显示：

HTML：

<div id="slideshow"> <img src="img1.jpg" style="position:absolute;" class="active" /> <img src="img2.jpg" style="position:absolute;" /> <img src="img3.jpg" style="position:absolute;" /> </div> 

绝对位置用于将每个图像放在另一个上面。

CSS

 <style type="text/css"> .active{ z-index:99; } </style> 

class =“active”的图片会出现在其他图片上，class = active属性会随着下面的jquery代码而改变。

 <script> function slideSwitch() { var $active = $('div#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> 

如果你想进一步幻灯片，我build议你看看上面的链接（看animationoppacity更改 – 2n例）或在其他更复杂的幻灯片教程。

Answer 2

我不知道为什么你没有注意到这些gr8的答案…这是另一个选项，这将使你和任何人访问控制转换速度和暂停时间

JAVASCRIPT

 $(function () { /* SET PARAMETERS */ var change_img_time = 5000; var transition_speed = 100; var simple_slideshow = $("#exampleSlider"), listItems = simple_slideshow.children('li'), listLen = listItems.length, i = 0, changeList = function () { listItems.eq(i).fadeOut(transition_speed, function () { i += 1; if (i === listLen) { i = 0; } listItems.eq(i).fadeIn(transition_speed); }); }; listItems.not(':first').hide(); setInterval(changeList, change_img_time); }); 

。

HTML

 <ul id="exampleSlider"> <li><img src="http://placehold.it/500x250" alt="" /></li> <li><img src="http://placehold.it/500x250" alt="" /></li> <li><img src="http://placehold.it/500x250" alt="" /></li> <li><img src="http://placehold.it/500x250" alt="" /></li> </ul> 

。
如果你保持这个简单的容易保持最好访问： DEMO

。
如果你想要一些有特殊转换效果的FX（静态响应） – 请查看DEMO WITH SPECIAL FX

Answer 3

这看起来像你会感兴趣的东西

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

Answer 4

这是我改编的迈克尔·索里亚诺的教程。 见下面或JSBin 。

 $(function() { var theImage = $('ul#ss li img'); var theWidth = theImage.width(); //wrap into mother div $('ul#ss').wrap('<div id="mother" />'); //assign height width and overflow hidden to mother $('#mother').css({ width: function() { return theWidth; }, height: function() { return theImage.height(); }, position: 'relative', overflow: 'hidden' }); //get total of image sizes and set as width for ul var totalWidth = theImage.length * theWidth; $('ul').css({ width: function() { return totalWidth; } }); var ss_timer = setInterval(function() { ss_next(); }, 3000); function ss_next() { var a = $(".active"); a.removeClass('active'); if (a.hasClass('last')) { //last element -- loop a.parent('ul').animate({ "margin-left": (0) }, 1000); a.siblings(":first").addClass('active'); } else { a.parent('ul').animate({ "margin-left": (-(a.index() + 1) * theWidth) }, 1000); a.next().addClass('active'); } } // Cancel slideshow and move next manually on click $('ul#ss li img').on('click', function() { clearInterval(ss_timer); ss_next(); }); }); 

 * { margin: 0; padding: 0; } #ss { list-style: none; } #ss li { float: left; } #ss img { width: 200px; height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul id="ss"> <li class="active"> <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg"> </li> <li> <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"> </li> <li class="last"> <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg"> </li> </ul>