1、一直来说轮播图都是困扰刚进业内小白的一大难点，因为我们不仅需要自己作出一个比较完美的运动框架（虽然网上一抓一大把，但是哪有比自己做出来实现的有成就感，不是吗？^_^），还必须需要非常关键性的把握住轮播的原理，这样才能把一个轮播图完美的呈现出来。

2、废话不多说，请看下面代码

 //首先我们必须都明确，一个好的运动框架那必须是能够同时承载两种或多种以上需求的，所以我们应该避免单运动框架通过行内样式的局限性，就需要我们知道怎么去获取非行间样式

 function getStyle(obj,attr){

     if(obj.currentStyle){

         return obj.currentStyle[attr];

     }else{

         return getComputedStyle(obj,false)[attr]

     }

 }

 //以上我们用函数去封装一个获取非行间样式的方法方便我们以后使用

 //开始封装运动框架

 function move(obj,json,fn){

     clearInterval(obj.timer)

     obj.timer =setInterval(function(){

         var bStop = true;

         for(var attr in json){

             var initialVal = 0;

             if(attr == "opacity"){

                 initialVal = parseInt(parseFloat(getStyle(obj,attr))*100);

             }else{

                 initialVal = parseInt(getStyle(obj,attr));

             }

             var speed = (json[attr]-initialVal)/8;

             speed = speed>0?Math.ceil(speed):Math.floor(speed);

             if(initialVal != json[attr]){

                 bStop = false;

             }

             if(attr == "opacity"){

                 obj.style.opacity = (initialVal+speed)/100;

                 obj.style.filter = "alpha(opacity:"+(initialVal+speed)+")";

             }else{

                 obj.style[attr] = initialVal+speed+"px";

             }

             if(bStop){

                 clearInterval(obj.timer);

                 fn && fn();

             }

         }

     },30)

 }

 //上面一个运动框架就做好了,现在只需要我们调用即可,当然这种类型的框架还不是最完美的,有些功能还无法实现,所以我上面一直说比较完美,但这已经足够用啦...

第二步: 轮播图

 <!--首先我们来写一个简单的html和css-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>Document</title>

     <style type="text/css">

         *{padding: 0;margin: 0}

         #banner{

             width:     800px;

             height:400px;

             position: relative;

             margin: 50px auto;

             overflow: hidden;

         }

         #banner>ul{

             position: absolute;

         }

         #banner>ul>li{

             float: left;

             list-style: none;

         }

         #banner>ul>li>img{

             width:800px;

             height: 400px;

             border-radius: 15px;

         }

         #cut>a{

             width: 80px;

             height: 40px;

             background:rgba(228,23,221,0.5);

             ;border-radius: 10px;

             text-decoration: none;

             text-align: center;

             font-weight: bold;

             font-size: 30px;

             color: pink;

             position: absolute;

             top:180px;

             display: block;

             line-height: 40px;

         }

         #cut>a:nth-child(2){

             right:0;

         }

         #btn{

             position: absolute;

             top: 350px;

             left: 350px;

         }

         #btn>a{

             width: 20px;

             height: 20px;

             border-radius: 50%;

             background:yellowgreen;

             margin-right:6px;

             float: left;

         }

         #btn>.active{background:yellow;}

     </style>

 </head>

 <body>

     <div id="banner">

         <ul>

             <li><img src="data:images/1.jpg"></li>

             <li><img src="data:images/2.jpg"></li>

             <li><img src="data:images/3.jpg"></li>

             <li><img src="data:images/4.jpg"></li>

             <li><img src="data:images/5.jpg"></li>

         </ul>

         <div id="cut">

             <a href="##"><</a>

             <a href="##">></a>

         </div>

         <div id="btn">

             <a href="##" class="active"></a>

             <a href="##"></a>

             <a href="##"></a>

             <a href="##"></a>

             <a href="##"></a>

         </div>

     </div>

 </body>

 </html>

 <!--上面我的一个简单的布局，我就不多说了，下面请看我们的关键轮播图吧-->

