Jquery实现简单图片切换
生活随笔
收集整理的這篇文章主要介紹了
Jquery实现简单图片切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
代碼 <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);?});
????????????//鼠標離開圖片切換繼續
????????????$("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>
?
?
轉載于:https://www.cnblogs.com/lecone/archive/2011/01/06/1927688.html
總結
以上是生活随笔為你收集整理的Jquery实现简单图片切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于重构之Switch的处理【二】
- 下一篇： 2011年的MVP礼包