我在哪里可以找到一个简单的 jquery 图像幻灯片教程,适合初学者从头开始(没有插件),没有左右导航按钮?
谢谢你。
这是迄今为止我在网上找到的最简单的例子。 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>
如果您想进一步了解幻灯片,我建议您查看上面的链接(查看动画不透明度更改 - 2n 示例)或其他更复杂的幻灯片教程。
我不知道您为什么没有标记这些 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
.
如果你想要一些带有特殊过渡效果的东西(仍然响应) - 看看这个
DEMO WITH SPECIAL FX
这是我对 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>