这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实现了简单的轮播啦。

代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8" />
  5.      <title>淡入淡出轮播图</title>
  6.  <!-- css样式 -->
  7.      <style type="text/css">
  8.          /*清除边距*/
  9.          div,ul,li{
  10.              margin: 0;
  11.              padding: 0;
  12.          }
  13.  
  14.          /*首先准备一个放图片的容器*/
  15.          .container{
  16.              width: 500px;
  17.              height: 280px;
  18.              position: relative;
  19.              top: 100px;
  20.              left: 30%;
  21.              /*border: 1px solid #ccc;*/
  22.          }
  23.  
  24.          /*图片样式*/
  25.          .container img{
  26.              position: absolute;        /*把所有图片放在同一个位置*/
  27.              width: 100%;
  28.              transition-duration: 1s;    /*设置过渡时间*/
  29.              opacity: 0;                /*把所有图片变透明*/
  30.          }
  31.          /*图片显示开关*/
  32.          .container img.on{
  33.              opacity: 1;                /*用于显示图片*/
  34.          }
  35.  
  36.          /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
  37.          .left, .right{
  38.              position: absolute;
  39.              top: 30%;
  40.              width: 60px;
  41.              height: 100px;
  42.              line-height: 100px;
  43.              background-color: #666;
  44.              opacity: 0.5;
  45.              text-align: center;
  46.              font-size: 60px;
  47.              color: #ccc;
  48.              display: none;    /*先隐藏按钮*/
  49.              cursor: pointer;    /*设置鼠标悬停时的样式*/
  50.          }
  51.          .left{
  52.              left: 0;
  53.          }
  54.          .right{
  55.              right: 0;
  56.          }
  57.          .container:hover .left, .container:hover .right{
  58.              display: block;            /*鼠标悬停才容器范围内时显示按钮*/
  59.          }
  60.          .left:hover, .right:hover{
  61.              color: #fff;
  62.          }
  63.  
  64.          /*焦点*/
  65.          .container ul{
  66.              position: absolute;
  67.              bottom: 0;
  68.              max-width: 500px;
  69.              padding: 5px 200px;
  70.          }
  71.          .container ul li{
  72.              list-style: none;
  73.              float: left;
  74.              width: 10px;
  75.              height: 10px;
  76.              border-radius: 50%;
  77.              margin-left: 10px;
  78.              background-color: #ccc;
  79.              cursor: pointer;
  80.          }
  81.          .container ul li.active{
  82.              background-color: #fff;        /*焦点激活时的样式*/
  83.          }
  84.  
  85.      </style>
  86.  </head>
  87.  <body>
  88.      <div class="container">
  89.          <!-- 图片 -->
  90.          <!-- 先把第一张图片显示出来 -->
  91.          <img class="on" src="img/1.jpg" />
  92.          <img src="img/2.jpg" />
  93.          <img src="img/3.jpg" />
  94.          <img src="img/4.jpg" />
  95.          <img src="img/5.jpg" />
  96.  
  97.          <!-- 左右按钮 -->
  98.          <div class="left">&lt;</div>
  99.          <div class="right">&gt;</div>
  100.  
  101.          <!-- 焦点 -->
  102.          <ul>
  103.              <li class="active"></li>
  104.              <li></li>
  105.              <li></li>
  106.              <li></li>
  107.              <li></li>
  108.          </ul>
  109.      </div>
  110.  
  111.  <!-- js部分 -->
  112.      <script type="text/javascript">
  113.          //1、找到container下的所有img标签,li标签,左右按钮
  114.          var aImgs = document.querySelectorAll('.container img');
  115.          var aLis = document.querySelectorAll('.container li');
  116.          var btnLeft = document.querySelector('.container .left');
  117.          var btnRight = document.querySelector('.container .right');
  118.  
  119.          // //检验是否找到
  120.          // console.log(aImgs);
  121.          // console.log(aLis);
  122.          // console.log(btnLeft);
  123.          // console.log(btnRight);
  124.  
  125.          //点击事件
  126.          //点击按钮图片切换
  127.          var index = 0;        //当前图片下标
  128.          var lastIndex = 0;
  129.          btnRight.onclick = function(){
  130.              //记录上一张图片的下标
  131.              lastIndex = index;
  132.              //清除上一张图片的样式
  133.              aImgs[lastIndex].className = '';
  134.              aLis[lastIndex].className = '';
  135.  
  136.              index++;
  137.              index %= aImgs.length;    //实现周期性变化
  138.              //设置当前图片的样式
  139.              aImgs[index].className = 'on';
  140.              aLis[index].className = 'active';
  141.          }
  142.          //左边按钮类似
  143.          btnLeft.onclick = function(){
  144.              //记录上一张图片的下标
  145.              lastIndex = index;
  146.              //清除上一张图片的样式
  147.              aImgs[lastIndex].className = '';
  148.              aLis[lastIndex].className = '';
  149.  
  150.              index--;
  151.              if (index < 0) {
  152.                  index = aImgs.length - 1;
  153.              }
  154.              //设置当前图片的样式
  155.              aImgs[index].className = 'on';
  156.              aLis[index].className = 'active';
  157.          }
  158.      </script>
  159.  </body>
  160.  </html>

