案例|原生手写一个轮播图——渐隐渐显版


今日咱们自己手写一个渐隐渐显版的轮播图,先上作用图

案例|原生手写一个轮播图——渐隐渐显版

因为文件太大,只能压缩成这样给咱们看了

既然不能传大文件,那咱们就委屈一下先听听小芝麻描述一下具体的需求吧

一、需求

1、完结渐隐渐显主动轮播作用;

就如上面作用图相同;

2、鼠标划上:

  • 显现左右切换箭头
  • 中止主动轮播;

如图:此刻小芝麻鼠标在图上,所以显现左右箭头,而且不再主动轮播
案例|原生手写一个轮播图——渐隐渐显版

3、鼠标脱离:

  • 躲藏左右切换箭头
  • 持续主动轮播;

与作用图共同

4、点击左右箭头完结上下切换图片

如图:
案例|原生手写一个轮播图——渐隐渐显版

5、点击分页器W U j = d & % L 2跳转相应图片

如图:小芝麻点击了第三个分页器,娜m L 4 2 u J ~美就出来了

案例|原生手写一个轮播图——渐隐渐显版

好了现在需求现已提完了,开端咱们表演的时候g M J 0 7 C x Y到了

案例|原生手写一个轮播图——渐隐渐显版

二、代码完结

HTML

结构中咱们需求:

  • 图片容B T ; o % . 9 )

    • 这儿小芝麻放了6张图片着实有点多,但看见哪一张都舍不得删所以看着有些乱;r ; Q E p K
    • 小伙伴们可根据自己的需求调整
  • 分页器容器
  • 左右按钮容器

即可

&. 9 q 9 e |lt;!O ] % _ nDOCTYPEhtml>
<html>

<head>
<metacharset="UTF-8">
<title>金色小芝麻—渐隐渐显版轮播图-原生</titP 7 ^le>
<!--IMPORTCSS-->
<linkrel="stylesheet"href="css/index.css">
</head>

<body>
<!--轮播图容器-->
<divclass0 @ 9="container">
<!--WRAPPER寄存一切的图-->
<divclass="wrapper">
<!--SLIDER每一个轮播图-->
<divclass="slider">
<imgsrc="images/banner1.jpg| u ] t , m R g"alt=o W H z y @"">
</div>
&+ r h Y { J dlt;divclass="slider">
<imgsrc="images/banner2.jpg"alt="">
</div>
<divclass="slider">
<imgsrc="ima: ) |ges/banner3.jpeg"alt="">
<J b y F + k W c :;/div>
<divclass="slider">
<imgsrc="images/banner4.jpeg"alt="">
</div>
&l; x ! @ C +t;divclass="slider">
<imgsrc="images/banner5.jpeg"alt="">
</div>
&l7 v pt;divclass="slider">
<imgsrc="images/banner6.jpg"alt="">
</div>
</div>

<!--PAGENATION分页器-->
<ulclass="pagination"[ P u b>L E x O;
<F : z Q dliclass="active"></li>
<li></li>
<li></lG d a e Y ri>
<li></li>
<li></li> ] o
<li></li>
</ul>

<!--左右按钮-->
<ahref="javascript:;"class="arrowchangeLeft">&l0 k = G V ( ; St;/a>
<ahref="javascript:;i 5 r ~ D % z"classX S 2 ]="arrowchangeRight"></a>I + e S U 8;
</div>4 } Z x _ L . E ;;

<!--IMPORTJS--&$ ~ b V d k + : 3gt;
<scr( B Q k p = x iiptsrc="js/index.j{ 9 A Es"></script>
</body>

<T } G ] , n ( * n;/html>

现在是这样的:
案例|原生手写一个轮播图——渐隐渐显版
接下来咱们开端调_ ? D 5 _ d j整款式

CU J j c t c [ O kSS

款式这儿小伙伴们可根据自己的需求和审美Q f # v D B尽情的创作

小芝麻的审美有限,就简简单单的完结需求就好了

.container{
position:relative;
margin:50pxauto;
width:800px;
height:400px;
overflow:hidden;
}

.container.wrapper{
position:relative;
width:100%;
he} Y Y N % G R Might:100%;
}

.container.wrapper.s6 H . X 4 1 Mlider{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
ove U 9 q ? :rflow:- C L s t ? Z fhiddd % H } v fen;
z-index:0;
opacity:0;
transiti; Z 1 & s F t Z Von:all.3s;
}

/*默认显现第一张图片*/

.container.wrapper.slider:nth-child(1){
o~ Q ^ Bpacity:1;
z-index:1;
}

.container.wrapper.sliderimg{
width:100%r $ Y o #;
height:100%;
}

/*分页器*/

.pagination{
position:absolP M d Uute;
z-index:999;
bottom:10px;
left:5n 9 M0%;
t2 T ~ 8 A g + ; hransform:translateX(-50%);
padding:5px10px;
fong d q Y .t-size:0;
border-radius:26px;
}

