jquery實現(xiàn)簡單的自動播放幻燈片效果
更新時間：2015年06月13日 13:41:57 作者：不吃皮蛋
這篇文章主要介紹了jquery實現(xiàn)簡單的自動播放幻燈片效果,較為詳細(xì)的介紹了html頁面布局、css樣式設(shè)置及jQuery控制自動播放幻燈的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)簡單的自動播放幻燈片效果。分享給大家供大家參考。具體實現(xiàn)方法如下：
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程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
DropDownList實現(xiàn)可輸入可選擇（兩種版本可選）
本篇文章主要介紹了DropDownList實現(xiàn)可輸入可選擇的具體實現(xiàn)代碼，并附上兩種版本（js版本和jquery版本），可供大家選擇。有需要的朋友可以參考下2016-12-12
網(wǎng)絡(luò)上已有此功能的函數(shù)，是以純JS實現(xiàn)，本文為大家介紹的使用jquery實現(xiàn),需要的朋友可以參考下2014-03-03
下面介紹30個最好的jQuery Lightbox 插件，別忘了收藏它，以防未來的設(shè)計中錯過它們中的一個。2011-04-04
考慮將需要動態(tài)刷新的內(nèi)容自動拼接到前一個下拉框之后等等，用JQuery實現(xiàn)比較容易，代碼以省市聯(lián)動效果為例實現(xiàn)2014-05-05
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性？下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了jQuery中的編程范式,以實例形式詳解分析了jQuery中的編程范式,并對比分析了與Prototype的異同及對應(yīng)用法,非常具有實用價值,需要的朋友可以參考下2014-12-12
jquery UI Datepicker時間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件沖突問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jquery.mobile 共同布局遇到的問題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下2015-02-02
jQuery插件bgStretcher.js實現(xiàn)全屏背景特效
可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調(diào)用代碼也非常簡單。2015-06-06
這篇文章主要介紹了jQuery中的$.ajax()方法的應(yīng)用，需要的朋友可以參考下2014-05-05