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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
react-router 路由切换动画的实现示例
Dec 03 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操作符与控制结构代码
2011/12/30 PHP
php 保留字列表
2012/10/04 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python中Collection的使用小技巧
2014/08/18 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
四风问题自查报告剖析材料
2014/02/08 职场文书
老师对学生的评语
2014/04/18 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
《失物招领》教学反思
2016/02/20 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python