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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
Vue.use源码学习小结
Jun 20 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
JavaScript实现缓动动画
Nov 25 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
You might like
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php生成验证码函数
2015/10/20 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
laravel请求参数校验方法
2019/10/10 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python烟花效果的代码实例
2020/02/25 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
2014年教师培训的自我评价
2014/01/03 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书