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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python统计日志ip访问数的方法
2015/07/06 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
迪奥美国官网:Dior美国
2019/12/07 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
班级体育活动总结
2014/07/05 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书