1.思路
轮播图的实现,实际上是操作ul的边距值(本质就是操作可视范围的显示隐藏),使用盒子装着这个较长的图片画廊,盒子的宽度,就是图片的宽度,画廊的长度,可以动态设置,但是作为讲解就直接给出固定的大小了。
2.布局
1.div(盒子)
<!-- 基本模型搭建,最后一张图片应该是第一张图片的 这样看起来连贯比较丝滑-->
<div class="jd_banner">
<ul>
<li>
<a href="#"><img src="image/l8.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l6.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l7.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="image/l8.jpg" alt=""></a>
</li>
</ul>
<ul id="now_list">
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li style="display: none;"></li>
</ul>
</div>
补充:给盒子开启相对定位(很重要)
.jd_banner {
position: relative;
width: 100%;
overflow: hidden;
}
<!-- 导航点 -->
.jd_banner ul:last-child li.now {
background: #fff;
}
3.实现
1.获取盒子:
var banner = document.querySelector('.jd_banner');
2.获取盒子宽度(也可以根据不同的需求设置)因为这里是为了适配图片的 小编的盒子宽度是100%
var width = banner.offsetWidth;
3.获取需要操作的画廊(设置第一张图片位置)
var imageBox = banner.querySelector('ul:first-child');
imageBox.style.marginLeft = width+"px"
4.通过margin值可以改变画廊图片位置,那我们就得到一个公式(- 当前索引 * 盒子宽度 = 第 [ 索引 ] 张图片)
//定义一个索引
var position = 0
//定时器 实现轮播
setInterval(() => {
imageBox.style.marginLeft = (-position)*width+"px"
position++;
if(position == 8){
position = 0;
}
}, 3000);
到这一步已经实现简单的轮播效果了(每张图片都会被轮播)
5、获取导航点ul元素
//获取ul元素
var whiteList = document.getElementById('now_list')
6.清除导航点样式属性:
function clearWhite(){
for (let index = 0; index < whiteList.getElementsByTagName('li').length; index++) {
whiteList.getElementsByTagName('li')[index].className = ""
}
}
7.导航点联动(在设置之前都需要恢复默认值)
clearWhite()
whiteList.getElementsByTagName('li')[position].className = "now"
8.添加动画切换效果:
//延时滑动效果
function delay(){
setTimeout(function(){
imageBox.style.transition = "none"
imageBox.style.marginLeft = width+"px";
},2950)
}
9.定时器配合导航点以及图片动画切换
setInterval(() => {
imageBox.style.transition = "all 1s ease"
imageBox.style.marginLeft = (-position)*width+"px"
clearWhite()
whiteList.getElementsByTagName('li')[position].className = "now"
position++;
if(position == 8){
position = 0;
delay();
}
}, 1000);
以上就是使用原生JS写轮播图的大致流程以及思路了(因为小编也是好久没写过原生的JS了,所以这里感受一下原生JS带来的快落~)