编程 Javascript

javascript基础知识之html5轮播图实例讲解（44）

Posted in Javascript onFebruary 17, 2017

本文实例为大家分享了html5轮播图的具体代码，供大家参考，具体内容如下

1.轮播图的布局：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
       
      /*去除默认样式*/ 
      *{ 
        margin: 0; 
        padding: 0; 
      } 
       
      /*设置div*/ 
      #outer{ 
        width: 520px; 
        height: 333px; 
        /*设置居中*/ 
        margin: 50px auto; 
        /* 
         * 设置背景颜色 
         */ 
        background-color: greenyellow; 
        /*设置上下内边距*/ 
        padding: 10px 0; 
        /*为父元素开启相对定位*/ 
        position: relative; 
        /*隐藏溢出的内容*/ 
        overflow: hidden; 
      } 
       
      /*设置ul*/ 
      #imgList{ 
        /*去除项目符号*/ 
        list-style: none; 
        /*设置ul的宽度*/ 
        width: 2600px; 
        /*开启绝对定位*/ 
        position: absolute; 
         
        /* 
         * 通过修改ul的left值，可以切换图片 
         * 1 0px 
         * 2 -520px 
         * 3 -1040px 
         * 4 -1560px 
         * .... 
         */ 
        left: 0px; 
      } 
       
      /*设置li*/ 
      li{ 
        /*设置元素浮动*/ 
        float: left; 
        /*设置外边距*/ 
        margin: 0 10px; 
      } 
       
       
      /*设置导航按钮*/ 
      #nav{ 
        /*开启绝对定位*/ 
        position: absolute; 
        /*定位*/ 
        bottom: 20px; 
         
        /* 
         * #outer 宽度 520px 
         *  
         * #nav 宽度 125px 
         *  
         * 520 - 125 = 395/2 = 197.5 
         */ 
        left: 197px; 
         
         
      } 
       
      #nav a{ 
        /*设置a浮动*/ 
        float: left; 
        /*设置宽和高*/ 
        width: 15px; 
        height: 15px; 
         
        /*设置背景颜色*/ 
        background-color: red; 
         
        /*设置外边距*/ 
        margin: 0 5px; 
         
        /*设置透明*/ 
        opacity: 0.5; 
        filter: alpha(opacity=50); 
      } 
       
       
    </style> 
  </head> 
  <body> 
     
    <!-- 
      创建一个div作为容器 
    --> 
    <div id="outer"> 
       
      <!--创建一个ul，用来保存图片--> 
      <ul id="imgList"> 
        <li><img src="img/1.jpg" /></li> 
        <li><img src="img/2.jpg" /></li> 
        <li><img src="img/3.jpg" /></li> 
        <li><img src="img/4.jpg" /></li> 
        <li><img src="img/5.jpg" /></li> 
      </ul> 
       
      <!--创建一个div来放导航按钮--> 
      <div id="nav"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
      </div> 
       
    </div> 
     
  </body> 
</html>

