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 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
随机推荐
- 【Azure Redis 缓存】Azure Cache for Redis 中如何快速查看慢指令情况(Slowlogs)
问题描述 当 Azure Redis 服务器负载过高的情况下,使用时就会遇见连接超时,命令超时,IO Socket超时等异常.为了能定位是那些因素引起的,可以参考微软官方文档( 管理 Azure Ca ...
- java 图形化工具Swing 颜色文件选择器 ；JColorChooser；JFileChoose
使用JColorChooser: JColorChooser用于创建颜色选择器对话框,该类的用法非常简单,该类主要提供了如下两个静态方法: (1),showDialog(Component compo ...
- 直接在filter过滤器代码里加org.apache.struts2.ServletActionContext.getRequest()会出现空指针情况
直接在filter过滤器代码里加org.apache.struts2.ServletActionContext.getRequest()获得request对象请注意啦,会出现空指针情况 请关注此处:
- 【进阶】uniapp复现微信相册功能之【图视频编辑 + 压缩】
基于uniapp + vue实现微信相册,在实现了微信相册的基础上增加以下功能 1: 图片编辑 2: 视频编辑 3: 文件压缩 技术实现 开发环境:HbuilderX + nodejs 技术框架:un ...
- Spring整合ActiveMQ，实现队列主题消息生产消费
1.引入依赖 pom.xml 1 <!-- activemq --> 2 <dependency> 3 <groupId>org.springframework&l ...
- 一种实用性较强的求IOU的算法（任意多边形之间的IOU）
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- PC chrome开启自带的dark mode
地址 复制下面的地址到chrome地址栏打开,再设置为 Enable 就可以开启了. chrome://flags/#enable-force-dark
- Now冥想：崩溃服务和性能服务助力提升应用质量
想就像心灵的"健身房",当遇到失眠或情绪问题时,我们可以通过冥想,抚平情绪波澜,享受放松时刻.<Now冥想>正是一款专注冥想与心理健康的应用.它基于国际先进的正念冥想理 ...
- Codeforces 931D：Peculiar apple-tree
D. Peculiar apple-tree time limit per test : 1 second memory limit per test : 256 megabytes input : ...
- 第五十个知识点：什么是BLS基于对的签名方案？
第五十个知识点:什么是BLS基于对的签名方案? BLS签名方案使用了椭圆曲线上了Weil对,本质上是一个在曲线上除n划分的双线性形式,使用 \(n^{th}\) 个单位根. 假设我们有一个椭圆曲线\( ...