轮播图效果：

实现的功能：

1.鼠标移入，左右按钮显示

2.右下叫小圆点鼠标移入，进入下一张图

3.左右按钮点击，右下小圆点页跟随变更

4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）

5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片

实现代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>总有人比你富有，却比你更聪明更努力！</title>
  6.      <style type="text/css">
  7.          /* css 重置 */
  8.          * {
  9.              margin: 0;
  10.              padding: 0;
  11.              list-style: none;
  12.          }
  13.  
  14.          body {
  15.              background: #fff;
  16.              font: normal 12px/22px 宋体;
  17.          }
  18.  
  19.          img {
  20.              border: 0;
  21.          }
  22.  
  23.          a {
  24.              text-decoration: none;
  25.              color: #333;
  26.          }
  27.  
  28.          /* 本例子css */
  29.          .slideBox {
  30.              width: 790px;
  31.              height: 340px;
  32.              overflow: hidden;
  33.              position: relative;
  34.              border: 1px solid #ddd;
  35.              margin: 50px auto;
  36.          }
  37.  
  38.          .bd .hd {
  39.              height: 20px;
  40.              overflow: hidden;
  41.              position: absolute;
  42.              right: 5px;
  43.              bottom: 5px;
  44.              z-index: 1;
  45.          }
  46.  
  47.          .bd .hd ul {
  48.              overflow: hidden;
  49.              zoom: 1;
  50.              float: left!important;
  51.          }
  52.  
  53.          .bd .hd ul li {
  54.              float: left;
  55.              margin-right: 5px!important;
  56.              width: 20px;
  57.              height: 20px;
  58.              line-height: 20px;
  59.              font-weight: bold;
  60.              text-align: center;
  61.              background: #fff;
  62.              cursor: pointer;
  63.              border-radius: 50%;
  64.          }
  65.  
  66.          .bd .hd ul li.on {
  67.              background: #f00;
  68.              color: #fff;
  69.          }
  70.  
  71.          .slideBox .bd {
  72.              position: relative;
  73.              height: 100%;
  74.              z-index: 0;
  75.          }
  76.  
  77.          /* -----------------------  */
  78.          .slideBox .bd li {
  79.              zoom: 1;
  80.              vertical-align: middle;
  81.              left: 0;
  82.              top: 0;
  83.          }
  84.  
  85.          .slideBox .bd li.first {
  86.              z-index: 1;
  87.          }
  88.  
  89.          /* -----------------------  */
  90.          .slideBox .bd img {
  91.              width: 790px;
  92.              height: 340px;
  93.              display: block;
  94.          }
  95.  
  96.          .slideBox .prev,
  97.          .slideBox .next {
  98.              position: absolute;
  99.              left: 0;
  100.              top: 50%;
  101.              margin-top: -25px;
  102.              display: none;
  103.              width: 32px;
  104.              height: 40px;
  105.              background: rgba(0,0,0,0.3);
  106.              filter: alpha(opacity=50);
  107.              opacity: 0.5;
  108.              text-align: center;
  109.              font-size: 30px;
  110.              font-weight: bold;
  111.              color: #fff;
  112.              line-height: 40px;
  113.          }
  114.  
  115.          .slideBox .next {
  116.              left: auto;
  117.              right: 0;
  118.              background-position: 8px 5px;
  119.          }
  120.  
  121.          .slideBox .prev:hover,
  122.          .slideBox .next:hover {
  123.              filter: alpha(opacity=100);
  124.              opacity: 1;
  125.          }
  126.  
  127.      </style>
  128.  </head>
  129.  <body>
  130.  <div id="slideBox" class="slideBox">
  131.  
  132.      <div class="bd" id="bd">
  133.          <div class="hd">
  134.              <ul id="control">
  135.                  <li class="on"></li>
  136.                  <li></li>
  137.                  <li></li>
  138.                  <li></li>
  139.                  <li></li>
  140.              </ul>
  141.          </div>
  142.  
  143.          <ul>
  144.              <li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
  145.          </ul>
  146.          <a class="prev" id="prev" href="javascript:;" ><</a>
  147.          <a class="next" id="next" href="javascript:;">></a>
  148.      </div>
  149.  
  150.  </div>
  151.  </body>
  152.  </html>
  153.  <script>
  154.  
  155.      // 公共获取事件源函数
  156.      function $(id) {
  157.        return document.getElementById(id);
  158.      }
  159.      // 切换轮播图
  160.      function changImg(imgIndex) {
  161.          $('bigImg').src= imgArr[imgIndex];
  162.          console.log(imgIndex);
  163.          // 排他思想
  164.          for(var j = 0 ; j < liBtns.length ; j++) {
  165.              liBtns[j].className = "";
  166.          }
  167.          // 设置小红点样式
  168.          liBtns[imgIndex].className = 'on';
  169.      }
  170.      // 功能需求类似tab栏，也可参考线上轮播图效果
  171.      // 获取轮播图区
  172.      // 获取轮播图
  173.      var imgArr = [
  174.          "images/01.jpg",
  175.          "images/02.jpg",
  176.          "images/03.jpg",
  177.          "images/04.jpg",
  178.          "images/05.jpg"
  179.      ];
  180.      // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
  181.      $('bd').onmouseover = function () {
  182.          $('prev').style.display = "block";
  183.          $('next').style.display = "block";
  184.      }
  185.      $('bd').onmouseout = function () {
  186.          $('prev').style.display = "none";
  187.          $('next').style.display = "none";
  188.      }
  189.      // 记录当前图片下标-- 为了图片索引值同步
  190.      var imgIndex = 0;
  191.  
  192.      /* 计时器,3秒切换到下一张轮播图*/
  193.      var t; // 计时器变量
  194.      function interval() {
  195.          t = setInterval(
  196.              function () {
  197.                  imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
  198.                  // 设置下一张图片
  199.                  changImg(imgIndex);
  200.              }
  201.              ,3000);
  202.      }
  203.  
  204.      // 鼠标移入圆点区，关闭计时器
  205.      $('control').onmouseover = function () {
  206.          clearInterval(t);
  207.      }
  208.      // 鼠标移开圆点区，开启计时器自动切换轮播图
  209.      $('control').onmouseout = function () {
  210.          interval();
  211.      }
  212.      // 鼠标移入上，下一张图片的按钮是关闭计时器
  213.      $('next').onmouseover = function () {
  214.          clearInterval(t);
  215.      }
  216.      $('prev').onmouseover = function () {
  217.          clearInterval(t);
  218.      }
  219.  
  220.      // 把鼠标移出上下一张图片区域,开启计时器
  221.      $('next').onmouseout = function () {
  222.          interval();
  223.      }
  224.      $('prev').onmouseout = function () {
  225.          interval();
  226.      }
  227.      interval();
  228.  
  229.      // 圆点鼠标移到上面图片轮播
  230.      var liBtns = $('control').getElementsByTagName('li');
  231.      for (var i = imgIndex ; i < liBtns.length ; i++) {
  232.          // 设置当前按钮下标
  233.          liBtns[i].index = i;
  234.          liBtns[i].onmouseover = function () {
  235.              changImg(this.index);
  236.              imgIndex = this.index;
  237.          }
  238.      }
  239.  
  240.      /*上下轮播图*/
  241.      // 下一张轮播图
  242.      $('next').onclick = function () {
  243.          // 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播
  244.          imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
  245.          // 设置下一张图片
  246.          changImg(imgIndex);
  247.  
  248.      }
  249.      // 上一张轮播图
  250.      $('prev').onclick = function () {
  251.          // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
  252.          imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
  253.          // 设置上一张轮图片
  254.          changImg(imgIndex);
  255.      }
  256.  
  257.  </script>

