Contoh kesan penukaran lapisan imej berbilang skrin yang dilaksanakan oleh jQuery

Contoh kesan penukaran lapisan imej berbilang skrin yang dilaksanakan oleh jQuery_jquery

WBOY

Lepaskan： 2016-05-16 16:00:10

asal

1273 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menggunakan jQuery untuk mencapai kesan penukaran lapisan imej berbilang skrin. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.