这今天小编带大家写一个js的轮播图效果,这个轮播图包括了点击上一张,下一张按钮和导航小圆点的点击切换。
轮播图的切换有两种方式,一种是切换图片,还有一种就是存放图片的容器,改变容器的位置,让其往左或往右整体移动。
下面给大家看一下两种方式区别:
上面这种就是直接切换图片方式来实现轮播图,这种方式相较于第二种改变位置的方式来说少了过渡动画的效果。所以小编今天在这里着重讲解一下第二种方式。
首先我们要先明白第二种改变位置是怎样改变的。
先给大家上html代码,看一下图片是怎样放的
<div class="wrapper">
<ul class="sliderPage">
<li><img src="./image/1.jpg" alt=""></li>
<li><img src="./image/2.jpg" alt=""></li>
<li><img src="./image/3.jpg" alt=""></li>
<li><img src="./image/4.jpg" alt=""></li>
<li><img src="./image/1.jpg"