轮播图是我们学习原生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. java 线程安全

    要认识java线程安全,必须了解两个主要的点:java的内存模型,java的线程同步机制.特别是内存模型,java的线程同步机制很大程度上都是基于内存模型而设定的. 浅谈java内存模型: 不同的平台 ...

  2. 多校 Babelfish

    题目链接:http://acm.hust.edu.cn/vjudge/contest/124435#problem/A 密码:acm Sample Input dog ogday cat atcay ...

  3. C#入门经典第十章类的成员-1

    类成员的访问级别 public   成员可以由任何代码访问,公共的. private 私有的,成员只能有类中的代码访问.(默认的关键字) internal 内部的,成员只能有定义它的程序集(项目)内部 ...

  4. mysql distinct、group_concat

    mysql distinct语句用于查询多条不重复记录值(去重.过滤多余的重复记录) distinct同时作用了两个字段或者两个以上的字段,必须得作用了的字段都相同的才被排除.如果想让单个列" ...

  5. docker 容器日志集中 ELK + filebeat

    docker 容器日志集中 ELK ELK 基于 ovr 网络下 docker-compose.yaml version: '2' networks: network-test: external: ...

  6. zencart_magiczoom

    mod_zencart_magiczoom使用   一.复制相应文件到相应目录. 二.安装sql文件. 三.按照正确命名上传商品图片,一般需要中图跟大图. 四.程序运行时会在images目录下创建ma ...

  7. asp Vernum

    使用ASP加密算法加密你的数据(一) 简介    首先简单介绍一下有关加密的背景.由于美国禁止几种密码算法的对外出口的加密位数(例如SSL的40位加密限制),本文将介绍一种ASP可以使用的简单字符加密 ...

  8. Sping中的IOC四种注解的简单记录

    @Component 通用注解,不推荐使用,要用的话,任何类的头上都能使用,但是这个类到底是干嘛用得就不知道了. @Controller 控制层使用,也就是MVC中的C,主要的时候使用的时候注意配合@ ...

  9. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  10. python 一遍式四则运算

    #!/usr/bin/python #coding: utf-8 INTEGER = 'INTEGER' PLUS = '+' MINUS = '-' MUL = '*' DIV = '/' LC = ...