无缝轮播图---> 当我们拿到需求时，我们会要立马想到无缝轮播是一种图片从左至右的滑动式切换，那肯定是通过切换ul（按我上述的HTML来说）的left值从而达到效果的，请看下面代码

 var oBan =document.getElementById("banner");

 var oli =oBan.getElementsByTagName("li");

 var oul= oBan.getElementsByTagName("ul")[0];

 var index = 0;

 var timer = null;

 //想要实现无缝轮播，关键就是使用一种偷梁换柱的障眼法去掩盖用户的视觉差

 var li =oli[0].cloneNode(true);

 oul.appendChild(li);

 //为了方便以后的代码维护

 var iw =oli[0].offsetWidth;

 oul.style.width =iw*oli.length+"px";

 //轮播原理

 function cutImg(){

     move(oul,{left:-index*iw});

     //当图片切换时，需要下面的小店同步进行切换

     for(var i = 0;i<oBtn.length;i++){

         oBtn[i].className = "" ;

     }

     oBtn[index>oBtn.length-1?0:index].className = "active";

 }

 //轮播的自动播放

 function autoP(){

     //这一步的目的在于当图片处于最后一张图时，我们怎么通过一个障眼法使图片变成我们想要的下一张图

     timer=setInterval(function(){

         if(index == oli.length-1){

            index = 1;

            oul.style.left = 0;

         }else{

            index++

         }

         cutImg()

     },3000)

 }

 autoP()

 //当我们鼠标移上时，轮播停止，鼠标移开轮播继续

     oBan.onmouseover = function(){

         clearInterval(timer);

     }

     oBan.onmouseout = function(){

        autoP();

     }

     // 轮播图中的点击小点图片切换

     var oBtn = document.getElementById("btn").getElementsByTagName("a");

     for(var i = 0;i<oBtn.length;i++){

        oBtn[i].onclick = function(){

            oBtn[i].iNow = i;

            for(var j = 0;j<oBtn.length;j++){

                oBtn[j].className = "";

            }

            this.className ="active" ;

            move(oul,{left:-this.iNow*iw})

        }

     }

    // 轮播图中左右切换按钮切换

     var oCut =document.getElementById("cut").getElementsByTagName("a");

     //点击右边按钮切换到第一张图时，我们下一步想要得到的倒数第二张图

     oCut[1].onclick = function(){

          if(index == oli.length-1){

            index = 1;

            oul.style.left = 0;

         }else{

            index++

         }

         cutImg()

     }

     oCut[0].onclick = function(){

         if(index == 0){

            index = oli.length -2;

            oul.style.left = -(oli.length-1)*iw;

         }else{

            index--;

         }

          cutImg()

     }

     //这样一个无缝轮播图就做好啦！！

上面是我对轮播图的一个基本构思和大致框架，希望融合大家各位技术大牛们的思想加以优化，谢谢大家。。。。

Web前端原生JavaScript浅谈轮播图的更多相关文章

  1. 浅谈轮播图（原生JavaScript实现）

    现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...

  2. 原生javascript之实战 轮播图

    成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...

  3. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  5. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  6. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  8. 原生JavaScript之“淘宝轮播图”

    轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...

  9. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

随机推荐

  1. Linux下C语言的调试 - gdb

    调试是每个程序员都会面临的问题. 如何提高程序员的调试效率, 更好更快地定位程序中的问题从而加快程序开发的进度, 是大家共同面对的问题. 可能Windows用户顺口就会说出:用VC呗 :-) , 它提 ...

  2. 【freeradius】使用radclient调试radius协议

    freeradius 自带了非常好的客户端程序 radtest, radclient 用来模拟和调试设备和通信过程.radtest多用于认证,radclient更为强大一些,认证,计费,coa都可以模 ...

  3. XMPP系列(四）---发送和接收文字消息，获取历史消息功能

    今天开始做到最主要的功能发送和接收消息.获取本地历史数据. 先上到目前为止的效果图:              首先是要在XMPPFramework.h中引入数据存储模块: //聊天记录模块的导入 # ...

  4. Unity 实现模拟按键

    一直在想,使用模拟按键,也可以实现一些AI操作,具体还没做过,这里使用user32.dll在unity里写的一个简单demo using UnityEngine; using System.Colle ...

  5. 理解java值传递与引用传递

    1.基本类型和引用类型在内存中的保存 Java中数据类型分为两大类,基本类型和对象类型.相应的,变量也有两种类型:基本类型和引用类型.基本类型的变量保存原始值,即它代表的值就是数值本身:而引用类型的变 ...

  6. combination sum、permutation、subset(组合和、全排列、子集)

    combination sum I.permutation I.subsets  I 是组合和.全排列.子集的第一种情况,给定数组中没有重复的元素. combination sum II.permut ...

  7. 《深入理解Java虚拟机》读书笔记2--垃圾回收

    回收哪些内存/对象 引用计数算法 可达性分析算法 finalize()方法 HotSpot实现分析 转载:http://blog.csdn.net/tjiyu/article/details/5398 ...

  8. 《深入理解java虚拟机》读书笔记1--java内存区域

    Java内存管理 本文主要介绍Java虚拟机运行时的内存区域是如何划分的.Java对象的创建过程.Java对象的内存布局.Java对象的访问定位 一:运行时区域划分 主要可以分为以下 几个: 程序计数 ...

  9. HashMap实现原理及源码分析（JDK1.7）

    转载:https://www.cnblogs.com/chengxiao/p/6059914.html 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技 ...

  10. WebService技术简介

    今天继续阅读<.Net 大局观>时看到一段关于WebService支持技术的论述,真是简明扼要: Web services的另一个重要应用是B2B整合,一般来说它也依赖Internet,将 ...