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