首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
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
台湾(1) SRF-S84(1) Panasonic(1) 南麂列岛(1) ICF-SW55(1) SRF-S83(1) ICF-SW7600GR(1) 根德(2) PL660(1) 松下(1)
You might like
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php单一接口的实现方法
2015/06/20 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
云网广告中的代码，提示出错，大家找找
2006/11/21 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
js 图片缩放（按比例）控制代码
2009/05/27 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
用C/C++来实现 Node.js 的模块（一）
2014/09/24 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
javascript实现数独解法
2015/03/14 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
自带气泡提示的vue校验插件（vue-verify-pop）
2017/04/07 Javascript
微信小程序 商城开发（ecshop ）简单实例
2017/04/07 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
美国新兴城市生活方式零售商：VILLA
2017/12/06 全球购物
菲律宾领先的在线时尚商店：Zalora菲律宾
2018/02/08 全球购物
意大利奢侈品多品牌集合店：TheDoubleF
2019/08/24 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
软件研发工程师岗位职责
2014/09/30 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers