快捷導(dǎo)航

jquery簡(jiǎn)單實(shí)現(xiàn)幻燈片的方法

更新時(shí)間：2015年08月03日 10:11:16 作者：jianwang19

這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)幻燈片的方法,核心的js代碼只有9行即可實(shí)現(xiàn)幻燈切換效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jquery簡(jiǎn)單實(shí)現(xiàn)幻燈片的方法。分享給大家供大家參考。具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻燈片</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
.slide{position: relative; overflow: hidden;}
.slide img{max-width: 100%; position: absolute; left: 0; top: 0;}
.slide img:first-child{position: relative; visibility: visible;}
</style>
</head>
<body>
<div class="slide">
 <img src="images/172233f3cyzidsc8rl8irz.jpg" />
 <img src="images/172231vxzvzz2xvk92d5m0.jpg" />
 <img src="images/172228jybldywbdwdflfzm.jpg" />
 <img src="images/172223i8otbbsot8b232o5.jpg" />
</div>
<script type="text/javascript">
var size = $('.slide img').size();
var _index = size;
var timer = null;
 $('.slide').append($('.slide img:eq(0)').clone());
  timer = setInterval(function(){
    $('.slide img').eq(_index).fadeOut(800);
    _index == 1?_index=size:_index--;
    $('.slide img').eq(_index).fadeIn(800);
  },4000);
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

jQuery中:focus選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:focus選擇器用法,以實(shí)例形式分析了:focus選擇器的功能、定義及匹配獲取焦點(diǎn)元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
懶加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù)，它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案。lazyload的核心是按需加載。在大型網(wǎng)站中都有l(wèi)azyload的身影，例如谷歌的圖片搜索頁(yè)，迅雷首頁(yè)，淘寶網(wǎng)，QQ空間等。
2011-01-01
jquery中ajax學(xué)習(xí)筆記3
由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹，本節(jié)只介紹需要修改的代碼，使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù)，web.xml、后臺(tái)的servet都不用改
2011-10-10
jquery UI Datepicker時(shí)間控件的使用方法（終結(jié)版）
這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版，可以說是技術(shù)的升華，實(shí)現(xiàn)的功能有限制的開始時(shí)間和結(jié)束時(shí)間跨度不超過三天，并配置有清空時(shí)間，重選時(shí)間等，感興趣的小伙伴們可以參考一下
2015-11-11
jquery api參考 visualjquery 中國(guó)線路速度快
jquery api參考 visualjquery 中國(guó)線路速度快...
2007-11-11
淺析LigerUi開發(fā)中謹(jǐn)慎載入common.css文件
這一句是載頁(yè)面載入時(shí)，顯示正在載入動(dòng)畫效果，但是極大影響了程序開發(fā)里的調(diào)試。給新手的建議，希望可以參考下
2013-07-07
jQuery過濾選擇器經(jīng)典應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery過濾選擇器經(jīng)典應(yīng)用，具有一定的實(shí)用性，感興趣的小伙伴們可以參考一下
2016-08-08
jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
改進(jìn)版,支持多個(gè)輸入框!前面因?yàn)槎鄠€(gè)輸入框信息不好保存所以只能支持一個(gè),現(xiàn)在用輸入框的alt屬性來(lái)保存修改前的內(nèi)容,所以能支持多個(gè)輸入框了.初步測(cè)試沒發(fā)現(xiàn)問題,歡迎大家一起測(cè)試改進(jìn)!!!
2010-05-05
jquery中防刷IP流量軟件影響統(tǒng)計(jì)的一點(diǎn)對(duì)策
由于公司項(xiàng)目需要增加推廣獎(jiǎng)勵(lì)功能，網(wǎng)站用戶通過邀請(qǐng)地址發(fā)給QQ好友、論壇、個(gè)人網(wǎng)站之類，只要有通過邀請(qǐng)地址點(diǎn)擊進(jìn)來(lái)就算推廣成功（當(dāng)天同一個(gè)IP僅算一次），推廣人會(huì)獲得相應(yīng)的獎(jiǎng)勵(lì)、積分等。
2011-07-07
基于jquery異步傳輸json數(shù)據(jù)格式實(shí)例代碼
這篇文章主要介紹了jquery異步傳輸json數(shù)據(jù)格式實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11