基于Jquery的簡單圖片切換效果
更新時間：2011年01月06日 23:05:09 作者：
Jquery實現(xiàn)簡單圖片切換效果代碼，需要的朋友可以參考下。
復制代碼 代碼如下:
<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;//圖片開始時間
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 () {
//鼠標在圖片上懸停讓切換暫停
$("div[name='pic']").hover(function () { clearInterval(t); });
//鼠標離開圖片切換繼續(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實現(xiàn)的產(chǎn)品自動360度旋轉展示特效源碼分享
這篇文章主要展示了jQuery實現(xiàn)的產(chǎn)品自動360度旋轉展示特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)簡單的間隔向上滾動效果,實例分析了jQuery通過animate與setInterval控制dom元素滾動特效的技巧,需要的朋友可以參考下2015-03-03
使用jQuery Rotare實現(xiàn)微信大轉盤抽獎功能
本文主要介紹使用jQuery Rotare實現(xiàn)微信大轉盤抽獎功能，并附實例講解，非常實用，有需要的朋友可以參考一下。2016-06-06
這篇文章主要介紹了jQuery中:animated選擇器用法,實例分析了:animated選擇器的功能、定義及匹配動畫效果元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery1.9+中刪除了live以后的替代方法 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery的ajax下載blob文件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
原來使用jQuery1.3.2編寫的代碼，更換到1.4.2后，使用jQuery.ajax()加載的json文件，不能正常加載。(使用jQuery.getJSON()也一樣)2011-02-02
這篇文章主要為大家詳細介紹了網(wǎng)頁瀑布流布局jQuery實現(xiàn)方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery根據(jù)表單name獲取值的方法,總結分析了jQuery獲取表單值的常用技巧,涉及jQuery選擇器的使用技巧,非常簡單實用,需要的朋友可以參考下2016-05-05
jQuery Lightbox（balupton版）圖片展示插件demo2010-04-04