用原生JS 写Web首页轮播图
Posted pine-cone
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用原生JS 写Web首页轮播图相关的知识，希望对你有一定的参考价值。
目前自己在学习JS中，用目前学到的东西写了一个轮播图，能完整的实现轮播图的功能，但是肯定还是有不完善的地方，也希望大家能留言交流，一起学习。
一、思路
首先将功能一个一个理顺，主要功能分为三大块：
（一）点击左右按钮，实现更换图片并循环。
（二）图片自动定时切换，当鼠标在图片上时暂停切换，移出时恢复。
（三）轮播图上导航点变换与点击切换
二、实现
html和CSS的代码如下：
<!doctype html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
box-sizing: content-box;
text-decoration: none;
}
#container {
width:600px;
height:300px;
border:1px red solid;
overflow: hidden;
position: relative;
}
#list {
position: absolute;
z-index: 1;
width: 3000px;
}
#list img {
width: 600px;
height: 300px;
padding: 0;
margin: 0;
}
#prev {
position: absolute;
top: 40%;
left: 0;
height:70px;
width: 30px;
z-index: 2;
}
#next {
position: absolute;
top: 40%;
right: 0;
height:70px;
width: 30px;
z-index: 2;
}
#list-buttons {
position: absolute;
bottom: 5%;
z-index: 2;
width:600px;
text-align: center;
}
#list-buttons span{
display: inline-block;
width: 10px;
height: 10px;
background-color: #ffffff;
border-radius: 100%;
}
#list-buttons .on{
background-color: #b2b2b2;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: 0px;"> <!-- 0px为初始位置 -->
<img src="img-01.jpg" alt="1">
<img src="img-02.jpg" alt="1">
<img src="img-03.jpg" alt="1">
</div>
<div id="list-buttons">
<span class="on"></span>
<span></span>
<span></span>
</div>
<div>
<button id="prev" class="button" type="button"><</button>
<button id="next" class="button" type="button">></button>
</div>
</div>
<body>
（一）左右按钮切换图片
首先取得操作切换图片的元素：
var prev = document.getElementById(‘prev‘); var next = document.getElementById(‘next‘);
然后我用三张图片组成了一串图片条，以图片条的左边缘作为图片的起始位置，通过不断修改图片的起始位置，从而让图片显示在可显示的区域里。
这里写了两个函数，分别对应左右的切换按钮。
这里图片的宽段是600px，要点击next按钮让图片切换下一张，那就得在让图片条向左移动600px。为了让切换的图片能够循环，当到达最后一张图片的位置时，再点击下一张按钮，就会重置到第一张图片，以此循环。
var initial = parseInt(list.style.left); //listImage的初始数值 function nextMove(){ initial -= 600; //图片向左滑动 if(initial < -1200){ initial = 0; } list.style.left = initial + ‘px‘; //调用dot函数，判断当前点的位置 dot(); } function prevMove(){ initial += 600; //图片向右滑动 if(initial > 0){ initial = -1200; } list.style.left = initial + ‘px‘; }
（二）图片自动定时切换与当鼠标在图片上时暂停切换，移出时恢复
要实现定时自动播放，那就得用window.setInterval（）方法，在指定的时间间隔调用函数，同时将它返回的值赋给变量time，这里就实现了自动切换。
var time = window.setInterval(nextMove, 2000);
.setInterval（）方法还有一个对应的clearInterval()方法，用来取消调用函数。所以我就写了一个函数，来判断鼠标的状态是移进还是移出，并给图片区域绑定了事件处理程序，这样当鼠标移进就会暂停，移出继续。
var container = document.getElementById(‘container‘); container.addEventListener(‘mouseenter‘, state, false); container.addEventListener(‘mouseleave‘, state, false); function state(eventName){ switch(eventName.type){ case ‘mouseenter‘: window.clearInterval(time); break; case ‘mouseleave‘: time = window.setInterval(nextMove, 2000); break; } }
（三）轮播图上导航点变换与点击切换
首先要实现点跟着图片进行变换，所以声明一个函数，判断当前图片条的位置，来对应设置相应位置的导航点样式，并取消其他导航点的样式。
var listBtn = document.getElementsByTagName(‘span‘); function dot(){ switch(initial){ case 0: console.log(‘0px‘); listBtn[0].className = ‘on‘; listBtn[1].className = ‘‘; listBtn[2].className = ‘‘; break; case -600: console.log(‘-600px‘); listBtn[0].className = ‘‘; listBtn[1].className = ‘on‘; listBtn[2].className = ‘‘; break; case -1200: console.log(‘-1200px‘); listBtn[0].className = ‘‘; listBtn[1].className = ‘‘; listBtn[2].className = ‘on‘; break; } }
最后就是当点击相应的导航点时，跳转到对应的图片上了。为此，我给每个导航点添加了一个索引属性，再通过判断点击的是第几个导航点，切换到对应的图片位置就可以了。
for(let i = 0; i < listBtn.length; i++){ listBtn[i].index = i; listBtn[i].addEventListener(‘click‘, function(){ switch(listBtn[i].index){ case 0: initial = 0; dot(); list.style.left = ‘0px‘; break; case 1: initial = -600; dot(); list.style.left = ‘-600px‘; break; case 2: initial = -1200; dot(); list.style.left = ‘-1200px‘; break; } }, false); }
以上就是整个轮播图的实现过程。
2018-07-20
以上是关于用原生JS 写Web首页轮播图的主要内容，如果未能解决你的问题，请参考以下文章