cari

Rumah >hujung hadapan web >tutorial js >Contoh kesan penukaran lapisan imej berbilang skrin yang dilaksanakan oleh jQuery_jquery

Contoh kesan penukaran lapisan imej berbilang skrin yang dilaksanakan oleh jQuery_jquery

WBOY
WBOYasal
2016-05-16 16:00:101258semak imbas

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>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JS untuk membuka, menutup dan memindahkan lapisan dengan kemahiran effect_javascript penimbalArtikel seterusnya：Kaedah JS untuk membuka, menutup dan memindahkan lapisan dengan kemahiran effect_javascript penimbal

Artikel berkaitan

Lihat lagi