一款多屏图像图层切换特效代码

稿源：互联网 2022-04-02 21:38:20 点击： 34647 撤稿纠错

多屏图像图层切换特效代码，简单的代码效果，非常适合学习...

以下讨论的是和切换相关的一款多屏图像图层切换特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.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>

关于一款多屏图像图层切换特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011120677055.shtml方便下次再访问哦。

·上一篇： 来自IBM中文官方网站的导航条渐隐特效代码
·下一篇： 用图层模仿五星星评价功能的特效代码

一款多屏图像图层切换特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