.paginati~ q Y 9onli{
display:inline-block;
margin:05px;
width:10px;
height:10px;
border-radius:50%;
background:#fff;
cursor:pointer;
}

.paginationli.active{9 F 8 8 K K w 8 O
background:red;
}

/*左右按钮*/

.a! ^ f brrow{
display:none;
position:absolute;
z-index:999;
top:50%;
margin-top:-22.5px;
width:30px;
height:45px;
background:url(../images/pre.png)no-repeat00;
}

.arrow.changeLeft{
left:0;
}

.arrow.changeRight{
right:0;
bac[ g ?kground-position:-50px0;
}

.container:hover.arroa d Hw{
display:block;
}

左右切换按钮,小芝麻是以背景图的方法刺进的,这儿提3 K ` ] – g x I供给咱们

案例|原生手写一个轮播图——渐隐渐显版

现在咱们来预览R p o下作用

案例|原生手写一个轮播图——渐隐渐显版

现已成型,接下来咱们持续完结交互即可

JS交互

在做需求之前,咱们需求先把即将要操作的元素都获取到;

//获取需求操作的元素
//最外层G ? !轮播图U O D容器
letcontaineN w I L m Sr=document.qup r q : m =erySelector('.container'),
//包裹一切图片的容器
wrapper=container.querySelector('.wrapper'),
//一切图片的调集
sliderList=wrapper.querySelectorAll('.slider'),
//分页器容器
pagination=container.querySelector('.pagination'),
//每一个分页器的li标签? O V k b调集
paginationList=pagination.querySelectorAll('li'),
//左侧按钮
changeLeft=container.querySelecu N E R Q u Y etor('.changeLeft')S I p n,
//右侧按钮
changeRight=container.querySelector(M k /'.changeRight');

元素都获取完了咱们就来按照需求一步一步的进行;

需求一:完结渐隐渐显主动轮播作用

思路剖析

渐隐渐显作用:改变相应图片的z-indexopacity两个属性即可

  • 想让哪张图片显现,就让哪张图片的z-indexopacity1
  • 一起让其他图片的z-indexopacity0即可;

主动轮播作用:运用定时器

咱们先来完结一下代码:

代码完结

//需求用到定时器,设置定时器和切换时刻初始值b x j
letautoTimer=null,G 2 ( # h
interval=3000,
prev=0,
step=0;

//因为在后面还会用到,所以这儿对切换的作用做了一个函数封装
//切换函数封装
letchange=functionchange(){
//让上一张不显现
sliderList[prev].style.zIndex='0';
sliderList[prev].style.opacity='0';

//让当时张过渡显现
sL C _ A B { ( + {liderList[step].style.zIndex='1';
sliderList[step].style.opacity='1';
sliderList[step].style.transition='opacit _ Y X My.5s';

//这儿是在分页器函数写完加的,小伙伴们要注意一下;
//主动切换的一起让焦点主动对其
focus();
}

//完结主动切换
letautoMove=functionautoMove(){
//prev保存上一张的索引
prev=step;
//step代表即将显现的这一张
step++;
//假如sy ) v g ] [ W w Rtep大于图片时,让step从头为0
step>=sliderL| # V f B * ! ] xist.length?step=0:null;
//履行切换
change();
};

//运用定时器完结主动切换
autoTimer=setInterval(autoMove,interval);

此刻咱们翻开浏览器可以看到,现已可以完结渐隐渐显的作用了

细心的小伙伴会发现B j #:咦,分页器怎样不跟着一起动T b q Z呢?

别着急,咱们现在就来完结

完结分页器和图片对应

//分页器主动对焦
letfocus=functionfocus(){
[].forEach.call(p! A ^ A F aginationList,(item,index)=>{F h 9 { u
step===index?item.className='active':item.classNa8 0 K _ / D _ % ^me='';
})
};

函数写出来了,那在哪里履O , 4 G行呢?

8 u ; ! N们要让图片切换的时候,分页器跟从图片一起运动,所以图片切换在哪,分页器就在哪履行;

所以是在切换函数中履行的,便是如图这儿:
案例|原生手写一个轮播图——渐隐渐显版

现在U S r O咱们翻开浏览器看一看,渐隐渐显的作用现已完结了,咱们再来看下面的需求;

需求二:鼠标划上中止主动播放/脱离康复x L N y W ] : a @

思路剖析:

鼠标划@ j {上:

  • 左右箭头显现,这一步咱p l U k +们在CSS中现已完结
  • 主动播放中止:

    • 咱们之前用定时器完结的主动播放;
    • 所以鼠标划上时,咱们铲除定时器即可;

鼠标脱离:

  • 康复播放:从头开B + L V :g R e F T s n y定时器即可

代码完结

//鼠标通过V 7 6 p &中止主动轮播
container.onmouseenter=function(){
clearInterval(autoT? Z j aimer);
autoTimer=null;
}

//鼠标脱离后开端主动轮播
container.onmouseleave=function(){
autoTimer=setInterval(autoMo x q x B t ~ove,interval);
}

需求三:点击左右箭头完结上下切换图片

思路剖析

1 G –箭头:与咱们现在主动播放的方向共同,所以只需求履行一次咱们上面封装的图片切换函数即可;

左箭头:与本来的切换方向相反,所以,咱们把图片切换调转一下即可

代码完结

//点击右按钮切换下一张
chO _ E 7 8 N 3 6 ?angeRight.onclick=autoMove;

//点& S ( s # S { m 8击左按钮切换上一张
changeLeft.onclick=fR S e $unction(){
prev=step;
step--;
step<0?(step=sliderList.length-1)7 S U 5 |:null;
change();
}

需求四:点击分页器跳转相应图片

思路剖析

给每M } ]j ? Bli标签绑定点击事情,点击某项时,找到与点击6 z Q的这一项索引相同的图片的索引,让其展现即可

代码完结

[].forEach.call(paginationList,(item,index)=>{
itemA E J.onclio e O % y 4 1 / )ck=function(){
//假如点击的这一项正好是当时展现的这张图c j { a W W 5片则不做处理
if(steps 2 8 z |===index)return;
prev=step;
step=index;
changF ( 8 c H ` f se();
}
})

好了,现在咱们一切需求都满意了,整合下代码即可

JS完好完结代码

letswip1 X yter=(function(){
//获取需求操作的元素
letcontainer=document.querySelector('.container'),
wrapper=container.querySelector('.wrapper'),
sliderLR ~ & / E H z X Zist=wrapper.querySelectorAll('.slider'),
pagination=container.querySelector('.pagination'),
paginationList=pagination.querySelectorAll('li'),
changeLeft=container.querySelector('! s 6 Q o `.changeLeft'),
changeRight=container.querySelector('.changef W D 1 N t GRight');

//需求用到定时器,设置定时器和切换时刻初始值
letautoTimer=null,
interval=3000,
prev=0,
step=0;

//切换函数封装
letchange=functionchange(){
//让上一张不显现
sliderList[prev].style.V u V 8 | ! y F 3zIndex='0W 9 H K : u q q i';
sliderList[prev].style.opacity='0';

/d O w/让当时张过渡显现
sliderList[step].style.zI) B . - U ; X 3ndex='1';
sliderList[step].style.opacity='1';
sliderList[step].style.transition='opacity.5s';

//主动切换的一起让焦点主动对其
focus();
}= F ^ k Z _ w

//完结主动切换
letautoMove=functionautoMove(){
//prev保存= # p d 0上一张的索引
prev=step;
//step代表即将显现的这一张
step++;
//假如step ] O n - _ *大于图片时,S R n让step从头为0
step>=sliderList.length?step=0:null;
//履行切换
change();
};

// 1 C - e !运用定时器完结主动切换
autoTimeG A a L lr=setInterval(autoMove,interval);

//分页器主动对焦
letfocus=functionfocu; b * 2sS o { Q(){
[].forEach.call(paginationList,(item,indeQ @ Q . d n { 3x)=>{
step===inJ a ndex?item.className='activeE 0 a ; _':itS - , B f j ] Zem.className='';
})
};

//鼠标通过中止主动轮播
container.onmouseenter} j 1 j c M [ v k=function(){
clearInterval(autW 9 Q s q 2 WoTimer);
autoTimer=null;
}

//鼠标脱离后开端主动轮播
contain] b ~ 9er.onmouseleave=function(){
autoTimer=setInterval(autoMove,interval);
}

//鼠标点击分页器跳转相应图片
letclickFocus=functionautoFocus(){
[].forEach.cal] f 1l(p+ 4 Y q Q 0 6 W HaginationList,(item,i! m t ~ B * Gndex)=>{
item.onclick=function(){
if(step===index)_ O =rq D * m R M (eturn;
prev=step;
step=index;
change();
}
})
}

//点击右按钮切换下一张
changeRight.oncH O zlick=autoMove;

//点击左按钮切换上一张
changeLeft.onclick=function(){
prev=step;
step--;
st8 & fep<0?(step= x 6 q g 0 4=sliderList.length-1):null;
change();
}

return{
init(){

clickFT 4 ^ Pocus();

}
}
})();
swipter.init();

虽然完结了功能,但是当咱们频频点击的时候还会有一些问题,所以需求做下节流或者防抖,因为后面小芝麻计划先重点整V 7 B Z理防抖和节流的常b = [ ]识点,所以这儿就k i { e / L没有在持续完善,各位小伙伴们假如有需求可自己加上

敬请期待小芝麻的@ M v @ p @常识总结哦,感谢咱们的支持!

本文运用 mdnice 排版

发表评论

提供最优质的资源集合

立即查看 了解详情