2.轮播图的逻辑：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
       
      /*去除默认样式*/ 
      *{ 
        margin: 0; 
        padding: 0; 
      } 
       
      /*设置div*/ 
      #outer{ 
        width: 520px; 
        height: 333px; 
        /*设置居中*/ 
        margin: 50px auto; 
        /* 
         * 设置背景颜色 
         */ 
        background-color: greenyellow; 
        /*设置上下内边距*/ 
        padding: 10px 0; 
        /*为父元素开启相对定位*/ 
        position: relative; 
        /*隐藏溢出的内容*/ 
        overflow: hidden; 
      } 
       
      /*设置ul*/ 
      #imgList{ 
        /*去除项目符号*/ 
        list-style: none; 
        /*设置ul的宽度*/ 
        width: 2600px; 
        /*开启绝对定位*/ 
        position: absolute; 
         
        /* 
         * 通过修改ul的left值，可以切换图片 
         * 1 0px 
         * 2 -520px 
         * 3 -1040px 
         * 4 -1560px 
         * .... 
         */ 
        left: 0px; 
      } 
       
      /*设置li*/ 
      li{ 
        /*设置元素浮动*/ 
        float: left; 
        /*设置外边距*/ 
        margin: 0 10px; 
      } 
       
       
      /*设置导航按钮*/ 
      #nav{ 
        /*开启绝对定位*/ 
        position: absolute; 
        /*定位*/ 
        bottom: 20px; 
         
        /* 
         * #outer 宽度 520px 
         *  
         * #nav 宽度 125px 
         *  
         * 520 - 125 = 395/2 = 197.5 
         */ 
        left: 197px; 
      } 
       
      #nav a{ 
        /*设置a浮动*/ 
        float: left; 
        /*设置宽和高*/ 
        width: 15px; 
        height: 15px; 
         
        /*设置背景颜色*/ 
        background-color: red; 
         
        /*设置外边距*/ 
        margin: 0 5px; 
         
        /*设置透明*/ 
        opacity: 0.5; 
        filter: alpha(opacity=50); 
      } 
       
      #nav a:hover{ 
        background-color: black; 
      } 
       
       
    </style> 
     
    <script type="text/javascript" src="js/tools.js"></script> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //获取id为imgList的ul 
        var imgList = document.getElementById("imgList"); 
        //获取所有的图片标签 
        var imgs = document.getElementsByTagName("img"); 
        //设置ul的宽度 
        imgList.style.width = 520 * imgs.length + "px";  
         
         
        //设置导航按钮居中 
        //获取id为outer的div 
        var outer = document.getElementById("outer"); 
        //获取id为nav的div 
        var nav = document.getElementById("nav"); 
         
        nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px"; 
         
         
        //创建一个变量，来保存当前显示图片的索引 
        var index = 0; 
         
        //获取所有的超链接 
        var links = document.getElementsByTagName("a"); 
         
        //设置对应的超链接变成选中状态 
        links[index].style.backgroundColor = "black"; 
         
        //开启自动切换图片 
        autoChange(); 
         
         
        /* 
         * 点击超链接切换到对应的图片 
         * 点击第一个超链接，切换到第一个图片 
         * 点击第二个超链接，切换到第二个图片 
         */ 
         
        //为所有的超链接绑定单击响应函数 
        for(var i=0 ; i<links.length ; i++){ 
           
          //在超链接中添加一个属性 
          links[i].num = i; 
           
          links[i].onclick = function(){ 
             
            //当切换图片时，为了不受自动切换的影响需要将其关闭 
            clearInterval(autoTimer); 
             
            //获取到当前点击的超链接的索引 
            //更新当前图片的索引 
            index = this.num; 
             
            //切换到对应的图片 
            /* 
             * 切换图片，就是修改imgList的left属性值 
             * 0 0*-520 
             * 1 1*-520 
             * 4 4*-520 
             */ 
            //imgList.style.left = -520*index + "px"; 
            //设置过渡效果 
            move(imgList , "left" , -520*index , 20 , function(){ 
              //图片切换完毕，打开自动切换 
              autoChange(); 
            }); 
             
            setA(); 
          }; 
        } 
         
        //定义一个变量，保存自动切换图片的定时器 
        var autoTimer;  
         
        /* 
         * 定义一个函数，专门用来自动切换图片 
         */ 
        function autoChange(){ 
           
          //开启一个定时器，来负责图片的切换 
          autoTimer = setInterval(function(){ 
             
            //索引自增 
            index++; 
             
            //判断index值是否合法 
            index = index % imgs.length; 
             
             
            //切换图片 
            move(imgList , "left" , -520*index , 20 , function(){ 
              //动画执行完毕，切换导航点 
              setA(); 
            }); 
             
          },3000); 
           
        } 
         
         
        /* 
         * 函数专门用来设置超链接的选中状态的 
         */ 
        function setA(){ 
           
          /* 
           * 因为最后一张图片和第一张是一样的，所以当显示的图片是最后一张时，应该是第一个的超链接变颜色 
           */ 
          if(index >= imgs.length - 1){ 
            index = 0; 
             
            //已经切换到最后一张，瞬间将其切换到第一张 
            imgList.style.left = 0; 
             
          } 
           
          /*遍历超链接*/ 
          for(var i=0 ; i<links.length ; i++){ 
            //将所有的超链接的背景颜色都设置为红色 
            links[i].style.backgroundColor = ""; 
          } 
           
          //将当前选中的超链接设置为黑色 
          links[index].style.backgroundColor = "black"; 
           
        } 
         
         
         
      }; 
       
       
    </script> 
     
  </head> 
  <body> 
     
    <!-- 
      创建一个div作为容器 
    --> 
    <div id="outer"> 
       
      <!--创建一个ul，用来保存图片--> 
      <ul id="imgList"> 
        <li><img src="img/1.jpg" /></li> 
        <li><img src="img/2.jpg" /></li> 
        <li><img src="img/3.jpg" /></li> 
        <li><img src="img/4.jpg" /></li> 
        <li><img src="img/5.jpg" /></li> 
        <li><img src="img/1.jpg" /></li> 
      </ul> 
       
      <!--创建一个div来放导航按钮--> 
      <div id="nav"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
      </div> 
       
    </div> 
     
  </body> 
</html>

外部js代码：

/* 
 * 定义一个move()函数来执行一些简单的动画效果 
 * 参数： 
 * obj 要执行动画的对象 
 * attr 执行动画时要修改的属性 
 * target 执行动画的目标位置 
 * speed 动画执行的速度 
 * callback 回调函数，当动画执行完毕以后，该回调函数会执行 
 */ 
