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