HTML轮播(3)
前言
现在给轮播加上可视化的点,实际这样的轮播已经算完成的了
CSS
#LB {
width: 100%;
height: 948px;
overflow: hidden;
position:relative;
}
#LB ul {
width: 100%;
height: 100%;
}
#LB ul li {
padding:0;
margin:0;
width:100%;
height:100%;
}
#LB ul li img {
width:100%;
height:100%;
}
input {
display:block;
width:40%;
height:32px;
background:rgba(52, 162, 255, 0.64);
border:none;
color:#fff;
padding:0px 5px;
margin:auto;
}
#LB .lb_li {
position: absolute;
top: 50%;
right: 0px;
display: inline-block;
transform: translateY(-20%);
z-index: 2;
width: 3%;
height: 100%;
}
#LB .lb_li li {
width: 20px;
height: 20px;
border-radius: 50px;
border: 1px solid #fff;
margin:5px 0px;
}
.on {
background:#fff;
}
HTML
<div>
<div style="position:fixed;top:0px;left:0px;width:100%;display:flex;z-index:2;">
<input type="button" value="上一张" onclick="Back()" />
<input type="button" value="下一张" onclick="Next()" />
</div>
<div id="LB">
<ul class="lb_li">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<ul class="lb_ul">
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b4256edfa635b6e87ea43d336c6a1e39&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F68%2F59%2F71X58PICNjx_1024.jpg" /></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b75fa0cf7e6c7ec2b84d6caa3c79bd54&imgtype=0&src=http%3A%2F%2Fpic24.nipic.com%2F20120906%2F2786001_082828452000_2.jpg" /></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=7be7885e9826ed5397017dbc980cb108&imgtype=0&src=http%3A%2F%2Fpic75.nipic.com%2Ffile%2F20150821%2F9448607_145742365000_2.jpg" /></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b4256edfa635b6e87ea43d336c6a1e39&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F68%2F59%2F71X58PICNjx_1024.jpg" /></li>
</ul>
</div>
</div>
JS
引用jq文件
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
代码
var Speed = 3000;//时隔几秒切换一次
var AnimaSpeed = 1000;//动画速度
var index = 0;//索引
var LBI = setInterval(Carousel, Speed);//设置定时器
//下一张图片
function Back() {
if (index > 0) {
index -= 1;
SetAnimate();
} else {
index = $("#LB .lb_ul li").length - 1;
SetAnimate();
}
Ul_list(index);
clearInterval(LBI);//清除定时器
LBI = setInterval(Carousel, Speed);//启动定时器
}
//上一张图片
function Next() {
if (index < $("#LB .lb_ul li").length - 1) {
index += 1;
SetAnimate();
} else {
index = 0;
SetAnimate();
}
Ul_list(index);
clearInterval(LBI);//清除定时器
LBI = setInterval(Carousel, Speed);//启动定时器
}
//鼠标移入暂停
$("#LB").mouseenter(function () {
clearInterval(LBI);//清除定时器
})
//鼠标移出继续
$("#LB").mouseleave(function () {
LBI = setInterval(Carousel, Speed);//启动定时器
})
function Carousel() {
//最基础的轮播
if (index + 1 == $("#LB .lb_ul li").length) {
$("#LB .lb_ul").css("margin-top", "0px")
index = 0;
}
if (index < $("#LB .lb_ul li").length) {
index++;
Ul_list(index);
}
SetAnimate();
}
function SetAnimate() {
$("#LB .lb_ul").animate({
"margin-top": "" + (-$("#LB .lb_ul li").height() * index) + "px"
}, AnimaSpeed)
}
function Ul_list() {
$.each($(".lb_li").children(), function (i) {
$(".lb_li").children()[i].classList.remove("on");
})
if ($(".lb_li").children()[index] != undefined) {
$(".lb_li").children()[index].classList.add("on");
} else {
$(".lb_li").children()[0].classList.add("on");
}
}
效果
这样就完成了轮播
END
HTML轮播(3)的更多相关文章
- 踩石行动:ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- JS案例之2——cycle元素轮播
元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- bash运行脚本的几种方式
转载自https://www.jianshu.com/p/ba6efda13e23 转载地址:http://www.jquerycn.cn/a_8354 bash shell 脚本执行的方法有多种,本 ...
- 性能之qps,并发数,相应时间
QPS:每秒处理的请求数.QPS = 并发数/请求平均处理时间. 请求响应时间=请求等待时间+网络时间+请求处理时间.假设请求处理时间不受影响,持续不变,实际请求数大于QPS,会影响请求响应时间,大量 ...
- Vue 3.0 来了,我们该做些什么?
靓仔路过,不要错过 想必 Vue3.0 发布这件事,大家都知道了. 我也是从朋友圈的转发得知此事,博客平台.公众号.朋友圈基本都有这么一条新闻,可见 Vue3.0 的被期待程度,因为 React 16 ...
- FTP服务端 FTP服务端搭建教程
FTP服务端搭建教程如下:一.需要准备以下工具:1.微型FTP服务端.2.服务器管理工具二.操作步骤:1.下载微型FTP服务端.(站长工具包可下载:http://zzgjb.iis7.com/ )2. ...
- JDK动态代理学习心得
JDK动态代理是代理模式的一种实现方式,其只能代理接口.应用甚为广泛,比如我们的Spring的AOP底层就有涉及到JDK动态代理(此处后面可能会分享) 1.首先来说一下原生的JDK动态代理如何实现: ...
- Redis中String类型的相关命令操作
String append 如果key已存在,则直接在value追加值,如果key不存在,则会插件一个新的value为空的key,然后在追加 127.0.0.1:6379> set name l ...
- Linux:改变世界的一次代码提交
摘要:如果选Linux社区历史上最伟大的一次 Git 代码提交,那一定是 Git 工具项目本身的第一次代码提交. 吾诗已成.无论大神的震怒,还是山崩地裂,都不能把它化为无形! -- 奥维德<变形 ...
- [De1CTF 2019]Giftbox 分析&&TPOP学习
[De1CTF 2019]Giftbox 刚进来我以为是直接给了shell,恐怖如斯. 随便扔了个命令,之后就没然后了,hhh,截包发现可能存在sql注入. 然后我就不会了... what i lea ...
- MGRE及实验
tunnel 隧道:一种的简单的VPN技术: 普通的tunnel为点到点网络类型: 生成隧道接口,流量通过路由查询后,若通过隧道接口转发时,需要在原有的三层报头前,再添加一个公有地址间的报头: 将两个 ...
- 实现select下拉框的无限加载(懒加载)
在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...