使⽤原⽣JS实现轮播图（导航点联动）
原⽣JS实现简单轮播
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 ></li>
</ul>
</div>
补充：给盒⼦开启相对定位（很重要）
position: relative;
width:100%;
overflow: hidden;
}
<!--导航点-->
.jd_banner ul:w {
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 = ElementById('now_list')
6.清除导航点样式属性：js实现轮播图最简代码
function clearWhite(){
for(let index =0; index < ElementsByTagName('li').length; index++){
}
}
7.导航点联动（在设置之前都需要恢复默认值）
clearWhite()
8.添加动画切换效果：
function delay(){
setTimeout(function(){
ansition ="none"
imageBox.style.marginLeft = width+"px";
},2950)
}
9.定时器配合导航点以及图⽚动画切换
setInterval(()=>{
ansition ="all 1s ease"
imageBox.style.marginLeft =(-position)*width+"px"
clearWhite()
position++;
if(position ==8){
position =0;
delay();
}
},1000);
以上就是使⽤原⽣JS写轮播图的⼤致流程以及思路了（因为⼩编也是好久没写过原⽣的JS了，所以这⾥感受⼀下原⽣JS带来的快落~）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。