首页 > 代码库 > 纯原生javascript仿网易轮播图
纯原生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 //生成下面的span12 for (var i = 0;i<imgs.length;i++) {13 var span = document.createElement("span");14 /*这里要注意，首先生成的span是倒序排列的，因此要改变序号 */15 span.innerHTML = imgs.length - i; //6-i16 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 给 inow59 下一次播放，应该播放第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，故+171 }72 var timer = null;73 timer = setInterval(autoplay,2000); // 开启定时器74 function autoplay() {75 // 当我们点击时候， 当前的这张图片 先慢慢的走到左边 下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中76 //iNow == 077 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(); // 调用square86 }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仿网易轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。