HTML学习之轮播图的更多相关文章

  1. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  2. ionic3-ng4学习见闻--(轮播图完美方案)

    ionic上 轮播图是最坑的插件了吧,各种bug和 问题. 事件也不好用.. 于是,我终于搞出来了一个完美的方案, 适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动 ...

  3. 03 uni-app框架学习：轮播图组件的使用

    1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...

  4. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  5. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  6. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  7. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  8. vue移动音乐app开发学习（三）：轮播图组件的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

  9. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

随机推荐

  1. UML类图详解和示例

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/UMLDescription UML类图概述 什么是UML ...

  2. set和push方法压入栈顶的值获取方法

    向值栈里面放数据(储存的位置在root域里面) 向值栈放数据有多种方式,往往我们只用其中一种 1.set方法压栈 1)在Action中获取值栈对象,使用set()方法向值栈存放数据 ActionCon ...

  3. CF EDU 1101D GCD Counting 树形DP + 质因子分解

    CF EDU 1101D GCD Counting 题意 有一颗树,每个节点有一个值,问树上最长链的长度,要求链上的每个节点的GCD值大于1. 思路 由于每个数的质因子很少,题目的数据200000&l ...

  4. 最短路算法 Dijkstra 入门

    dijkstra算法 是一种单源点最短路算法求出一个点到其他所有点的最短路. 给你这样的一个图,需要求出1号点到其他点的最短距离是多少. 首先我们开一个数组 d[N],d[x] 代表着从起点出发到x点 ...

  5. 【Offer】[49] 【丑数】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 我们把只包含因子2.3和5的数称作丑数( Ugly Number).求按从小到大的顺序的第1500个丑数.例如,6.8都是丑数,但14不 ...

  6. 大型公司java架构师面试实战讲解高清视频教程 15课

    目录: 01.面试必考之HashMap源码分析与实现02.探索JVM底层奥秘ClassLoader源码分析与案例讲解03.大型网站数据库瓶颈之数据库分库分表方案实践04.资料为图灵学院所有05.大型公 ...

  7. Vert.x Web之Router

    Vert.x Web 是一系列用于基于 Vert.x 构建 Web 应用的构建模块. Vert.x Web 的大多数特性被实现为了处理器(Handler),因此您随时可以实现您自己的处理器.我们预计随 ...

  8. Redis小白入门系列

    一.从NoSQL说起 NoSQL 是 Not only SQL 的缩写,大意为"不只是SQL",说明这项技术是传统关系型数据库的补充而非替代.在整个NoSQL技术栈中 MemCac ...

  9. eclipse搭建springmvc

    https://www.cnblogs.com/qixing/p/qixing.html

  10. 超级密码（BFS）

    Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进 ...