一個基于jquery的圖片切換效果

更新時間：2010年07月06日 10:56:28 作者：

一個圖片切換效果，胡亂寫了一下。貌似doctype到了html4.01下面樣式有點問題。

下面的代碼對于學習jquery的朋友是個參考

html代碼：

代碼

復制代碼代碼如下:

 
<div class="warp" id="warp"> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic2.bmp" alt="" class="imgLittle" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic3.bmp" alt="" class="imgLittle" /> 
<img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic4.bmp" alt="" class="imgLittle" /> 
</div> 

javascript：

復制代碼代碼如下:

 
$(document).ready(function(){ 
var $warp = $("#warp"); 
$warp.IsRunning = false; 
var seconds = 500; 
$warp.children("img").click(function(){ 
if($warp.IsRunning){return;} 
$warp.IsRunning = true; 
var $imgs = $("#warp").children("img"); 

$imgs.eq(2).css("marginTop","63px").animate({marginTop:"0px"},{duration:seconds}); 
$imgs.eq(0).css({position:"absolute",opacity:"0.5"}).animate({width:"108px", height:"57px",left:"372px",top:"126px",opacity:"1"},{duration:seconds}); 
//$imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2"}); 

$imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2",clear:"none"}).animate({width:"360px", height:"190px",left:"-9px",top:"-5px",opacity:"1"},{duration:seconds,complete:function(){ 
$imgs.eq(0).appendTo($("#warp")); 
$imgs.eq(0).removeAttr("style").removeClass("imgBig").addClass("imgLittle"); 
$imgs.eq(1).removeAttr("style").removeClass("imgLittle").addClass("imgBig"); 
$warp.IsRunning = false; 
}}); 

}); 
}); 

css代碼：

復制代碼代碼如下:

 
.warp{width:487px; height:194px; overflow:hidden;border:solid 1px #ccc;position:relative; top:0px; left:0px; background-color:#fafafa} 
.warp img{border-width:0px;cursor:pointer;position:relative; top:0px; left:0px} 
.imgBig{float:left; width:360px; height:190px;padding:2px;} 
.imgLittle{float:right; width:108px; height:57px;padding:6px 5px 0 10px;clear:right} 

您可能感興趣的文章:

相關(guān)文章

jQuery中change事件用法實例
這篇文章主要介紹了jQuery中change事件用法,以實例形式分析了在匹配元素焦點變化時觸發(fā)事件使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery代碼優(yōu)化選擇符篇
毫無疑問，jQuery的獨到之處就是它以集合為中心的操作。為了取得DOM對象集合，jQuery利用JavaScript不僅實現(xiàn)了（它誕生時）很多瀏覽器不支持的CSS選擇符，還實現(xiàn)了不少獨到的自定義選擇符，為在文檔中查找元素提供了極大的便利
2011-11-11
正則驗證小數(shù)點后面只能有兩位數(shù)的方法
下面小編就為大家?guī)硪黄齽t驗證小數(shù)點后面只能有兩位數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
jQuery實現(xiàn)文本框輸入同步的方法
這篇文章主要介紹了jQuery實現(xiàn)文本框輸入同步的方法,涉及jQuery元素屬性操作的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
JQuery動畫與特效實例分析
這篇文章主要介紹了JQuery動畫與特效的用法,實例分析了顯示與隱藏、滑動、淡入淡出及自定義動畫的使用技巧,需要的朋友可以參考下
2015-02-02
原生JS和jQuery版實現(xiàn)文件上傳功能
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下
2016-04-04
jquery實現(xiàn)圖片平滑滾動詳解
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片平滑滾動的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
jQuery層次選擇器選擇元素使用介紹
層次選擇器:通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下
2013-04-04
Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法
這篇文章主要給大家介紹了關(guān)于Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法,文章通過實例代碼以及圖文介紹的非常詳細,對大家學習或者使用jQuery具有一定的參考學習價值,需要的朋友可以參考下
2023-06-06
jquery mobile頁面跳轉(zhuǎn)后樣式丟失js失效的解決方法
用ajax跳轉(zhuǎn)的時候，目標頁的css以及js都失效，這是由于page之外的代碼都不會加載，所以導致在page外的js和css都失效，解決方法如下
2014-09-09