jQuery实现的多屏图像图层切换效果实例

更新时间：2026-04-09 14:36:40作者：zhao

本文实例讲述了jQuery实现多屏图像图层切换效果的方法。分享给大家供大家参考。具体实现方法如下：

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

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

<head>

<title>无标题文档</title>

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>

</li>

</li>

</li>

</li>

</ul>

</ul>

</div>

$(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>

希望本文所述对大家的jQuery程序设计有所帮助。