jquery实现简单的自动播放幻灯片效果
更新时间：2015年06月13日 13:41:57 作者：不吃皮蛋
这篇文章主要介绍了jquery实现简单的自动播放幻灯片效果,较为详细的介绍了html页面布局、css样式设置及jQuery控制自动播放幻灯的相关技巧,需要的朋友可以参考下
本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下：
html部分：
<div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jpg"> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div> </div>
CSS部分：
/* Slides need to be absolutely positioned within the wrapper.
This has a tiny bit of extra pizazz: */
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
jQuery部分：
//Run after DOM is ready.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
本篇文章主要介绍了DropDownList实现可输入可选择的具体实现代码，并附上两种版本（js版本和jquery版本），可供大家选择。有需要的朋友可以参考下2016-12-12
网络上已有此功能的函数，是以纯JS实现，本文为大家介绍的使用jquery实现,需要的朋友可以参考下2014-03-03
下面介绍30个最好的jQuery Lightbox 插件，别忘了收藏它，以防未来的设计中错过它们中的一个。2011-04-04
考虑将需要动态刷新的内容自动拼接到前一个下拉框之后等等，用JQuery实现比较容易，代码以省市联动效果为例实现2014-05-05
如何使用jquery修改css中带有!important的样式属性
如何使用jquery修改css中带有!important的样式属性？下面小编就为大家带来一篇使用jquery修改css中带有!important的样式属性方法。希望对大家有所帮助。一起跟随小编过来看看吧2016-04-04
这篇文章主要介绍了jQuery中的编程范式,以实例形式详解分析了jQuery中的编程范式,并对比分析了与Prototype的异同及对应用法,非常具有实用价值,需要的朋友可以参考下2014-12-12
jquery UI Datepicker时间控件冲突问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件冲突问题的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery.mobile 共同布局遇到的问题小结,需要的朋友可以参考下2015-02-02
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
这篇文章主要介绍了jQuery中的$.ajax()方法的应用，需要的朋友可以参考下2014-05-05
最新评论