jQuery實現的多屏圖像圖層切換效果實例

2024-05-06 16:19:40

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現的多屏圖像圖層切換效果,可實現多個圖層的點擊切換效果,設計jQuery鼠標事件及樣式的操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現多屏圖像圖層切換效果的方法。分享給大家供大家參考。具體實現方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標題文檔</title>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<style type="text/css">

ul{list-style:none;margin:0;padding:0;}

li{float:left;}

.Xing_focus{

width:875px; height:800px;

overflow:hidden;border:1px solid red;

}

.Xing_focus ul{

width:3500px;

}

.bnt {

float:left;width:300px;height:20px;

border:1px solid red;

}

.bnt li{

width:18px;height:18px;

background:red; cursor:pointer;

margin-right:10px;float:left;

}

.bnt .sli{

background:blue;

}

.next{

width:100px;height:100px;

background:#990000;float:left;

cursor:pointer;

}

.pre{

width:100px;height:100px;

background:#009;float:left;

cursor:pointer;margin-right:30px;

}

.list1{

width:875px;height:500px;background:red;

}

.list2{

width:875px;height:500px;background:black;

}

.list3{

width:875px;height:500px;background:pink;

}

.list4{

width:875px;height:500px;background:blue;

}

</style>

</head>

<body>

<div class="Xing_focus" id="box">

<ul class="imgs" id="actor">

<li class="list1">

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" />

</li>

<li class="list2">

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" />

</li>

<li class="list3">

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" />

</li>

<li class="list4">

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" />

</li>

</ul>

<ul class="bnt" id="bnt">

</ul>

<div class="pre" id="pre">上一張</div>

<div class="next" id="next">下一張</div>

</div>

<script type="text/javascript">

$(window).load(function() {

var liW = $("#actor li:first").width();

var liL = $("#actor li").length;

//alert(liW)

var lis = $("#actor li").length;

for(i=0;i<lis;i++){

$("#bnt").append("<li></li>")

$("#bnt li:first").addClass("sli");

};

$("#bnt li").each(function(index) {

$(this).click(function(){

if($("#actor").is(":animated")==false){

$("#actor").animate({"marginLeft":-index*liW},500,function(){

$("#bnt li").removeClass("sli");

$("#bnt li").eq(index).addClass("sli");

});

};

});

});

settime=window.setInterval(atuoScroll,2000);

$("#box").hover(function(){

window.clearInterval(settime);

},function(){

settime=window.setInterval(atuoScroll,2000);

});

////////////////////////////////////////

$("#next").click(function(){

var ulM =parseInt( $("#actor").css("margin-left"));

if(ulM==-((liL-1)*liW)&&$("#actor").is(":animated")==false){

$("#actor").animate({"marginLeft":0+"px"},500,function(){

$("#bnt li").removeClass("sli");

$("#bnt li:first").addClass("sli");

});

}

else if($("#actor").is(":animated")==false){

$("#actor").animate({"marginLeft":ulM-liW+"px"},500,function(){

var ulM =parseInt( $("#actor").css("margin-left"));

var num = -ulM/liW

$("#bnt li").removeClass("sli");

$("#bnt li").eq(num).addClass("sli");

});

};

});

////////////////////////////////////////

$("#pre").click(function(){

var ulM =parseInt( $("#actor").css("margin-left"));

if(ulM==0&&$("#actor").is(":animated")==false){

$("#actor").animate({"marginLeft":-2625+"px"},500,function(){

$("#bnt li").removeClass("sli");

$("#bnt li:last").addClass("sli");

});

}

else if($("#actor").is(":animated")==false){

$("#actor").animate({"marginLeft":ulM+liW+"px"},500,function(){

var ulM =parseInt( $("#actor").css("margin-left"));

var num = -ulM/liW

$("#bnt li").removeClass("sli");

$("#bnt li").eq(num).addClass("sli");

});

};

});

//////////////////////////////////////

});//END

function atuoScroll(){

var liW = $("#actor li:first").width();

var liL = $("#actor li").length;

var ulM =parseInt( $("#actor").css("margin-left"));

if(ulM==-((liL-1)*liW)&&$("#actor").is(":animated")==false){

$("#actor").stop();

$("#actor").animate({"marginLeft":0},500,function(){

$("#bnt li").removeClass("sli");

$("#bnt li:first").addClass("sli");

});

}

else if($("#actor").is(":animated")==false){

$("#actor").stop();

$("#actor").animate({"marginLeft":ulM-liW},500,function(){

var ulM =parseInt( $("#actor").css("margin-left"));

var num = -ulM/liW

$("#bnt li").removeClass("sli");

$("#bnt li").eq(num).addClass("sli");

});

};

};

</script>

</body>

</html>