HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
注意：根据自己图片大小来更改轮播图大小。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
/*去掉ul、ol、li源有的样式*/
ul, ol, li {
list-style: none;
}
/*设置图片样式为*/
img {
width: 100%;
height: 100%;
display: block; /*图片可见*/
}
/*设置最大div的样式*/
.banner {
width: 50%;
height: 60%;
position: absolute;
margin: 50px 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*设置ul的样式对齐方式为相对对齐*/
.banner>ul {
width: 100%;
height: 100%;
position: relative;
}
/*设置装图片的li样式*/
.banner>ul>li {
width: 100%;
height: 100%;
position: absolute; /* 绝对对齐*/
left: 0;
top: 0;
opacity: 0; /*完全透明*/
transition: opcity .5s linear; /* 平滑过渡*/
}
/*当用户点击后释放鼠标后图片的li生效*/
.banner > ul > li.active {
opacity: 1; /* 完全不透明*/
}
/*下方呈现的小按钮外围样式*/
.banner > ol {
width: 200px;
height: 60px;
position: absolute; /*绝对定位*/
left: 50%;
bottom: 50px;
background-color: coral;
opacity: 0.4;
transform: translateX(-50%); /*左边距减去自身的一半*/
display: flex; /*水平排列*/
justify-content: space-around; /*水平两端对齐*/
align-items: center; /*垂直居中对齐 */
border-radius: 80px; /*圆角*/
}
/*下方小圆按钮的样式*/
.banner > ol > li {
width: 20px;
height: 20px;
background-color: aliceblue;
border-radius: 50%; /*圆角50%*/
cursor: pointer; /*鼠标移动到此处变成小手*/
}
/*点击小按钮后释放鼠标后li生效*/
.banner > ol > li.active {
background-color: limegreen;
}
/*左右按钮*/
.banner>div {
width: 100px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%); /*上边距减去自身高度的一半*/
background-color: black;
opacity: 0.4; /* 透明度0.4*/
display: flex; /*摆脱文档流限制，相对定位*/
justify-content: center; /*内部元素和内容垂直居中*/
align-items: center; /*内部元素和内容水平居中*/
font-size: 90px; /*字体大小*/
color: aliceblue;
}
/*左边按钮样式*/
.banner>div.left {
left: 0; /* 左对齐*/
cursor: pointer; /*鼠标移动到此处变成小手*/
}
/*右边按钮样式*/
.banner>div.right {
right: 0; /* 右对齐*/
cursor: pointer; /*鼠标移动到此处变成小手*/
}
</style>
</head>
<body>
<div class="banner">
<ul class="imgBox">
<li class="active"><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<ol><!--自定义属性 自定义属性-->
<li data-i="0" class="active" data-c="pas"></li>
<li data-i="1" data-c="pas"></li>
<li data-i="2" data-c="pas"></li>
<li data-i="3" data-c="pas"></li>
</ol>
<div class="left"><</div> <!--<代表"<"-->
<div class="right">></div> <!--<代表">"-->
</div>
<script type="text/javascript">
//获取所有图片的li和所有焦点的li
var imgs=document.querySelectorAll("ul > li")
var point=document.querySelectorAll("ol > li")
//获取最大div的元素
var banner=document.querySelector(".banner")
//index表示第几张图片默认第0张显示
var index=0
//隐藏当前这种图片，显示第index张图片方法
//true表示切换到下一张图片
//false表示切换到上一张图片
function changeOne(type){
//隐藏第index张图片
imgs[index].className=''
//隐藏第index个按钮高亮（绿色）
point[index].className=''
//判断传过来的值是否是true，是就切换下一张图片
if(type===true){
index++
}else if(type===false){ //判断传过来的值是否是false，是就切换上一张图片
index--
}else{ //都不是说明点击是小圆点，就切换到type张图片
index=type
}
//判断index有没有越界，越了就从头开始或者从最后开始
if(index>=imgs.length){
index=0
}
if(index<0){
index=imgs.length-1
}
//为index张图片设置active属性
//图片是透明度设置不透明，
imgs[index].className="active"
//小圆点是设置高亮
point[index].className="active"
}
//单击判断调用changeOne(type)方法
banner.onclick=function(e){
//判断点击的是否是点击了左边的按钮
if(e.target.className==="left"){
changeOne(false)//如果是就调用方法，并传参false
}
//判断点击的是否是点击了右边的按钮
if(e.target.className==="right"){
changeOne(true) //如果是就调用方法，并传参true
}
//判断是否点击了小按钮（自定义属性判断，可以去看小圆点li里的（data-c））
if(e.target.dataset.c==="pas"){
//如果是再次通过自定义属性判断点击的哪一个小圆点，并把值传过去
var i=e.target.dataset.i-0
changeOne(i)
}
}
//自动切换下一张图片方法
setInterval(function(){
changeOne(true)
},5000)
</script>
</body>
</html>
HTML+CSS+Javascript实现轮播图效果的更多相关文章
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
随机推荐
- 使用.NET 6开发TodoList应用(3)——引入第三方日志库
需求 在我们项目开发的过程中,使用.NET 6自带的日志系统有时是不能满足实际需求的,比如有的时候我们需要将日志输出到第三方平台上,最典型的应用就是在各种云平台上,为了集中管理日志和查询日志,通常会选 ...
- MemoryCache 如何清除全部缓存？
最近有个需求需要定时清理服务器上所有的缓存.本来以为很简单的调用一下 MemoryCache.Clear 方法就完事了.谁知道 MemoryCache 类以及 IMemoryCache 扩展方法都没有 ...
- lvm 扩容
总体思路: 逻辑卷要扩容,先扩容对应卷组, 扩容卷组的方式: 添加新的物理卷(磁盘已有分区,扩容后新建分区:或者新加了一块硬盘创建了新的物理卷),vgextend myvg /dev/vdb 扩容,/ ...
- java面向对象类的继承~ 匿名类 ；多态特性；强制类型转换
类的继承 创建子类语法: 修饰符 class 子类名 extends 父类名{ } 匿名子类语法: 直接实例化,过程中通过匿名类 继承父类,在实例化过程中将子类匿名 <父类 ...
- 访问struts2的action页面出现白板问题
访问struts2的action页面出现白板问题 故需要设置拦截此action的拦截栈, <bean id="authenticationInterceptor" class ...
- 分布式系统一致性算法(Raft)
过去, Paxos一直是分布式协议的标准,但是Paxos难于理解,更难以实现,Google的分布式锁系统Chubby作为Paxos实现曾经遭遇到很多坑. 来自Stanford的新的分布式协议研究称为R ...
- [源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程
[源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程 目录 [源码解析] PyTorch 分布式之弹性训练(2)---启动&单节点流程 0x00 摘要 0x01 ...
- IDEA报错 Error:(24, 35) java: 常量字符串过长
修改设置
- Centos7使用Docker启动elasticsearch服务秒退
首先查看docker启动日志 docker logs -f 容器id 查看报错信息 OpenJDK 64-Bit Server VM warning: Option UseConcMarkSweepG ...
- c++11多线程常用代码总结
关于 好记性不如烂笔头 理解虽然到位,但是时间长了就容易忘. 本文仅总结自己经常忘记的知识点,非 详细解释多线程某些原理.概念. 抱着复习的态度总结此文. 本文参考: cppreference 欢迎指 ...