jQuery jquery简单图片幻灯片教程
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12068734/
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
jquery simple image slideshow tutorial
提问by vaanipala
Where can I find a simple jquery image slideshow tutorial for beginners from scratch (without plugins) without left and right navigation button?
我在哪里可以找到没有左右导航按钮的初学者从头开始（没有插件）的简单 jquery 图像幻灯片教程？
thank you.
谢谢你。
回答by zurfyx
This is by far the easiest example I have found on the net. http://jonraasch.com/blog/a-simple-jquery-slideshow
这是迄今为止我在网上找到的最简单的例子。 http://jonraasch.com/blog/a-simple-jquery-slideshow
Summaring the example, this is what you need to do a slideshow:
总结这个例子，这就是你需要做的幻灯片：
HTML:
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>
Position absolute is used to put an each image over the other.
绝对位置用于将每个图像放在另一个图像上。
CSS
CSS
<style type="text/css">
.active{
z-index:99;
}
</style>
The image that has the class="active" will appear over the others, the class=active property will change with the following Jquerycode.
具有 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>
If you want to go further with slideshows I suggest you to have a look at the link above (to see animated oppacity changes - 2n example) or at other more complex slideshows tutorials.
如果您想进一步了解幻灯片，我建议您查看上面的链接（查看动画不透明度变化 - 2n 示例）或其他更复杂的幻灯片教程。
回答by Sagive SEO
I dont know why you havent marked on of these gr8 answers... here is another option which would enable you and anyone else visiting to control transition speed and pause time
我不知道你为什么没有在这些 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
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>
.
If your keeping this simple its easy to keep it resposive
best to visit the: DEMO
.
如果你保持这个简单很容易让它保持反应
最好访问：DEMO
.
If you want something with special transition FX (Still responsive) - check this out
DEMO WITH SPECIAL FX
.
如果你想要一些带有特殊过渡效果的东西（仍然响应） - 看看这个
带有特殊效果的演示
回答by Justin
Here is my adaptation of Michael Soriano's tutorial. See below or in JSBin.
这是我对 Michael Soriano 教程的改编。请参阅下文或在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>回答by Schokea
This lookslike something you would be interested in
这看起来像你会感兴趣的东西
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/