下面是轮播图的小红点是JS动态生成的：

主要与上面代码的区别是：  灰色代码区的HTML结构部分  黄色代码区域的JS部分

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>总有人比你富有，却比你更聪明更努力！</title>
  6.      <style type="text/css">
  7.          /* css 重置 */
  8.          * {
  9.              margin: 0;
  10.              padding: 0;
  11.              list-style: none;
  12.          }
  13.  
  14.          body {
  15.              background: #fff;
  16.              font: normal 12px/22px 宋体;
  17.          }
  18.  
  19.          img {
  20.              border: 0;
  21.          }
  22.  
  23.          a {
  24.              text-decoration: none;
  25.              color: #333;
  26.          }
  27.  
  28.          /* 本例子css */
  29.          .slideBox {
  30.              width: 790px;
  31.              height: 340px;
  32.              overflow: hidden;
  33.              position: relative;
  34.              border: 1px solid #ddd;
  35.              margin: 50px auto;
  36.          }
  37.  
  38.          .bd .hd {
  39.              height: 20px;
  40.              overflow: hidden;
  41.              position: absolute;
  42.              right: 5px;
  43.              bottom: 5px;
  44.              z-index: 1;
  45.          }
  46.  
  47.          .bd .hd ul {
  48.              overflow: hidden;
  49.              zoom: 1;
  50.              float: left!important;
  51.          }
  52.  
  53.          .bd .hd ul li {
  54.              float: left;
  55.              margin-right: 5px!important;
  56.              width: 20px;
  57.              height: 20px;
  58.              line-height: 20px;
  59.              font-weight: bold;
  60.              text-align: center;
  61.              background: #fff;
  62.              cursor: pointer;
  63.              border-radius: 50%;
  64.          }
  65.  
  66.          .bd .hd ul li.on {
  67.              background: #f00;
  68.              color: #fff;
  69.          }
  70.  
  71.          .slideBox .bd {
  72.              position: relative;
  73.              height: 100%;
  74.              z-index: 0;
  75.          }
  76.  
  77.          /* -----------------------  */
  78.          .slideBox .bd li {
  79.              zoom: 1;
  80.              vertical-align: middle;
  81.              left: 0;
  82.              top: 0;
  83.          }
  84.  
  85.          .slideBox .bd li.first {
  86.              z-index: 1;
  87.          }
  88.  
  89.          /* -----------------------  */
  90.          .slideBox .bd img {
  91.              width: 790px;
  92.              height: 340px;
  93.              display: block;
  94.          }
  95.  
  96.          .slideBox .prev,
  97.          .slideBox .next {
  98.              position: absolute;
  99.              left: 0;
  100.              top: 50%;
  101.              margin-top: -25px;
  102.              display: none;
  103.              width: 32px;
  104.              height: 40px;
  105.              background: rgba(0,0,0,0.3);
  106.              filter: alpha(opacity=50);
  107.              opacity: 0.5;
  108.              text-align: center;
  109.              font-size: 30px;
  110.              font-weight: bold;
  111.              color: #fff;
  112.              line-height: 40px;
  113.          }
  114.  
  115.          .slideBox .next {
  116.              left: auto;
  117.              right: 0;
  118.              background-position: 8px 5px;
  119.          }
  120.  
  121.          .slideBox .prev:hover,
  122.          .slideBox .next:hover {
  123.              filter: alpha(opacity=100);
  124.              opacity: 1;
  125.          }
  126.  
  127.      </style>
  128.  </head>
  129.  <body>
  130.  <div id="slideBox" class="slideBox">
  131.  
  132.      <div class="bd" id="bd">
  133.          <div class="hd">
  134.              <ul id="control">
  135.  
  136.              </ul>
  137.          </div>
  138.  
  139.          <ul>
  140.              <li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
  141.          </ul>
  142.          <a class="prev" id="prev" href="javascript:;" ><</a>
  143.          <a class="next" id="next" href="javascript:;">></a>
  144.      </div>
  145.  
  146.  </div>
  147.  </body>
  148.  </html>
  149.  <script>
  150.      // 记录当前图片下标-- 为了图片索引值同步
  151.      var imgIndex = 0;
  152.      var t; // 计时器变量
  153.      // 公共获取事件源函数
  154.      function $(id) {
  155.        return document.getElementById(id);
  156.      }
  157.      // 切换轮播图
  158.      function changImg(imgIndex) {
  159.          $('bigImg').src= imgArr[imgIndex];
  160.          console.log(imgIndex);
  161.          // 排他思想
  162.          for(var j = 0 ; j < liBtns.length ; j++) {
  163.              liBtns[j].className = "";
  164.          }
  165.          // 设置小红点样式
  166.          liBtns[imgIndex].className = 'on';
  167.      }
  168.      // 功能需求类似tab栏，也可参考线上轮播图效果
  169.      // 获取轮播图区
  170.      // 获取轮播图
  171.      var imgArr = [
  172.          "images/01.jpg",
  173.          "images/02.jpg",
  174.          "images/03.jpg",
  175.          "images/04.jpg",
  176.          "images/05.jpg"
  177.      ];
  178.  
  179.      //自动生成li
  180.      // 默认设置第一个li的className是on
  181.      // 生成第一个默认li带并设置className = "on"
  182.      var liArr = [];
  183.      for(var i = 0 ; i < imgArr.length ; i++ ) {
  184.          liArr.push('<li></li>')
  185.      }
  186.      // 转换成字符串
  187.      $('control').innerHTML = liArr.join('');
  188.      // 设置属性
  189.      $('control').children[0].setAttribute("class","on")
  190.  
  191.      // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
  192.      $('bd').onmouseover = function () {
  193.          $('prev').style.display = "block";
  194.          $('next').style.display = "block";
  195.      }
  196.      $('bd').onmouseout = function () {
  197.          $('prev').style.display = "none";
  198.          $('next').style.display = "none";
  199.      }
  200.  
  201.      //下一张图片函数提取
  202.      function nextImg() {
  203.          imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
  204.          // 设置下一张图片
  205.          changImg(imgIndex);
  206.      }
  207.  
  208.      /* 计时器,3秒切换到下一张轮播图*/
  209.  
  210.      function interval() {
  211.          t = setInterval(nextImg,3000);
  212.      }
  213.  
  214.      // 鼠标移入圆点区，关闭计时器
  215.      $('control').onmouseover = function () {
  216.          clearInterval(t);
  217.      }
  218.      // 鼠标移开圆点区，开启计时器自动切换轮播图
  219.      $('control').onmouseout = function () {
  220.          interval();
  221.      }
  222.      // 鼠标移入上，下一张图片的按钮是关闭计时器
  223.      $('next').onmouseover = function () {
  224.          clearInterval(t);
  225.      }
  226.      $('prev').onmouseover = function () {
  227.          clearInterval(t);
  228.      }
  229.  
  230.      // 把鼠标移出上下一张图片区域,开启计时器
  231.      $('next').onmouseout = function () {
  232.          interval();
  233.      }
  234.      $('prev').onmouseout = function () {
  235.          interval();
  236.      }
  237.      interval();
  238.  
  239.      // 圆点鼠标移到上面图片轮播
  240.      var liBtns = $('control').getElementsByTagName('li');
  241.      for (var i = imgIndex ; i < liBtns.length ; i++) {
  242.          // 设置当前按钮下标
  243.          liBtns[i].index = i;
  244.          liBtns[i].onmouseover = function () {
  245.              changImg(this.index);
  246.              imgIndex = this.index;
  247.          }
  248.      }
  249.  
  250.      /*上下轮播图*/
  251.      // 下一张轮播图
  252.      $('next').onclick = nextImg;
  253.      // 上一张轮播图
  254.      $('prev').onclick = function () {
  255.          // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
  256.          imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
  257.          // 设置上一张轮图片
  258.          changImg(imgIndex);
  259.      }
  260.  
  261.  </script>

