Web前端原生JavaScript浅谈轮播图
Posted 一抹茶香、沁人心脾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端原生JavaScript浅谈轮播图相关的知识，希望对你有一定的参考价值。
1、一直来说轮播图都是困扰刚进业内小白的一大难点，因为我们不仅需要自己作出一个比较完美的运动框架（虽然网上一抓一大把，但是哪有比自己做出来实现的有成就感，不是吗？^_^），还必须需要非常关键性的把握住轮播的原理，这样才能把一个轮播图完美的呈现出来。
2、废话不多说，请看下面代码
1 //首先我们必须都明确，一个好的运动框架那必须是能够同时承载两种或多种以上需求的，所以我们应该避免单运动框架通过行内样式的局限性，就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)[attr] 7 } 8 } 9 //以上我们用函数去封装一个获取非行间样式的方法方便我们以后使用 10 11 //开始封装运动框架 12 function move(obj,json,fn){ 13 clearInterval(obj.timer) 14 obj.timer =setInterval(function(){ 15 var bStop = true; 16 for(var attr in json){ 17 var initialVal = 0; 18 if(attr == "opacity"){ 19 initialVal = parseInt(parseFloat(getStyle(obj,attr))*100); 20 }else{ 21 initialVal = parseInt(getStyle(obj,attr)); 22 } 23 var speed = (json[attr]-initialVal)/8; 24 speed = speed>0?Math.ceil(speed):Math.floor(speed); 25 if(initialVal != json[attr]){ 26 bStop = false; 27 } 28 if(attr == "opacity"){ 29 obj.style.opacity = (initialVal+speed)/100; 30 obj.style.filter = "alpha(opacity:"+(initialVal+speed)+")"; 31 }else{ 32 obj.style[attr] = initialVal+speed+"px"; 33 } 34 if(bStop){ 35 clearInterval(obj.timer); 36 fn && fn(); 37 } 38 } 39 },30) 40 } 41 //上面一个运动框架就做好了,现在只需要我们调用即可,当然这种类型的框架还不是最完美的,有些功能还无法实现,所以我上面一直说比较完美,但这已经足够用啦...
第二步: 轮播图
1 <!--首先我们来写一个简单的html和css--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>Document</title> 8 <style type="text/css"> 9 *{padding: 0;margin: 0} 10 #banner{ 11 width: 800px; 12 height:400px; 13 position: relative; 14 margin: 50px auto; 15 overflow: hidden; 16 } 17 #banner>ul{ 18 position: absolute; 19 } 20 #banner>ul>li{ 21 float: left; 22 list-style: none; 23 } 24 #banner>ul>li>img{ 25 width:800px; 26 height: 400px; 27 border-radius: 15px; 28 } 29 30 #cut>a{ 31 width: 80px; 32 height: 40px; 33 background:rgba(228,23,221,0.5); 34 ;border-radius: 10px; 35 text-decoration: none; 36 text-align: center; 37 font-weight: bold; 38 font-size: 30px; 39 color: pink; 40 position: absolute; 41 top:180px; 42 display: block; 43 line-height: 40px; 44 } 45 #cut>a:nth-child(2){ 46 right:0; 47 } 48 49 #btn{ 50 position: absolute; 51 top: 350px; 52 left: 350px; 53 } 54 #btn>a{ 55 width: 20px; 56 height: 20px; 57 border-radius: 50%; 58 background:yellowgreen; 59 margin-right:6px; 60 float: left; 61 } 62 #btn>.active{background:yellow;} 63 </style> 64 </head> 65 <body> 66 <div id="banner"> 67 <ul> 68 <li><img src="images/1.jpg"></li> 69 <li><img src="images/2.jpg"></li> 70 <li><img src="images/3.jpg"></li> 71 <li><img src="images/4.jpg"></li> 72 <li><img src="images/5.jpg"></li> 73 </ul> 74 <div id="cut"> 75 <a href="##"><</a> 76 <a href="##">></a> 77 </div> 78 <div id="btn"> 79 <a href="##" class="active"></a> 80 <a href="##"></a> 81 <a href="##"></a> 82 <a href="##"></a> 83 <a href="##"></a> 84 </div> 85 </div> 86 </body> 87 </html> 88 <!--上面我的一个简单的布局，我就不多说了，下面请看我们的关键轮播图吧-->
无缝轮播图---> 当我们拿到需求时，我们会要立马想到无缝轮播是一种图片从左至右的滑动式切换，那肯定是通过切换ul（按我上述的HTML来说）的left值从而达到效果的，请看下面代码
1 var oBan =document.getElementById("banner"); 2 var oli =oBan.getElementsByTagName("li"); 3 var oul= oBan.getElementsByTagName("ul")[0]; 4 var index = 0; 5 var timer = null; 6 7 //想要实现无缝轮播，关键就是使用一种偷梁换柱的障眼法去掩盖用户的视觉差 8 var li =oli[0].cloneNode(true); 9 oul.appendChild(li); 10 11 //为了方便以后的代码维护 12 var iw =oli[0].offsetWidth; 13 oul.style.width =iw*oli.length+"px"; 14 15 //轮播原理 16 function cutImg(){ 17 move(oul,{left:-index*iw}); 18 //当图片切换时，需要下面的小店同步进行切换 19 for(var i = 0;i<oBtn.length;i++){ 20 oBtn[i].className = "" ; 21 } 22 oBtn[index>oBtn.length-1?0:index].className = "active"; 23 } 24 25 //轮播的自动播放 26 function autoP(){ 27 //这一步的目的在于当图片处于最后一张图时，我们怎么通过一个障眼法使图片变成我们想要的下一张图 28 timer=setInterval(function(){ 29 if(index == oli.length-1){ 30 index = 1; 31 oul.style.left = 0; 32 }else{ 33 index++ 34 } 35 cutImg() 36 },3000) 37 } 38 autoP() 39 40 //当我们鼠标移上时，轮播停止，鼠标移开轮播继续 41 oBan.onmouseover = function(){ 42 clearInterval(timer); 43 } 44 oBan.onmouseout = function(){ 45 autoP(); 46 } 47 48 // 轮播图中的点击小点图片切换 49 var oBtn = document.getElementById("btn").getElementsByTagName("a"); 50 for(var i = 0;i<oBtn.length;i++){ 51 oBtn[i].onclick = function(){ 52 oBtn[i].iNow = i; 53 for(var j = 0;j<oBtn.length;j++){ 54 oBtn[j].className = ""; 55 } 56 this.className ="active" ; 57 move(oul,{left:-this.iNow*iw}) 58 } 59 } 60 61 // 轮播图中左右切换按钮切换 62 var oCut =document.getElementById("cut").getElementsByTagName("a"); 63 //点击右边按钮切换到第一张图时，我们下一步想要得到的倒数第二张图 64 oCut[1].onclick = function(){ 65 if(index == oli.length-1){ 66 index = 1; 67 oul.style.left = 0; 68 }else{ 69 index++ 70 } 71 cutImg() 72 } 73 74 75 oCut[0].onclick = function(){ 76 if(index == 0){ 77 index = oli.length -2; 78 oul.style.left = -(oli.length-1)*iw; 79 }else{ 80 index--; 81 } 82 cutImg() 83 } 84 85 //这样一个无缝轮播图就做好啦！！
上面是我对轮播图的一个基本构思和大致框架，希望融合大家各位技术大牛们的思想加以优化，谢谢大家。。。。
以上是关于Web前端原生JavaScript浅谈轮播图的主要内容，如果未能解决你的问题，请参考以下文章