快捷導(dǎo)航

jquery實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)播放幻燈片效果

更新時(shí)間：2015年06月13日 13:41:57 作者：不吃皮蛋

這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)播放幻燈片效果,較為詳細(xì)的介紹了html頁(yè)面布局、css樣式設(shè)置及jQuery控制自動(dòng)播放幻燈的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)播放幻燈片效果。分享給大家供大家參考。具體實(shí)現(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);

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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