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

代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>淡入淡出轮播图</title>

 <!-- css样式 -->

     <style type="text/css">

         /*清除边距*/

         div,ul,li{

             margin: 0;

             padding: 0;

         }

         /*首先准备一个放图片的容器*/

         .container{

             width: 500px;

             height: 280px;

             position: relative;

             top: 100px;

             left: 30%;

             /*border: 1px solid #ccc;*/

         }

         /*图片样式*/

         .container img{

             position: absolute;        /*把所有图片放在同一个位置*/

             width: 100%;

             transition-duration: 1s;    /*设置过渡时间*/

             opacity: 0;                /*把所有图片变透明*/

         }

         /*图片显示开关*/

         .container img.on{

             opacity: 1;                /*用于显示图片*/

         }

         /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/

         .left, .right{

             position: absolute;

             top: 30%;

             width: 60px;

             height: 100px;

             line-height: 100px;

             background-color: #666;

             opacity: 0.5;

             text-align: center;

             font-size: 60px;

             color: #ccc;

             display: none;    /*先隐藏按钮*/

             cursor: pointer;    /*设置鼠标悬停时的样式*/

         }

         .left{

             left: 0;

         }

         .right{

             right: 0;

         }

         .container:hover .left, .container:hover .right{

             display: block;            /*鼠标悬停才容器范围内时显示按钮*/

         }

         .left:hover, .right:hover{

             color: #fff;

         }

         /*焦点*/

         .container ul{

             position: absolute;

             bottom: 0;

             max-width: 500px;

             padding: 5px 200px;

         }

         .container ul li{

             list-style: none;

             float: left;

             width: 10px;

             height: 10px;

             border-radius: 50%;

             margin-left: 10px;

             background-color: #ccc;

             cursor: pointer;

         }

         .container ul li.active{

             background-color: #fff;        /*焦点激活时的样式*/

         }

     </style>

 </head>

 <body>

     <div class="container">

         <!-- 图片 -->

         <!-- 先把第一张图片显示出来 -->

         <img class="on" src="img/1.jpg" />

         <img src="img/2.jpg" />

         <img src="img/3.jpg" />

         <img src="img/4.jpg" />

         <img src="img/5.jpg" />

         <!-- 左右按钮 -->

         <div class="left">&lt;</div>

         <div class="right">&gt;</div>

         <!-- 焦点 -->

         <ul>

             <li class="active"></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </div>

 <!-- js部分 -->

     <script type="text/javascript">

         //1、找到container下的所有img标签,li标签,左右按钮

         var aImgs = document.querySelectorAll('.container img');

         var aLis = document.querySelectorAll('.container li');

         var btnLeft = document.querySelector('.container .left');

         var btnRight = document.querySelector('.container .right');

         // //检验是否找到

         // console.log(aImgs);

         // console.log(aLis);

         // console.log(btnLeft);

         // console.log(btnRight);

         //点击事件

         //点击按钮图片切换

         var index = 0;        //当前图片下标

         var lastIndex = 0;

         btnRight.onclick = function(){

             //记录上一张图片的下标

             lastIndex = index;

             //清除上一张图片的样式

             aImgs[lastIndex].className = '';

             aLis[lastIndex].className = '';

             index++;

             index %= aImgs.length;    //实现周期性变化

             //设置当前图片的样式

             aImgs[index].className = 'on';

             aLis[index].className = 'active';

         }

         //左边按钮类似

         btnLeft.onclick = function(){

             //记录上一张图片的下标

             lastIndex = index;

             //清除上一张图片的样式

             aImgs[lastIndex].className = '';

             aLis[lastIndex].className = '';

             index--;

             if (index < 0) {

                 index = aImgs.length - 1;

             }

             //设置当前图片的样式

             aImgs[index].className = 'on';

             aLis[index].className = 'active';

         }

     </script>

 </body>

 </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. python循环语句的一些题型

    1. 使用while循环输出1 2 3 4 5 6 8 9 10 i =1 while i <= 10: print(i,end=' ') i = i +1 if i == 7: i = i + ...

  2. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  3. codeforces 633F The Chocolate Spree （树形dp）

    题目链接:http://codeforces.com/problemset/problem/633/F 题解:看起来很像是树形dp其实就是单纯的树上递归,就是挺难想到的. 显然要求最优解肯定是取最大的 ...

  4. AC自动机 数组实现

    AC自动机的实现原理是KMP + 字典树. 学AC自动机之前要先去学KMP 和 字典树. 第一步先构建一个字典树. void Insert(){ , len = strlen(str); ; i &l ...

  5. CF 435B Little Pony and Harmony Chest

    Little Pony and Harmony Chest 题解: 因为 1 <= ai <= 30 所以  1 <= bi <= 58, 因为 59 和 1 等效, 所以不需 ...

  6. lightoj 1057 - Collecting Gold（状压dp）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1057 题解:看似有点下记忆话搜索但是由于他是能走8个方向的也就是说两点的距离其 ...

  7. yzoj1568: 数字组合 题解

    题意 从n个数中选出和为m的组合个数(输入顺序不同的数是不同的) 输入样例: 4 4 1 1 2 2 输出样例 3 我们把每个数看作一件物品,它的重量就是它的值,价值就是1,而和m即为背包的容积,故背 ...

  8. 原来JS是这样的 - 对象属性

    引子 在上一篇(原来JS是这样的 (2))刚发布的时候就阅读了那篇文章的人可能会注意到那篇曾用过"JavaScript 中万物皆对象"的说法,而在随后我发现错误后立即更新改掉了这个 ...

  9. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  10. mariadb 远程访问报：Host xxx is not allowed to connect to this MariaDb server

    刚开始试的是: 结果报错了,哎,这折腾的. 继续折腾,加个密码试试: 再用Navicat试试,果然成功了.