轮播图是我们学习原生js的必经之路

它包含很多基本知识的运用，像this的使用，DOM的操作，还有setInterval的使用和清除，浮动与定位等等，很好的考察了我们的基础知识牢不牢固，

话不多说，直接上图

HTML代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>淘宝轮播图</title>

     <link rel="stylesheet" href="css/initialize.css"/>

     <link rel="stylesheet" href="css/tblunbotu.css"/>

 </head>

 <body>

 <div id="container" class="clearFix">

     <div id="list" class="clearFix" style="left: -520px">

         <img src="img/5.jpg" alt=""/>

         <img src="img/1.jpg" alt=""/>

         <img src="img/2.jpg" alt=""/>

         <img src="img/3.jpg" alt=""/>

         <img src="img/4.jpg" alt=""/>

         <img src="img/5.jpg" alt=""/>

         <img src="img/1.jpg" alt=""/>

     </div>

     <div id="buttons" class="clearFix">

         <span class="on"></span>

         <span></span>

         <span></span>

         <span></span>

         <span></span>

     </div>

     <a href="javascript:;" id="prev" class="arrow">&lt;</a>

     <a href="javascript:;" id="next" class="arrow">&gt;</a>

 </div>

 <script type="text/javascript" src="js/tblunbotu.js"></script>

 </body>

 </html>

CSS样式如下：

 /*

     第一步：设置外部框的样式

     第二步: 设置图片框的样式

     第三步: 设置箭头的样式

     第四步: 设置小圆点的样式

 */

 #container {

     margin: 50px auto;

     position: relative;

     width: 520px;

     height: 280px;

     overflow: hidden;

 }

 #list {

     position: absolute;

     z-index:;

     width: 3640px;

 }

 #list img {

     float: left;

     width: 520px;

     height: 280px;

 }

 #buttons {

     height: 10px;

     width: 100px;

     position: absolute;

     left:;/*设置水平垂直居中*/

     right:;/*设置水平垂直居中*/

     margin: 0 auto;/*设置水平垂直居中*/

     bottom: 20px;

     z-index:;

 }

 #buttons span {

     float: left;

     margin-right: 5px;

     width: 10px;

     height: 10px;

     border: 1px solid #cccccc;

     border-radius: 50%;

     background: #333;

     cursor: pointer;

 }

 #buttons .on {

     background: orangered;

 }

 .arrow {

     width: 40px;

     height: 40px;

     display: none;

     position: absolute;

     top:; /*设置水平垂直居中*/

     bottom:; /*设置水平垂直居中*/

     margin: auto 0; /*设置水平垂直居中*/

     font-size: 36px;

     font-weight: bold;

     line-height: 39px;

     text-align: center;

     color: #fff;

     background-color: RGBA(0, 0, 0, .3);

     cursor: pointer;

     z-index:;

 }

 .arrow:hover{

     background-color: RGBA(0, 0, 0, .7);

 }

 #container:hover .arrow {

     display: block;

 }

 #prev{

     left: 10px;

 }

 #next{

     right: 10px;

 }

