原生js实现简单轮播的淡入淡出效果
实现这种淡入淡出的轮播关键在于css的一种设置 首先它不能像传统的轮播显示隐藏 或者左右浮动
他应该让其固定定位使其重叠在一起 达到这种效果 然后设置c3动画属性 transition:1s;
具体代码如下 请君欣赏
* {
margin:;
padding:;
list-style: none;
}
body {
width: 100%;
height: 100%;
background-color: #666;
}
.container {
width: 650px;
height: 236px;
margin: 100px auto;
position: relative;
}
.container ul {
width: 650px;
height: 236px;
}
.container ul li {
width: 100%;
height: 100%;
position: absolute;
left:;
top:;
transition: 2s;
opacity:;
}
.container ul li img {
width: 100%;
height: 100%;
}
.container ul li:nth-child(1) {
opacity:;
}
.container ol {
position: absolute;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0);
}
.container ol li {
float: left;
margin: 0 10px;
}
.container ol li a {
width: 15px;
height: 15px;
background-color: #666;
display: inline-block;
border-radius: 50%;
}
.container ol a.active {
background: yellow;
}
HTML部分
<body>
<div class="container">
<ul>
<li><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>
<li><img src="./img/5.jpg" alt=""></li>
<li><img src="./img/6.jpg" alt=""></li>
</ul>
<ol>
<li><a class="active" href="#1"></a></li>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
<li><a href="#1"></a></li>
</ol>
</div>
<script src="./js/index.js"></script>
<script>
new Container();
</script>
</body>
JS部分
class Container{
constructor(){
this.oli=document.querySelectorAll("ul li");
this.ball=document.querySelectorAll("a");
this.box=document.querySelector(".container");
this.timer=null;
this.count=0;
this.init()
}
init(){
this.autoplay();
this.click();
this.mouse()
}
autoplay(){
this.timer=setInterval(()=>{
this.count++;
if(this.count==this.oli.length){
this.count=0;
}
this.change(this.count);
},2000)
}
change(index){
this.oli.forEach((item,i)=>{
item.style.opacity=0;
this.ball[i].classList.remove("active");
});
this.oli[index].style.opacity=1;
this.ball[index].classList.add("active")
}
click(){
//小圆点的点击事件
this.ball.forEach((item,index)=>{
item.onclick=()=>{
this.count=index
this.change(index)
}
})
}
mouse(){
//鼠标移入停止定时器 离开继续
this.box.onmouseover=()=>{
clearInterval(this.timer)
}
this.box.onmouseout=()=>{
this.autoplay()
}
}
}
原生js实现简单轮播的淡入淡出效果的更多相关文章
- 封装bt轮播图淡入淡出效果样式
<!--BT轮播图--> <div data-ride="carousel" class="carousel slide carousel_inn ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结
工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
随机推荐
- 微软智能云Azure – 中国首家官方支持CoreOS的公有云
北京2016年6月24日, 在由中国开源软件推进联盟(COPU)主办, 开源社协办,微软赞助的“第十一届开源中国开源世界高峰论坛”上,微软亚太研发集团云计算高级总监梁戈碧女士正式对外宣布一个令人振奋的 ...
- Linux ->> Apt-get命令安装软件
Apt全称Advanced Package Tool.Apt-get适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. 用法: apt-cache ...
- 求n的元素的最大最小值
public static int[] maxMin(int a[]) { int[] res = new int[2]; int len = a.length; if (len <= 0) { ...
- C++ virtual inheritance ZZ
虚继承 是面向对象编程中的一种技术,是指一个指定的基类,在继承体系结构中,将其成员数据实例共享给也从这个基类型直接或间接派生的其它类. 举例来说:假如类A和类B各自从类X派生(非虚继承且假设类X ...
- 记开发个人图书收藏清单小程序开发（四）DB设计
早上起来,又改动了一下: 主要是,将非常用信息全部拆分出来,让Table尽量的小,小到不能继续拆分了,这样区分DB逻辑.增加了FileBank存储Book的封面图片,统一管理图片资源. 新添加的Typ ...
- windows下安装配置RabbitMQ
安装部署 1.当前环境以及参考资料出处 部署环境:windows server 2008 r2 enterprise 官方安装部署文档:http://www.rabbitmq.com/install- ...
- C#中的多线程 - 高级多线程 z
原文:http://www.albahari.com/threading/part4.aspx 专题:C#中的多线程 1非阻塞同步Permalink 之前,我们描述了即使是很简单的赋值或更新一个字段也 ...
- Kafka与MQ的区别
作为消息队列来说,企业中选择mq的还是多数,因为像Rabbit,Rocket等mq中间件都属于很成熟的产品,性能一般但可靠性较强, 而kafka原本设计的初衷是日志统计分析,现在基于大数据的背景下也可 ...
- 关于项目中的DAL数据接入层架构设计
摘要:项目中对关系型数据库的接入再寻常不过,也有海量的ORM工具可供选择,一个一般性的DAL数据接入层的结构却大同小异,这里就分享一下使用Hibernate.Spring.Hessian这三大工具对D ...
- [转]删除MSSQL所有的约束及表格
--删除所有约束.表.视图等SQL脚本 --############################################### --删除所有外键约束 --################# ...