js 透明度轮播图
js 透明度轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小潘的轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 700px;
height: 400px;
border: 3px solid red;
position: relative;
}
.slider .list .item{
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
}
img{
width: 700px;
height: 400px;
}
.slider .list .item:first-of-type {
opacity: 1;
}
.slider .next, .slider .last {
position: absolute;
top: 200px;
}
.slider .next {
left: 670px;
}
</style>
</head>
<body>
<div class="slider">
<ul class="list">
<li class="item"><img src="./img/2.jpg"></li>
<li class="item"><img src="./img/1.jpg"></li>
<li class="item"><img src="./img/3.jpg"></li>
<li class="item"><img src="./img/4.jpg"></li>
</ul>
<button class="last" onclick="vary(0)">last</botton>
<button class="next" onclick="vary(1)">next</botton>
</div>
<script>
var now = 0, next = 1;
var list = document.getElementsByClassName("item");
const vary = (flag) => {
now = flag === 1 ? (now + 1) %4 : (now +3) %4;
next = flag === 1 ? (next + 1) %4 : (next +3) %4;
list[now].style.opacity = 0;
list[next].style.opacity = 1;
}
setInterval ( () => {
vary(1);
} , 2000);
</script>
</body>
</html>
js 透明度轮播图的更多相关文章
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
随机推荐
- django 各项配置基本设置
setting中一些设置例子 mysql数据库连接设置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ...
- 阿里限流神器Sentinel夺命连环 17 问？
1.前言 这是<spring Cloud 进阶>专栏的第五篇文章,这篇文章介绍一下阿里开源的流量防卫兵Sentinel,一款非常优秀的开源项目,经过近10年的双十一的考验,非常成熟的一款产 ...
- css的公共属性及原因
在我们写多个网页的时候,会发现总会遇到很多相同的css样式,若是每次都要在网页代码中写,会浪费时间,同时也会消耗浏览器和计算机的性能.因此,我个人将我敲代码过程中的经常用到的css样式总结了一下.再用 ...
- 由于坏块导致DG的mrp0进程中断
由于坏块导致DG的mrp0进程中断1.Environment11.2.0.4 ADG 2.SymptomsDG的mrp0进程中断,重启后,还是卡住.查看alert,在1.47存在报错,进一步查看trc ...
- 微服务架构理论&SpringCloud
一.什么是微服务? 微服务是一种程序架构模式,它提倡将单体应用程序划分成若干的小服务模块,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机制 ...
- openssl 生成证书上 grpc 报 legacy Common Name field, use SANs or temporarily enable Common Name matching with GODEBUG=x509ignoreCN=0
最近用传统的方式 生成的证书上用golang 1.15. 版本 报 grpc 上面 ➜ ~ go version go version go1.15.3 darwin/amd64 上面调用的时候报错了 ...
- 20 行代码：Serverless 架构下用 Python 轻松搞定图像分类和预测
作者 | 江昱 前言 图像分类是人工智能领域的一个热门话题.通俗解释就是,根据各自在图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法. 它利用计算机对图像进行定量分析,把图像或图像中 ...
- 洛谷4631 [APIO2018] Circle selection 选圆圈 （KD树）
qwq纪念AC450 一开始想这个题想复杂了. 首先,正解的做法是比较麻烦的. qwqq 那么就不如来一点暴力的东西,看到平面上点的距离的题,不难想到\(KD-Tree\) 我们用类似平面最近点对那个 ...
- 👊 Spring技术原理系列（7）带你看看那些可能你还不知道的Spring特性技巧哦！
前提介绍 本文主要介绍相关Spring框架的一些新特性问题机制,包含了一些特定注解方面的认识. @Lazy可以延迟依赖注入 @Lazy注解修饰在类层面! @Lazy @Service public c ...
- FastAPI 学习之路（十五）响应状态码
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...