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. DEVICE_ATTR

    说道sysfs接口,就不得不提到函数宏 DEVICE_ATTR,原型是 #define DEVICE_ATTR(_name, _mode, _show, _store) \ struct device ...

  2. 如何在Android上编写高效的Java代码

    转自:http://www.ituring.com.cn/article/177180 作者/ Erik Hellman Factor10咨询公司资深移动开发顾问,曾任索尼公司Android团队首席架 ...

  3. "《算法导论》之‘线性表’"：基于静态分配的数组的顺序表

    首先,我们来搞明白几个概念吧(参考自网站数据结构及百度百科). 线性表 线性表是最基本.最简单.也是最常用的一种数据结构.线性表中数据元素之间的关系是一对一的关系,即除了第一个和最后一个数据元素之外, ...

  4. Notice to users of DB Query Analyzer in Windows 7, Windows 8 and Windows 10

        UnlikeWinXP, VISTA, Windows2000, Windows Nt and Win98,Windows 7 / Windows 8 / Windows 10 select  ...

  5. 如何上传代码到git上

    windows环境下上传代码到git仓库 1,https://github.com/new 2,创建成功后是这样子的 3,远程添加github上的Blog仓库. 1)进入本地文件夹下-右击鼠标-Git ...

  6. ubuntu 输入用户名密码又回到登陆界面

    问题描述: 输入正确的用户名密码,登陆后又返回登陆界面,重复出现. 问题解决: 环境变量出错,重新配置环境变量. 1.进入命令行模式Ctrl+Alt+F*,然后输入用户名密码: 2.登进去之后,以管理 ...

  7. ubuntu下ruby文件执行蛋疼的一个问题

    ubuntu下面用sublime打开非常简单的一段代码(其实不算代码,因为没有实际语句): #!/usr/bin/ruby 在shell下加入x权限:chmod u+x doit.rb,然后运行 ./ ...

  8. https认证

    HTTPS认证 说明 1. HTTPS协议的站点信息更加安全,同时可降低网站被劫持的风险,如网站同时存在HTTP和HTTPS站点,可使用本工具进行认证,便于百度搜索识别网站HTTP与HTTPS之间的对 ...

  9. 学好js的步骤

    第一步:打基础,建议看<JavaScript权威指南>,并作为参考书,供以后学习用. 第二步:进阶学习:建议看<JavaScript高级程序设计>,<精通JavaScri ...

  10. struts2.1.8+hibernate2.5.6+spring3.0（ssh2三大框架）常见异常原因和解决方案

    ---------------------------------------------------------------------------------------------------- ...