首先看下效果图

明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播

css代码

<style>
* {margin:0; padding:0;}
li{list-style:none; } #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
#div1 ul li.ac{z-index: 5;opacity: 1;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>

body中的代码

 <div id="div1">
<ul>
<li class="ac"><a href="javascript:alert(0);"><img src="/1.jpg" /></a></li>
<li><a href="javascript:alert(1);"><img src="/2.jpg" /></a></li>
<li><a href="javascript:alert(2);"><img src="/3.jpg" /></a></li>
<li><a href="javascript:alert(3);"><img src="/4.jpg" /></a></li>
<li><a href="javascript:alert(4);"><img src="/5.jpg" /></a></li>
</ul>
<ol>
<li class="ac">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<a href="javascript:;" id="goPrev">&laquo;</a>
<a href="javascript:;" id="goNext">&raquo;</a>
</div>

js代码

 class LB{

         constructor(){

             this.div = document.querySelector('#div1'),
this.imgs = this.div.querySelectorAll('ul li'),
this.btns = this.div.querySelectorAll('ol li'),
this.goPrev = document.querySelector('#goPrev'),
this.goNext = document.querySelector('#goNext'); this.iNow = 0
this.iLast = 0
this.timer = null this.BtnsEvent()
this.goEvent()
this.gotimer() } BtnsEvent(){ Array.from(this.btns).forEach((btns,i) => { this.btns[i].onclick = () => {
this.iLast = this.iNow
this.iNow = i
this.change()
}
})
} goEvent(){ //向->切换
this.goNext.onclick = () => { this.iLast = this.iNow
this.iNow == this.btns.length-1? this.iNow=0:this.iNow++
this.change()
} //向<-切换
this.goPrev.onclick = () => { this.iLast = this.iNow
this.iNow == 0? this.iNow=this.btns.length-1:this.iNow--
this.change()
} } gotimer(){ this.timer = setInterval(this.goNext.onclick,2000) this.div.onmouseenter = () => {
clearInterval(this.timer)
} this.div.onmouseleave = () => { this.timer = setInterval(this.goNext.onclick,2000)
}
} //更改图片
change(){ this.btns[this.iLast].className = ''
this.imgs[this.iLast].className = ''
this.btns[this.iNow].className = 'ac'
this.imgs[this.iNow].className = 'ac' } } var lb =new LB('#div1')

效果已实现

js中用面向对象的思想——淡入淡出轮播图的更多相关文章

  1. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  8. js+jq 淡入淡出轮播(点击+定时+鼠标进入移出事件)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. js原生选项卡(包含无缝滚动轮播图)一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

随机推荐

  1. WPF 将字体文件 添加到 资源文件,并在后台代码使用

    先看结果 1.将字体文件,导入到资源文件,如: 添加后,自动生成 2.在窗体xaml中添加如: 3.在xaml窗体对应的cs文件中,为TextBlock指定字段 创建一个字段对象,并指定字体文件的所在 ...

  2. 基于Docker搭建大数据集群(四)Spark部署

    主要内容 spark部署 前提 zookeeper正常使用 JAVA_HOME环境变量 HADOOP_HOME环境变量 安装包 微云下载 | tar包目录下 Spark2.4.4 一.环境准备 上传到 ...

  3. Spring boot 官网学习笔记 - Spring Boot 属性配置和使用(转)-application.properties

    Spring Boot uses a very particular PropertySource order that is designed to allow sensible overridin ...

  4. 手把手创建gulp

    这几天安装gulp踩了不少坑,现在讲解一个入门的案例解析: ==首先大家要确保node.npm.npx.gulp安装是否成功 == 这些安装都是傻瓜式安装,大家可以找到相应的教材. 创建一个自己的文件 ...

  5. @Data注解getset不起作用

    在idea的setting安装Lombok插件,重启idea

  6. AVR单片机教程——数字IO寄存器

    前两篇教程中我们学习了LED.按键.开关的基本原理,数字输入输出的使用以及两者之间的关系.我们用到了 pin_mode . pin_read 和 pin_write 这三个函数,实际上它们离最底层(至 ...

  7. Kubernetes 系列(二):Deployment 扩容

    (1)首先我们创建一个nginx的Deployment,采用官方的yaml: kubectl create -f https://kubernetes.io/docs/user-guide/nginx ...

  8. asp.net core刷新css缓存

    在非spa程序开发的时候.css经常会因为浏览器的缓存机制导致不刷新. 很多前端为了应对这个问题,都会引入webpack或者gulp等工具来处理css缓存的问题. 但是作为一个偏服务器端的程序员来说. ...

  9. Java 2019 生态圈使用报告,这结果你赞同吗?

    这是国外一机构调查了 7000 名开发者得出来的 Java 2019 年生态圈工具使用报告,主要调查了 Java 版本.开发框架.web 服务器等使用情况.虽然只有 7000 名开发者参与调查,这数目 ...

  10. 网页布局——grid语法属性详解

    grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它未来不久会对它有很好的支持,目前则需要使用过时的语法.我相信不久的将来grid将成为每一个前端工作人员必备的布局技能. 属 ...