基于Jquery的簡單圖片切換效果
更新時(shí)間：2011年01月06日 23:05:09 作者：
Jquery實(shí)現(xiàn)簡單圖片切換效果代碼，需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var t;
var speed = 2;//圖片切換速度
var nowlan=0;//圖片開始時(shí)間
function changepic() {
var imglen = $("div[name='pic']").find("div").length;
$("div[name='pic']").find("div").hide();
$("div[name='pic']").find("div").eq(nowlan).show();
nowlan = nowlan+1 ==imglen ?0:nowlan + 1;
t = setTimeout("changepic()", speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function () {
//鼠標(biāo)在圖片上懸停讓切換暫停
$("div[name='pic']").hover(function () { clearInterval(t); });
//鼠標(biāo)離開圖片切換繼續(xù)
$("div[name='pic']").mouseleave(function () { changepic(); });
});
</script>
</head>
<body>
<div name="pic" style="float:left; position:relative;overflow:hidden;width:300px;height:240px;" >
<div><img width="300" height="240" src="Chrysanthemum.jpg" alt="1"/></div>
<div><img width="300" height="240" src="Desert.jpg" alt="2"/></div>
<div><img width="300" height="240" src="Hydrangeas.jpg" alt="3"/></div>
</div>
</body>
</html>
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- jQuery 一個(gè)圖片切換的插件
- jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫滑動(dòng)圖片切換效果
- 一個(gè)基于jquery的圖片切換效果
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery簡單實(shí)現(xiàn)banner圖片切換
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- JQuery頁面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
- jQuery圖片切換插件jquery.cycle.js使用示例
- jQuery實(shí)現(xiàn)圖片切換效果
相關(guān)文章
jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效源碼分享
這篇文章主要展示了jQuery實(shí)現(xiàn)的產(chǎn)品自動(dòng)360度旋轉(zhuǎn)展示特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
jQuery實(shí)現(xiàn)簡單的間隔向上滾動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的間隔向上滾動(dòng)效果,實(shí)例分析了jQuery通過animate與setInterval控制dom元素滾動(dòng)特效的技巧,需要的朋友可以參考下2015-03-03
使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤抽獎(jiǎng)功能
本文主要介紹使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤抽獎(jiǎng)功能，并附實(shí)例講解，非常實(shí)用，有需要的朋友可以參考一下。2016-06-06
這篇文章主要介紹了jQuery中:animated選擇器用法,實(shí)例分析了:animated選擇器的功能、定義及匹配動(dòng)畫效果元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery1.9+中刪除了live以后的替代方法 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery的ajax下載blob文件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
原來使用jQuery1.3.2編寫的代碼，更換到1.4.2后，使用jQuery.ajax()加載的json文件，不能正常加載。(使用jQuery.getJSON()也一樣)2011-02-02
網(wǎng)頁瀑布流布局jQuery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了網(wǎng)頁瀑布流布局jQuery實(shí)現(xiàn)方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery根據(jù)表單name獲取值的方法,總結(jié)分析了jQuery獲取表單值的常用技巧,涉及jQuery選擇器的使用技巧,非常簡單實(shí)用,需要的朋友可以參考下2016-05-05
jQuery Lightbox（balupton版）圖片展示插件demo2010-04-04