javascript代码如下

 /**

  * Created by zhm on 17.1.15.

  */

     /*

     *知识点：

     *   this使用

     *   DOM事件

     *   定时器

     *

     *   思路：

     *   （1）设置它左右移动

     *       问题：传入数字为NAN??

     *       解决：在页面中增加属性style：left:0

     *   （2）平滑移动（移动时间固定，每次移动的距离不一样）

     *       问题：连续点击出现晃动？---设置标志位

     *             出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张

     *                              在类list的标签中增加属性style：left:-520px;

     *                              设置无限滚动判断

     *

     *   （3）设置小圆点

     *       首先将所有的类置为空，当前类置为on

     *       绑定小圆点和图片

     *       绑定小圆点和左右箭头

     *       设置定时器，鼠标划上去停止，移开自动轮播

     *

     * */

     //1.获取元素

     var container = document.getElementById("container");

     var list = document.getElementById("list");

     var prev = document.getElementById("prev");

     var next = document.getElementById("next");

     var buttons = document.getElementById('buttons').getElementsByTagName('span');

     var timer = null;

     var timer2 = null;

     var flag = true;

     var index =0;

     //2.设置函数

     function moveImg(dis) {

         var time = 400;//运动的总时间

         var eachTime = 10;//每次小移动的时间

         var eachDis = dis/(time/eachTime);//每次小移动的距离

         var newWeizhi = parseInt(list.style.left) + dis;//新位置

         flag = false;

         function eachMove(){

             if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){

                 list.style.left = parseInt(list.style.left) + eachDis + 'px';

             }else {

                 flag = true;

                 clearInterval(timer);

                 list.style.left = newWeizhi + 'px';

                 //无限滚动判断

                 if (newWeizhi == 0) {

                     list.style.left = -2600 + 'px';

                 }

                 if (newWeizhi == -3120) {

                     list.style.left = -520 + 'px';

                 }

             }

         }

         timer = setInterval(eachMove, 10);

     }

     //3.设置点击切换图片

     next.onclick = function () {

         if(!flag) return;

         moveImg(-520);

         //绑定箭头和小圆点

         if (index == 4) {

             index = 0;

         } else {

             index++;

         }

         buttonsShow();

     };

     prev.onclick = function () {

         if(!flag) return;

         moveImg(520);

     //绑定箭头和小圆点

         if (index == 0) {

             index = 4;

         } else {

             index--;

         }

         buttonsShow();

     };

     //4.设置小圆点的绑定

     function buttonsShow() {

         //将之前的小圆点的样式清除

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

             if (buttons[i].className == "on") {

                 buttons[i].className = "";

                 break;

             }

         }

         buttons[index].className = "on";

     }

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

         buttons[i].value  = i;

         //使用自执行函数解决i的赋值问题

         (function(){

             buttons[i].onclick = function(){

                 if(this.value == index) return;

                 var offset = (this.value - index)* -520;

                 moveImg(offset);

                 index = this.value;

                 buttonsShow();

             }

         })();

     }

    //5.设置自动轮播

    timer2 = setInterval(next.onclick,1500);

    container.onmouseover = function(){

        clearInterval(timer2);

    };

    container.onmouseout = function(){

        timer2 = setInterval(next.onclick,1000);

    };

有什么好的建议可以留言，相互讨论哟，一起进步~fighting~~

源码下载：http://files.cnblogs.com/files/Hmin2199/%E6%B7%98%E5%AE%9D%E8%BD%AE%E6%92%AD%E5%9B%BE.zip

原生JavaScript之“淘宝轮播图”的更多相关文章

  1. jQuery实现淘宝轮播图

    我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...

  2. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  3. 原生javascript之实战 轮播图

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

  4. JS学习笔记 - 运动 - 淘宝轮播图

    <script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.g ...

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

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

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

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

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

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

  8. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

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

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

随机推荐

  1. Linux学习 -- Shell基础 -- Bash变量

    变量 默认是字符串型,数值型需要显示指定 等号两侧都不能有空格 单引号:原始字符串  双引号:保留转义 命令结果作为值:反引号 或 $() 环境变量一般用大写 自定义变量 变量定义    name=& ...

  2. （转）Windows管道(Pipe)重定向stdout,stderr,stdin

    参考: http://qiusuoge.com/11496.html http://www.cnblogs.com/BoyXiao/archive/2011/01/01/1923828.html st ...

  3. 移动端touch点穿（穿透）解决办法

    回答一 穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟或者事件冒泡导致. 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zep ...

  4. C++ 输出Cstring遇见的奇葩问题

    先上代码 // webConteng.cpp : Defines the entry point for the console application. // #include "stda ...

  5. html常见标签使用

    <body> <!--标题标签--> <h1></h1> <h2></h2> <h3></h3> < ...

  6. 关于Application.Lock…Application.Unlock有什么作用？

    因为Application变量里一般存储的是供所有连接到服务器的用户共享的信息(就像程序中所说的 "全局变量 "), 由于是全局变量,所以就容易出现两个或者多个用户同时对这一变量进 ...

  7. usb转串口驱动时会出现“文件的哈希值不在指定的目录”这样的提示

    一般在安装一些usb转串口驱动时会出现“文件的哈希值不在指定的目录”这样的提示,那么怎么解决呢?知道的别喷我哦,我只是再普及一下,嘿嘿1.鼠标移到右下角,点击“设置”,再点击“更改电脑设置”2.点击最 ...

  8. 关于css3的calc（）

    么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc()从字面我们可以把他理解为一个函数function.其实c ...

  9. web.xml的启动顺序

    1. context-param 2. Listener 3. Filter 4. servlet <?xml version="1.0" encoding="UT ...

  10. Android4.0图库Gallery2代码分析(二) 数据管理和数据加载

    Android4.0图库Gallery2代码分析(二) 数据管理和数据加载 2012-09-07 11:19 8152人阅读 评论(12) 收藏 举报 代码分析android相册优化工作 Androi ...