HTML学习之轮播图
这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为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"><</div>
<div class="right">></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学习之轮播图的更多相关文章
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- ionic3-ng4学习见闻--(轮播图完美方案)
ionic上 轮播图是最坑的插件了吧,各种bug和 问题. 事件也不好用.. 于是,我终于搞出来了一个完美的方案, 适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动 ...
- 03 uni-app框架学习：轮播图组件的使用
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- [vuejs短文]使用vue-transition制作小小轮播图
提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue移动音乐app开发学习（三）：轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
随机推荐
- 快速掌握SPSS数据分析
SPSS难吗?无非就是数据类型的区别后,就能理解应该用什么样的分析方法,对应着分析方法无非是找一些参考资料进行即可.甚至在线网页SPSS软件直接可以将数据分析结果指标人工智能地分析出来,这有多难呢 ...
- 用java实现取1-100之间的99个不重复的随机数 然后输出没有被取出的数字
package cn.kgc.springtest2.demo1.dao; import java.util.BitSet; /** * @author * @create 2019-08-02 17 ...
- poj 2763 Housewife Wind（树链剖分+单点查询+区间修改）
题目链接:http://poj.org/problem?id=2763 题意:给一个数,边之间有权值,然后两种操作,第一种:求任意两点的权值和,第二,修改树上两点的权值. 题解:简单的树链剖分. #i ...
- 堆实战(动态数据流求top k大元素,动态数据流求中位数)
动态数据集合中求top k大元素 第1大,第2大 ...第k大 k是这群体里最小的 所以要建立个小顶堆 只需要维护一个大小为k的小顶堆 即可 当来的元素(newCome)> 堆顶元素(small ...
- Wamp 新增php版本 教程
a.php版本下载:https://windows.php.net/download b.如果是apache环境下请认准 Thread Safe 版本 下载解压zip c.调整文件名为 php7. ...
- d3.js 制作简单的贪吃蛇
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...
- 用lnmp架构部署wordpress网站详细步骤
用lnmp架构部署wordpress网站 ①.下载和上传网站代码 用winscp或者xftp, 或者xshell下执行rz命令进行上传网站的包文件. ②.解压程序代码,并将程序代码保存到站点目录,并进 ...
- window下tomcat的下载安装和环境配置
一.下载安装tomcat 去官网:http://tomcat.apache.org/ 下载自己所需要的版本,解压在没有中文的文件夹路径下. 直接打开压缩包下面,进入bin目录,双击startup.b ...
- Java IO/输入与输出
File类 File类是IO包中唯一代表磁盘文件本身信息的类,而不是文件中的内容 File类定义了一些与平台无关的方法来操纵文件,例如,创建,删除文件和重命名文件 Java中的目录被当作一种特殊文件, ...
- SpringBoot 2 快速整合 | Hibernate Validator 数据校验
概述 在开发RESTFull API 和普通的表单提交都需要对用户提交的数据进行校验,例如:用户姓名不能为空,年龄必须大于0 等等.这里我们主要说的是后台的校验,在 SpringBoot 中我们可以通 ...