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 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
随机推荐
- CF1090M The Pleasant Walk 题解
Content 有一个长度为 \(n\) 的数组 \(a_1,a_2,a_3,...,a_n\),并已知有 \(k\) 个不相同的元素求最长连续的一段区间,使得这里面的元素互不相同. 数据范围:\(1 ...
- HTML标签一览
html标签属性大全 嵌套的html窗口<iframe > <iframe src="https://www.baidu.com"></iframe& ...
- Sharepoint 恢复列表文件
当在Sharepoint中恢复列表字段,列表数据时,恢复的是stp文件,可按照如下步骤恢复: 1.打开http://liuqiang17-1/sites/flsharepoint/_catalogs/ ...
- C++ 11新特性：std::future & std::shared_future) （转载）
上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...
- libevent源码学习（17）：缓冲管理框架
目录Libevent缓冲区类型Libevent缓冲区结构缓冲区的读出与写入缓冲区的读入与写出缓冲区水位机制缓冲区回调机制延迟回调机制Libevent缓冲区类型 Libevent中提供了多种 ...
- libevent源码学习（11）：超时管理之min_heap
目录min_heap的定义向min_heap中添加eventmin_heap中event的激活以下源码均基于libevent-2.0.21-stable. 在前文中,分析了小顶堆min_h ...
- iframe父子页面js之间的调用
父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...
- 【LeetCode】930. Binary Subarrays With Sum 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二分查找 字典 相似题目 参考资料 日期 题目地址: ...
- 【LeetCode】347. Top K Frequent Elements 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 解题方法 字典 优先级队列 日期 题目地址:https://l ...
- 【LeetCode】718. Maximum Length of Repeated Subarray 解题报告（Python）
[LeetCode]718. Maximum Length of Repeated Subarray 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxu ...