第九周第二天笔记之渐隐渐现轮播图实例es6版面向对象+原生JS
作者:
果木山 | 来源:发表于
2018-09-20 23:13 被阅读0次
1 渐隐渐现轮播图实例之es6面向对象+原生JS
- 思路：
- 目的：使页面在特定时间间隔后，不断的改变图片，添加一个效果，使其达到渐隐渐现的显现；
- 整体思想：将所有图片定位在一个位置，让其相互覆盖，通过改变层级来使指定的图片显示在最上面，添加一个效果，目的是将透明度从0改变到1的过程，慢慢变化；
- 知识点：
- 封装的animate()函数的调用执行，是针对window来执行的，向里面传入的实参中，可以是实例的一些数据
- for循环中用var声明定义i，不会形成私有作用域，所以添加事件后，事件中的i是错的，但是可以用let来声明定义i，这样每循环一次就会形成私有作用域，保存住实时i，当添加事件后，里边i为实时i，相当于闭包思想；
- 构造函数中的函数中添加事件后，事件中的this不再是实例，所以需要在事件外新建一个变量赋值实例，然后在事件中使用该变量；
- 代码：
//创建类
class Fand{
constructor(opt){
opt=opt||{};
//获取元素
this.oWrap=opt.ele;
this.duration=opt.duration || 1000;
this.boxBanner=utils.getByClass("boxbanner",this.oWrap)[0];
this.aImg=this.oWrap.getElementsByTagName("img");
this.oUl=this.oWrap.getElementsByTagName("ul")[0];
this.aLi=this.oWrap.getElementsByTagName("li");
this.aLeft=utils.getByClass("Left")[0];
this.aRight=utils.getByClass("Right")[0];
this.data=null;
this.n=null;
this.timer=null;
this.init();
}
init(){
//获取数据
this.getData1();
//绑定数据
this.bind();
//图片懒加载，添加定时器，目的是像延迟加载
setTimeout(this.showImg.bind(this),1000);
//自动轮播
this.timer=setInterval(this.autoMove.bind(this),3000);
}
//获取数据
getData1(){
var _this=this;
var xml=new XMLHttpRequest();
xml.open("GET","data/data5.txt?"+Math.random(),false);
xml.onreadystatechange=function () {
if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){
_this.data=utils.jsonParse(xml.responseText);
}
};
xml.send();
}
//绑定数据
bind(){
var str="";
var strli="";
for(var i=0; i<this.data.length; i++){
var cur=this.data[i];
str+=`<img src="" realImg="${cur.imgSrc}" alt=""/>`;
strli+=i==0?`<li class="active"></li>`:"<li></li>";
}
this.boxBanner.innerHTML=str;
utils.css(this.aImg[0],{
zIndex:1,
opacity:1
});
this.oUl.innerHTML=strli;
this.oUl.style.zIndex=1;
}
//图片懒加载
showImg(){
for(var i=0; i<this.aImg.length; i++){
this.lazyImg(this.aImg[i]);
}
}
lazyImg(img){
var frgImg=new Image();
frgImg.src=img.getAttribute("realImg");
frgImg.onload=function () {
img.src=this.src;
frgImg=null;
};
frgImg.onerror=function () {
img.style.backgroundColor="red";
frgImg=null;
}
}
//自动轮播
autoMove(){
this.n++;
this.n%=this.aImg.length;
//n取值为1,2,3,0,1,2,3,0,1
this.setBanner();
}
setBanner() {
//哪张图片的索引等于this.n，就让哪张图片显示
for (var i = 0; i < this.aImg.length; i++) {
if (i == this.n) {
this.aImg[i].style.zIndex = 1;
//运动效果
//animate函数是window调用，然后在实例中传入实参，实参中的this指向当前实例；
animate({
ele: this.aImg[i],
target: {opacity: 1},
duration: this.duration,
callback:function () {
//在封装animate函数时，设置回调函数中的this为元素
var siblings=utils.siblings(this);
for(var i=0; i<siblings.length; i++){
utils.css(siblings[i],"opacity",0);
}
}
})
} else {
utils.css(this.aImg[i], "zIndex", 0);
}
}
//焦点跟随自动轮播
this.bannerTip();
}
bannerTip(){
for(var i=0; i<this.aLi.length; i++){
/*if(i==this.n){
this.aLi[i].className="active";
}else{
this.aLi[i].className="";
}*/
this.aLi[i].className=i==this.n?"active":null;
}
}
}
//升级版
class Fina extends Fand{
constructor(opt){
super(opt);
this.Event();
}
Event(){
//鼠标移入停止，移出继续
this.overOut();
//焦点手动点击切换
this.handlebtn();
//左右按钮手动点击切换
this.handLeftright();
}
overOut(){
var _this=this;
this.oWrap.onmouseover=function () {
clearInterval(_this.timer);
_this.aLeft.style.display=_this.aRight.style.display="block";
};
this.oWrap.onmouseout=function () {
_this.aLeft.style.display=_this.aRight.style.display="none";
_this.timer=setInterval(_this.autoMove.bind(_this),3000);
}
}
handlebtn(){
var _this=this;
for(let i=0; i<this.aLi.length; i++){
this.aLi[i].onclick=function () {
//for循环中，用let设置，则每次循环均形成一个私有作用域，相当于闭包，保存住i值
_this.n=i;
_this.setBanner();
}
}
}
handLeftright(){
var _this=this;
this.aRight.onclick=function () {
_this.autoMove();
};
this.aLeft.onclick=function () {
if(_this.n<=0){
_this.n=_this.aImg.length;
}
_this.n--;
_this.setBanner();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐隐渐现轮播图实例</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 750px;
height: 290px;
margin: 20px auto;
position: relative;
background: url("image/7.png") center no-repeat;
background-size: cover;
}
.wrap .boxbanner{
position: relative;
width: 750px;
height: 290px;
}
.wrap .boxbanner img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
filter:alpha(opacity:0);
}
.wrap ul{
height: 20px;
position: absolute;
right: 40px;
bottom: 20px;
}
.wrap ul li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: lightslategray;
margin-left: 20px;
}
.wrap ul li.active{
background-color: red;
}
.wrap a{
position: absolute;
width: 43px;
height: 67px;
top: 50%;
margin-top: -34px;
background: url("image/6.png") no-repeat lightslategray;
opacity: 0.8;
filter: alpha(opacity:80);
z-index: 1;
display: none;
}
.wrap a:hover{
opacity: 1;
filter: alpha(opacity:100);
}
.wrap a.Left{
left: 20px;
background-position: 0 0;
}
.wrap a.Right{
right: 20px;
background-position: -62px 0;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="boxbanner">
<!--<img src="image/1.jpg" alt=""/>
<img src="image/2.jpg" alt=""/>
<img src="image/3.jpg" alt=""/>
<img src="image/4.jpg" alt=""/>-->
</div>
<ul>
<!--<li class="active"></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href="javascript:void(0);" class="Left"></a>
<a href="javascript:void(0);" class="Right"></a>
</div>
<script src="JS/utils.js"></script>
<script src="JS/moveEffect.js"></script>
<script src="JS/animatSuper.js"></script>
<script src="JS/lunbo.js"></script>
<script>
var oWrap=document.getElementById("wrap");
/*var f1=new Fand({
ele:oWrap,
duration:700
});*/
var f1=new Fina({
ele:oWrap,
duration:700
});
</script>
</body>
</html>
本文标题：第九周第二天笔记之渐隐渐现轮播图实例es6版面向对象+原生JS
本文链接：https://www.haomeiwen.com/subject/eeyonftx.html
网友评论