function move(obj, attr, target, speed, callback) { 
  //关闭之前的定时器 
  /* 
   * 一般都会将定时器的标识作为执行动画对象的属性保存，这样可以确保只有当前对象能访问到定时器 
   */ 
  clearInterval(obj.timer); 
 
  //判断向左移还是向右移 
  //0 --> 800 向右移 
  //起始位置 < 目标位置 则向右移动，速度为正 
  //800 --> 0 向左移 
  //起始位置 > 目标位置 则向左移动，速度为负 
 
  //获取元素的起始位置 
  var current = parseInt(getStyle(obj, attr)); 
 
  if(current > target) { 
    //起始位置 > 目标位置 则向左移动，速度为负 
    speed = -speed; 
  } 
 
  //开启一个定时器，控制box1移动 
  obj.timer = setInterval(function() { 
 
    //获取box1的当前的left值 
    var oldValue = parseInt(getStyle(obj, attr)); 
 
    //通过旧值来计算新值 
    var newValue = oldValue + speed; 
 
    //判断newValue是否大于800 
    /* 
     * 如果从0 向 800，执行动画，则值越来越大 
     * 如果从800向0执行动画，则值越来小 
     */ 
    if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) { 
      newValue = target; 
    } 
 
    //将box1的left值修改为新值 
    obj.style[attr] = newValue + "px"; 
 
    //当box1移动到800px的位置时，停止移动 
    if(newValue == target) { 
 
      clearInterval(obj.timer); 
 
      //调用回调函数 
      callback && callback(); 
    } 
 
  }, 30); 
 
} 
 
/* 
 * 用来获取任意元素的当前样式 
 * 参数： 
 *   obj 要获取样式的元素 
 *   name 要获取的样式的名字 
 * 
 * 在读取元素的样式时，如果元素没有设置样式， 
 * 则火狐、Chrome等浏览器会自动计算元素的样式值 
 * 而IE浏览器，有时用不会自动计算，而是返回默认值，比如宽度会返回auto 
 *    
 */ 
function getStyle(obj, name) { 
 
  //判断浏览器中是否含有getComputedStyle这个方法 
  if(window.getComputedStyle) { 
    //支持正常的浏览器 
    return getComputedStyle(obj, null)[name]; 
  } else { 
    //只支持IE 
    return obj.currentStyle[name]; 
  } 
 
} 
 
/* 
 * 定义一个专门用来向元素中添加class的函数 
 * 参数： 
 *   obj 要添加class属性的对象 
 *   cn 要添加的class的属性值 
 */ 
function addClass(obj, cn) { 
 
  //如果元素中有该class则不添加，没有才添加 
  if(!hasClass(obj, cn)) { 
    obj.className += " " + cn; 
  } 
 
} 
 
/* 
 * 创建一个函数检查一个元素中是否含有指定的class 
 * 如果有，则返回true。否则返回false 
 */ 
function hasClass(obj, cn) { 
 
  //创建正则表达式 
  var reg = new RegExp("\\b" + cn + "\\b"); 
 
  //返回检查结果 
  return reg.test(obj.className); 
} 
 
/* 
 * 用来从指定元素中删除class值的方法 
 */ 
function removeClass(obj, cn) { 
 
  //要删除一个class，就是将这个class替换为一个空串 
  //创建正则表达式 
  var reg = new RegExp("\\b" + cn + "\\b", "g"); 
 
  //判断obj中是否含有这个class 
 
  if(reg.test(obj.className)) { 
    //将内容替换为空串 
    obj.className = obj.className.replace(reg, ""); 
  } 
} 
 
/* 
 * 用来切换元素的class的方法 
 * 如果元素中含有该class，则删除 
 * 如果元素中没有该class，则添加 
 * 
 */ 
function toggleClass(obj, cn) { 
  //检查obj中是否含有cn 
  if(hasClass(obj, cn)) { 
    //有该class，则删除 
    removeClass(obj, cn); 
  } else { 
    //没有该class，则添加 
    addClass(obj, cn); 
  } 
 
}

注：图片自己找

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript基础知识之html5轮播图实例讲解（44）

- Author -

厚积薄发2017

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

两个DIV等高的JS的实现代码

Dec 23 Javascript

js判断输入是否为数字的具体实例

Aug 03 Javascript

利用JavaScript检测CPU使用率自己写的

Mar 22 Javascript

使用window.prompt()实现弹出用户输入的对话框

Apr 13 Javascript

JavaScript实现网页加载进度条代码超简单

Sep 21 Javascript

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

Jan 19 Javascript

用window.onerror捕获并上报Js错误的方法

Jan 27 Javascript

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

Mar 01 Javascript

详解jquery和vue对比

Apr 16 jQuery

微信小程序导航栏跟随滑动效果的实现代码

May 14 Javascript

弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

Aug 07 Javascript

简单聊聊Vue中的计算属性和属性侦听

Oct 05 Vue.js

javascript ES6中箭头函数注意细节小结

Feb 17 #Javascript

数组Array的排序sort方法

Feb 17 #Javascript

Bootstrap BootstrapDialog使用详解

Feb 17 #Javascript

数组Array的一些方法(总结)

Feb 17 #Javascript

深入理解javascript的getTime()方法

Feb 16 #Javascript

js实现兼容PC端和移动端滑块拖动选择数字效果

Feb 16 #Javascript

js时间戳格式化成日期格式的多种方法介绍

Feb 16 #Javascript