全屏banner及全屏轮播
一、全屏banner
1、设置网页图片全屏banner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.pic {
width: 100%;
height: 600px;
background: url("...") no-repeat center;
}
</style>
</head>
<body>
<div class="banner">
<div class="pic"></div>
</div>
</body>
</html>
二、全屏轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏轮播模板</title>
<style>
html,body,head,span,button,div,title {
margin: 0;
padding: 0;
}
.cont {
position: relative;
height: 600px;
}
.list{
position: relative;
}
.list div {
width: 100%;
height: 600px;
position: absolute;
opacity: 0;
transition: 1s; /*设置切换时间*/
}
.pic1 {
background: url(img/lbt01.jpg) no-repeat center red;
}
.pic2 {
background: url(img/lbt02.jpg) no-repeat center blue;
}
.pic3 {
background: url(img/lbt03.jpg) no-repeat center yellow;
}
.pic4 {
background: url(img/lbt04.jpg) no-repeat center green;
}
.pic5 {
background: url(img/lbt05.jpg) no-repeat center pink;
}
.btns {
position: absolute;
z-index: 6;
left: 50%;
bottom: 80px;
margin-left: -170px;
}
.btns span {
float: left;
width: 60px;
height: 5px;
margin-right: 10px;
background-color: rgba(255,255,255,0.3);
border-radius: 5px;
}
.buttons {
width: 1180px;
height: 600px;
margin: 0 auto;
position: relative;
}
.btn { /*左右切换按钮样式*/
position: absolute;
top: 50%;
margin-top: -26px;
width: 32px;
height: 52px;
font-size: 30px;
border-radius: 5px;
z-index: 6;
opacity: 0.5;
}
.btn-prev {
left: 0;
}
.btn-next {
right: 0;
}
.bgc {
background-color: white !important;
}
</style>
</head>
<body>
<div class="cont">
<div class="list">
<div class="pic1" data-index=0 style="opacity: 1; z-index: 2;"></div>
<div class="pic2" data-index=1></div>
<div class="pic3" data-index=2></div>
<div class="pic4" data-index=3></div>
<div class="pic5" data-index=4></div>
</div>
<div class="btns">
<span class="bgc"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="buttons">
<button class="btn btn-prev"> < </button>
<button class="btn btn-next"> > </button>
</div>
</div> <script>
var btn = document.getElementsByClassName("btn");
var imgs = document.querySelectorAll(".list div");
var btns = document.querySelectorAll(".btns span");
var cont = document.getElementsByClassName("cont")[0];
var indexes, timer = null;
for(let i=0; i<btns.length; i++){
btns[i].onmouseover = function(){ // 给所有下面的白色线条添加一个鼠标经过事件
animate(i);
}
} btn[0].onclick = function(){ // 上一张按钮
indexes = currentPage();
if(indexes == 0) indexes=5;
indexes--;
animate(indexes);
} btn[1].onclick = next; function next(){ // 下一张按钮
indexes = currentPage();
if(indexes == 4) indexes = -1;
indexes++;
animate(indexes);
} function animate(i){ // 动画函数
for(let j = 0; j<imgs.length; j++){
imgs[j].style.opacity = 0;
imgs[j].style.zIndex = 1;
btns[j].classList.remove("bgc");
}
imgs[i].style.opacity = 1;
imgs[i].style.zIndex = 2;
btns[i].classList.add("bgc");
} function currentPage() { // 返回当前页面
for(var i = 0; i<imgs.length; i++){
if(imgs[i].style.zIndex == 2){
return imgs[i].dataset.index;
}
}
} timer = setInterval(next,3000); // 设置自动播放
cont.onmousemove = function(){ // 鼠标移入时停止自动播放
clearInterval(timer);
}
cont.onmouseout = function(){ // 鼠标移出时又开始播放
timer = setInterval(next,3000);
}
</script>
</body>
</html>
全屏banner及全屏轮播的更多相关文章
- Android--图片轮播（banner）
使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本 } 或者引用本地li ...
- android 使用图片轮播图---banner 使用
转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...
- 029 Android 轮播图广告Banner开源框架使用
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
- Android 开发最牛的图片轮播控件，基本什么都包含了。
Android图片轮播控件 源码下载地址: Android 图片轮播 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能.因为ViewPager并不支持循环翻页, ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- html渐隐轮播
这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...
- ViewPager实现无限轮播踩坑记
最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...
- Android图片轮播控件
Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 使用步骤 Step 1.依赖banner Gradle dependenci ...
- 第三百七十三节，Django+Xadmin打造上线标准的在线教育平台—创建用户app，在models.py文件生成3张表，用户表、验证码表、轮播图表
第三百七十三节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表.验证码表.轮播图表 创建Django项目 项目 settings.py ...
随机推荐
- 泰拉瑞亚Linux主机打造指南
最近玩了泰拉瑞亚,一个2D版的我的世界,但苦于steam的联机太过不靠谱,经常会出现和朋友之间联机失败的问题,所以我把服务器放到了部署我博客的服务器,这样就可以通过IP直接让好友加入游戏了! 首先是购 ...
- 聊一聊MyBatis 和 SQL 注入间的恩恩怨怨
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...
- mongoDb性能提升
最近在弄MongoDB的时候 发现只按照官网的方式进行操作的话,性能不行,想着用单例模式封装一下,提升一下性能,代码如下: //引入mongodb相关的模块 const MongoClient = r ...
- 算法入门——二分查找，旅行商问题，大O表示法
一. 算法入门 博主在市面上发现了很多,很多有关书算法的书籍,但是真正能够让初学者易懂的算法书籍,只是一点点,以下我讲以 Aditya Bhargava写的一本关于算法的入门书籍,为参考,这本书非常的 ...
- VMware Workstation 虚拟机的安装及kali Linux 的安装
要用到虚拟机了,Windows平台的虚拟机现在主要用的是VMWare 和VirtuualBox了.VirtualBox作为一款免费的软件,用着还行.笔者这里主要介绍VMware的安装和使用 . 下载: ...
- 使用R进行空间自相关检验
「全局溢出」当一个区域的特征变化影响到所有区域的结果时,就会产生全局溢出效应.这甚至适用于区域本身,因为影响可以传递到邻居并返回到自己的区域(反馈).具体来说,全球溢出效应影响到邻居.邻居到邻居.邻居 ...
- disruptor 多生产者多消费者实战 四
一.创建event类 Order public class Order { private String id; private String name; private double price; ...
- 「从零单排HBase 04」HBase高性能查询揭秘
先给结论吧:HBase利用compaction机制,通过大量的读延迟毛刺和一定的写阻塞,来换取整体上的读取延迟的平稳. 1.为什么要compaction 在上一篇 HBase读写 中我们提到了,HBa ...
- Sequence to Sequence Learning with Neural Networks论文阅读
论文下载 作者(三位Google大佬)一开始提出DNN的缺点,DNN不能用于将序列映射到序列.此论文以机器翻译为例,核心模型是长短期记忆神经网络(LSTM),首先通过一个多层的LSTM将输入的语言序列 ...
- 关于form表单:hover没有修改表单子元素样式
原来在写todolist的时候遇到的一个问题 是关于form表单的hover属性设置背景颜色 想要实现的效果如下: 但是一开始直接给form加hover选择器的时候是这样: 可以看到这样子直接加会使得 ...