jquery 做幻灯片是不错的,有很多轻量级的,下面介绍几款轻量的jquery 幻灯片框架。
1 responsive-slides
地址:http://responsive-slides.viljamis.com/
特点:支持各浏览器
?Internet Explorer 6,7,8,9
?Firefox 3,6,8
?Safari 5
?Chrome 15
?Opera 11.5
?iOS Safari
?Opera Mobile 10.1
?Opera Mini for iOS
?IE7 Mobile
?Firefox Mobile
?Android browser
?Kindle browser
使用简单,支持jquery 1.4以上就可以了,而且体积很小,压缩后不超过1KB,
使用如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
把图片放到ul中去
<ul id="slides">
</ul>
再搞个CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
马上就可以用了
<script>
$(function () {
$("#slides").responsiveSlides();
});
</script>
2 还有一些其他的jquery slides的教程和插件,如下
http://www.zurb.com/playground/jquery_image_slider_plugin
http://tympanus.net/Development/AutomaticImageMontage/
http://buildinternet.com/live/supersized/