金沙澳门官网网址:原生js和jquery实现图片轮播特

作者: 前端知识  发布:2019-08-29

页面塑造和js前端不得不说的那点事儿

2012/10/30 · CSS, JavaScript · 1 评论 · CSS, Javascript

来源:微博UDC – 张传亮

用作微博的页面构建筑工程程师,重要职务正是使用html&css,高水平的实现静态页面包车型地铁制作,保险项指标如期实现。而页面须要的js效果则交由下游的js前端程序员去做。在博客园,那五个职位是分别的。但在我们的理念定势里只怕以为那多少个岗位应由壹位来达成最棒,终归,页面营造筑工程程师写的html结构不料定是js技术员想要的这种,js技术员恐怕有更便捷的章程。所以,在页面营造在此之前最CANON与js程序员沟通一下,把贯彻方案分明好。

金沙澳门官网网址 1

但在实际项目流程中,当进行到页面塑造的时候,产品老板或许还没铺排到js财富,那时大家只可以依据产品的须要和自个儿的主见去写html结构,不止要思考到设计稿的还原度、浏览器的包容性、现在大概要增进的新功效的预感地方,还要思念什么写html结构能让js最简便的达成产品的竞相作用。作为一名有义务感的页面创设筑工程程师,表示亚海棠山大!所以,大家平常翻看页面源码时,会发觉那样的注脚,用来报告js程序员怎么去操作dom结构。

金沙澳门官网网址 2

临时为了成功最简,我们要思虑深入,前一阵子的伦敦奥运会,和讯首页右边要增添一个奥林匹克运动金牌榜的模块,要求有收起和扩充的开关,用来显示差异的情节。

金沙澳门官网网址 3

对网址的话那是很稀松经常的竞相成效。具体html实现大概有同学会想到,做四个div,各自包蕴张开的内容和接到的剧情。在点击张开按键时出现叁个,另三个藏身;而在点击收起的时候做反而的拍卖。这种事本人也未曾对与错,能促作用益就好。但作为出现在新浪首页的模块,并且出现在首先屏的地方,对质量的优化料定是要做足的。能尽量在大家css这一层做的,决不放到js那边去做。作者的处理方式是把收起进行的体裁都写好,放在一块儿,让js在暗中同意张开或点击张开的时候展现turn_olym_on,在点击收起的时候改造为turn_olym_off,那样js就只是改造一个class名的代码量,而对于实行收起的三个按键,小编也因此转移的class名来展现和潜伏。

具体html代码:
金沙澳门官网网址 4

在这里把富有应用的代码全体坐落一同,把某种情状时绝不展现的遮盖掉,比方张开状态时,class=”show_less W_linecolor”的div和进行的按键class=”W_moredown”不用突显,就足以在最外层的div上写:
金沙澳门官网网址 5

css这段日子隐没掉这两成分:
金沙澳门官网网址 6

而当收起的时候,最外层的div就形成:
金沙澳门官网网址 7

css则把前边掩饰的五个成分突显出来,并把要求隐蔽的排行的榜单四五名class=”no_45″的tr标签、赛事重视的class=”show_more”及接受的开关class=”W_moreup”隐藏:
金沙澳门官网网址 8

像这种类型,就只必要js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就能够了,别的的隐身体现全部有css来化解。

总结:

询问部分上下游工作的文化,让上下游关系更顺畅,提升级程序猿作作用,是我们一同的指标。
页面创设的办事,面前境遇着广大的挑战,日前html5的新标签、高等浏览器原生辅助的各样api,还应该有css3非凡有意思的新属性等等。。。都亟需大家去读书,不求完全精晓,但求能领悟掌握,能精晓是怎么回事。把学到的新知识运用到实在项目中,对商厦对组织对协和都平价~

元芳,你怎么看?

赞 收藏 1 评论

金沙澳门官网网址 9

(3)页面基本已经创设好久足以拓宽js的管理了

 //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
    changeTo(curIndex);
  });

左箭头

   // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex   ; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);
 //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className  = cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }
var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

周旋于事先,知识充实了五个箭头img标签

//对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });
function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-"   goLeft   "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

7.然后是一个开关层,用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

6.然后是贰个图形描述info层,放在透明背景层的左下角(div 或 ul-->li)

//清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex   ;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

一体化代码

3.因为有一部分class呀,所以来多少个class函数的模仿也是急需的

金沙澳门官网网址 10

2.自动切换计时器管理

4.要左右切换,就得模拟jq的animate-->left .

一、jQuery方式

 //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos   "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

jq正是那般,简便,原生代码量就有个别多了

4.为右下角的这个li 按键绑定事件管理

 var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数

1.全局变量等

5.接下来正是切换的函数完成了,比方要切换成序号为num的图形

js原生大致也便是效仿jq的落实思路

2.接着就是你设置图片轮播的地方(也正是二个banner吧)

通过,能够先构造出html结构

4.然后是图形两端的左箭头和右箭头
5.然后是一个晶莹剔透背景层,放在图片尾部

 //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i  ){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

每传入三个图形序号,则按理举行goLeft

<div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
      <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>

7.最终的尾声,没啥了. 噢好像还要调用一下下充足 addEvent() ..

<!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>图片轮播 js原生(左右切换)</title>
<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
  <div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
  var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex   ; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex   ;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

  //调用添加事件处理
  addEvent();

  //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i  ){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (  curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

  //左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移一定距离
    //设置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }


  //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist   parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i  ){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos  = (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos   "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

  //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\s|^)'   cls   '(\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className  = cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\s|^)'   cls   '(\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

  </script>
</body>
</html>

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:原生js和jquery实现图片轮播特

关键词: 金沙澳门官网

上一篇:热点回顾第一期,Web性能优化分析
下一篇:没有了