<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)文章

jQuery實(shí)現(xiàn)的瀑布流加載效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的瀑布流加載效果,結(jié)合實(shí)例形式分析了jQuery基于數(shù)學(xué)運(yùn)算與事件響應(yīng)實(shí)現(xiàn)頁(yè)面瀑布流加載的功能,需要的朋友可以參考下
2016-09-09
jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下
2014-03-03
jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法
使用jQuery來(lái)加載一個(gè)外部的 css 文件，首先創(chuàng)建一個(gè) link 元素，并將它添加到標(biāo)記中即可。那么基于jquery代碼如何實(shí)現(xiàn)呢？下面小編給大家介紹jQuery動(dòng)態(tài)加載css文件實(shí)現(xiàn)方法，需要的朋友參考下吧
2016-06-06
jQuery中(function($){})(jQuery)詳解
本文通過(guò)具體示例向大家詳細(xì)介紹了jQuery中的(function($){})(jQuery)的用法和意義，對(duì)此有相同困惑的小伙伴可以參考下本文。
2015-07-07
jQuery EasyUI API 中文文檔搜索框
jQuery EasyUI API 中文文檔搜索框 SearchBox 搜索框使用介紹，需要的朋友可以參考下。
2011-09-09
即將發(fā)布的jQuery 3 有哪些新特性
本文主要介紹jQuery 3中一些新增的特性和一些變更的特性，以及一些廢棄刪除的特性，另外介紹了jQuery 3.0 最大的變化就是徹底放棄對(duì) IE8 的支持，大家可以先看一下。
2016-04-04
如何使用jquery控制CSS樣式,并且取消Css樣式(如背景色,有實(shí)例)
使用jquery控制CSS樣式,并且取消Css樣式的一個(gè)簡(jiǎn)單小實(shí)例，需要的朋友可以參考下
2013-07-07
簡(jiǎn)單分析javascript面向?qū)ο笈c原型
為了說(shuō)明 JavaScript 是一門徹底的面向?qū)ο蟮恼Z(yǔ)言，首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€(gè)概念：1.一切事物皆對(duì)象，2.對(duì)象具有封裝和繼承特性，3.對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱藏
2015-05-05
jQuery實(shí)現(xiàn)base64前臺(tái)加密解密功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)base64前臺(tái)加密解密功能,結(jié)合實(shí)例形式分析了jquery.base64.js實(shí)現(xiàn)前臺(tái)base64加密與解密功能的實(shí)現(xiàn)方法,并給出了java實(shí)現(xiàn)后臺(tái)base64加密解密的操作示例對(duì)比驗(yàn)證加密效果,需要的朋友可以參考下
2017-08-08
jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)搜索頁(yè)面關(guān)鍵字的功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02