纯原生javascript仿网易轮播图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯原生javascript仿网易轮播图相关的知识，希望对你有一定的参考价值。
第一次有自己的关于代码的博客，感到诚惶诚恐。这可能是我第一次以程序猿，或者连初级程序猿都不是的身份下开通的个人“技术”（胡写乱写）博客园地。闲言碎语不要讲，咱今天就写一点关于js的代码吧。网易首页大家肯定都去过，在首页左侧部分有个轮播图，效果很好，构思精巧，非常诱人。注，此demo非本人原创，在这里进行个人解读，力求通俗易懂（主要是让我自己明白！）。
那么如何实现相关技术，进而实现如图效果呢？下面的进度条是用JQuery写的，这里暂不考虑。下面从三个方面讨论网一轮播图。
一、html部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网易轮播图</title> 6 <link rel="stylesheet" href="css/index.css" /> 7 <script src="js/slider.js" type="text/javascript" charset="utf-8"></script> 8 <script src="js/animate.js" type="text/javascript" charset="utf-8"></script> 9 </head> 10 <body> 11 <div class="w-slider" id="js_slider"> 12 <div class="slider"> 13 <div class="slider-main" id="slider_main_block"> 14 <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""/></a></div> 15 <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""/></a></div> 16 <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""/></a></div> 17 <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""/></a></div> 18 <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""/></a></div> 19 <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""/></a></div> 20 </div> 21 </div> 22 <div class="slider-ctrl" id="slider_ctrl"> 23 <span class="slider-ctrl-prev"></span> 24 <span class="slider-ctrl-next"></span> 25 </div> 26 </div> 27 </body> 28 </html>
技术交流：布局很有讲究。语义化是Html中非常重要的一个规则。比如图片上的箭头，应该单独分离出来，作为父亲盒子w-slider的一个子元素，它和上面的滚动部分应该是并列部分，属于两个不同的功能。
二、CSS部分
1 * {margin:0;padding:0; } 2 img { 3 vertical-align: top; 4 } 5 .w-slider { 6 width: 310px; 7 height: 265px; 8 margin:100px auto; 9 position: relative; 10 overflow: hidden; 11 } 12 .slider { 13 width: 310px; 14 height: 220px; 15 16 } 17 .slider-main { 18 width: 620px; 19 height: 220px; 20 } 21 .slider-main-img { 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 310px; 26 height: 220px; 27 } 28 .slider-main-img img { 29 width: 100%; 30 } 31 .slider-ctrl { 32 text-align: center; 33 padding-top: 5px; 34 } 35 .slider-ctrl-con { 36 width: 24px; 37 height: 20px; 38 display:inline-block; 39 background:url(../images/icon.png) no-repeat -24px -782px; 40 margin: 0 5px; 41 cursor: pointer; 42 /*注意这里：生成的span有innerHTML属性，也就是文字会显示出来，这里采取首行缩进为负值，隐藏文字，当然还需要overflow:hidden配合*/ 43 text-indent: -20em; 44 overflow: hidden; 45 } 46 .current { 47 background-position: -24px -762px; 48 } 49 .slider-ctrl-prev, 50 .slider-ctrl-next { 51 position: absolute; 52 top: 50%; 53 margin-top: -35px; 54 background:url(../images/icon.png) no-repeat 6px top; 55 width: 30px; 56 height: 35px; 57 opacity: 0.8; 58 cursor: pointer; 59 } 60 .slider-ctrl-prev { 61 left: 0; 62 } 63 .slider-ctrl-next { 64 right: 0; 65 background-position: -6px -44px; 66 }
技术交流：这里有个地方很重要。就是两个箭头的定位。根据Html,箭头是span做的，他的直系父元素是slider-ctrl，属于他的一部分。然而定位的时候出现一个比较有意思的地方，他是根据爷爷进行定位的，也就是w-slider，这样定位比较方便。另外就是span的文字隐藏技巧。
三、javascript部分
1 window.onload = function(){ 2 3 function $(id) {return document.getElementById(id);} 4 5 //获得元素 6 var slider_main_block = $("slider_main_block"); 7 var js_slider = $("js_slider"); // 获取最大盒子 8 var imgs = slider_main_block.children; 9 var slider_ctrl = $("slider_ctrl"); 10 11 //生成下面的span 12 for (var i = 0;i<imgs.length;i++) { 13 var span = document.createElement("span"); 14 /*这里要注意，首先生成的span是倒序排列的，因此要改变序号 */ 15 span.innerHTML = imgs.length - i; //6-i 16 slider_ctrl.insertBefore(span,slider_ctrl.children[1]); 17 span.className = "slider-ctrl-con"; 18 } 19 slider_ctrl.children[1].className = "current slider-ctrl-con"; 20 //slider_ctrl.children[1].setAttribute("class","slider-ctrl-con current"); 21 22 //把第一张图片和其他图片分别存在左右盒子 23 var scrollWidth = js_slider.clientWidth; //这里只是用大盒子的宽度，也可以用offsetWidth; 24 for (var i = 1;i<imgs.length;i++) { //从1开始 25 imgs[i].style.left = scrollWidth + "px"; 26 } 27 28 //遍历点击三个按钮 29 var spans = slider_ctrl.children; 30 var iNow = 0; 31 for(var k in spans){ 32 spans[k].onclick = function(){ 33 if(this.className == "slider-ctrl-prev"){ //点击左箭头 34 animate(imgs[iNow],{left: scrollWidth}); 35 --iNow < 0 ? iNow = imgs.length - 1 : iNow; 36 imgs[iNow].style.left = -scrollWidth + "px"; 37 animate(imgs[iNow],{left: 0}); 38 setSquare(); 39 }else if(this.className == "slider-ctrl-next"){ //点击右箭头 40 autoplay(); 41 }else{ 42 //这里还存在着一个隐式转换，this.innerHTML是个字符型，但是-1之后，又变成了数值 43 var that = this.innerHTML - 1; //this.innerHTML是从1开始，减1是把索引号置0。获得当前索引号 44 if(that > iNow){ //如果点击的大于正在播放的 45 animate(imgs[iNow],{left: -scrollWidth}); //让当前的出去，让下一张（我点击的那一张）进来 46 //点哪张就让哪张快速过来 47 imgs[that].style.left = scrollWidth + "px"; 48 //animate(imgs[that],{left: 0}); 慢慢走到舞台 49 } 50 else if(that < iNow) { 51 // 做法等同于 左侧按钮 52 animate(imgs[iNow],{left: scrollWidth}); 53 imgs[that].style.left = -scrollWidth + "px"; 54 //animate(imgs[that],{left: 0}); 55 } 56 iNow = that; //点击的span等于正在播放的序号，那么就把当前的索引号给播放的哪张（定时器会根据这个iNow进行播放） 57 animate(imgs[iNow],{left: 0}); //这段代码是提出来的 58 /*比如 已经播放到 第4张 我点击了 第2张 把 2 给 inow 59 下一次播放，应该播放第3张*/ 60 // animate(imgs[that],{left: 0}); 61 setSquare(); 62 } 63 } 64 } 65 function setSquare() { 66 // 清除所有的span current 留下 满足需要的拿一个 67 for(var i=1;i<spans.length-1;i++){ // 8个span 我们要 1-6 不要 7 索引号 68 spans[i].className = "slider-ctrl-con"; 69 } 70 spans[iNow+1].className = "slider-ctrl-con current"; // 记住 + 1，因为是span从第一个开始计算的，iNow初始值为0，故+1 71 } 72 var timer = null; 73 timer = setInterval(autoplay,2000); // 开启定时器 74 function autoplay() { 75 // 当我们点击时候， 当前的这张图片 先慢慢的走到左边 下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中 76 //iNow == 0 77 animate(imgs[iNow],{left: -scrollWidth}); 78 // 当前的那个图片 慢慢的走到 -scrollWidth 位置 79 // 变成1 先 ++ ++iNow 先自加 后 运算，如果是iNow++,那么b = iNow++ 取不到下一个索引值 80 ++iNow > imgs.length -1 ? iNow = 0 : iNow; 81 /*注意这里：当iNow超过5的时候，iNow置0，重新计数，但是这个时候要让下一张（此时由于++iNow，iNow已经变成了下一张的索引号）*/ 82 /*立马跑到右侧位置，先站好位置，做好移动到左侧的准备*/ 83 imgs[iNow].style.left = scrollWidth + "px"; // 立马执行 快速走到右侧 84 animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 慢慢走过来 85 setSquare(); // 调用square 86 } 87 //鼠标经过清除定时器 88 js_slider.onmouseover = function() { 89 clearInterval(timer); 90 } 91 js_slider.onmouseout = function() { 92 clearInterval(timer); // 要执行定时器 先清除定时器 93 timer = setInterval(autoplay,2000); // 开启定时器 94 } 95 }
技术交流：注释部分已经很详细啦~~不再赘述~
以上是关于纯原生javascript仿网易轮播图的主要内容，如果未能解决你的问题，请参考以下文章