JavaScript--轮播图_带计时器的更多相关文章

  1. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  2. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  4. 超详细的原生JavaScript轮播图（幻灯片）的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  5. JavaScript 轮播图实例

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  6. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  8. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  9. jquery 广告轮播图

    轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...

随机推荐

  1. 表碎片处理方法OPTIMIZE

    来看看手册中关于 OPTIMIZE 的描述: OPTIMIZE [LOCAL | NO_WRITE_TO_BINLOG] TABLE tbl_name [, tbl_name] ... 如果您已经删除 ...

  2. MyBatis配置文件(二)－－settings配置

    settings是MyBatis中最复杂的配置,它能影响MyBatis底层的运行,大部分情况下使用默认值,只需要修改一些常用的规则即可.常用规则有自动映射.驼峰命名映射.级联规则.是否启动缓存.执行器 ...

  3. PhoneInfoga---用于电话号码的信息收集和OSINT侦察工具

    PhoneInfoga 是仅使用免费资源扫描电话号码的最先进工具之一. 目标是首先在任何国际电话号码上收集标准信息, 如国家,地区,运营商和线路类型,并且准确性非常高. 然后在搜索引擎上搜索足迹以尝试 ...

  4. 记一次msf入侵win10，并拍照

    好久没有玩kali了,刚才看到一位大佬msf渗透win10的思路,我感觉不错,我就来复现一下 kali :192.168.45.136 win10 : 192.168.45.137 1  首先,我们查 ...

  5. ubuntu下搜狗输入法待选框中文乱码问题解决（重启搜狗输入法）

    简单的三个命令就可以解决 killall fcitx //关闭fcitx killall sogou-qimpanel //关闭搜狗输入法 fcitx //打开fcitx

  6. 跟我一起做一个vue的小项目（三）

    接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...

  7. vue socketio如何使用及跨域问题

    我的后端使用的flask_socketio做服务端  前端使用的vue_socketio当客户端 vue.config.js配置 module.exports = { outputDir: proce ...

  8. spring源码学习之bean的加载（二）

    这是接着上篇继续写bean的加载过程,好像是有点太多了,因为bean的加载过程是很复杂的,要处理的情况有很多,继续... 7.创建bean 常规的bean的创建时通过doCreateBean方法来实现 ...

  9. [Array]283. Move Zeroes

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  10. linux apache vhost

    <VirtualHost *:80> DocumentRoot "/usr/www/yltgerp_old/" ServerName erp.yltg.com.cn E ...