原⽣js实现轮播图的⽰例代码
很多⽹站上都有轮播图，但却很难到⼀个系统讲解的，因此这⾥做⼀个简单的介绍，希望⼤家都能有所收获，如果有哪些不正确的地⽅，希望⼤家可以指出。
原理：
将⼀些图⽚在⼀⾏中平铺，然后计算偏移量再利⽤定时器实现定时轮播。
步骤⼀：建⽴html基本布局
如下所⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<div class="container">
<div class="wrap" >
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<div class="buttons">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_right">></a>
</div>
</body>
</html>
只有五张图⽚，却使⽤7张来轮播，这是为了实现⽆缝轮播，后⾯会详细介绍。
⽽5个span，即我们可以实时看到轮播图⽬前所处的位置。
最后是两个按钮，可以通过它来控制前进与后退。
这⾥我们需要对wrap使⽤绝对定位，所以⽤left:-600px；将第⼀张图⽚显⽰出来。
步骤⼆： css布局
⾸先，resetcss，如下所⽰：
* {
margin:0;
padding:0;
}
a{
text-decoration: none;
}
接着，我们为了让图⽚只在container中，所以需要限定其宽度和⾼度并且使⽤overflow:hidden；将其余的图⽚隐藏起来，并且我们希望wrap相对于container左右移动，所以设置为relative，如下：
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
我们设置wrap是绝对定位的，所以，我们就可以通过控制Left和Right来控制图⽚的移动了。设置z-index:1；以对后⾯将要放置的buttons作为参考。因为共有七张图⽚，所以width为4200px（每张图⽚我们设置为600X400），我们只需让图⽚左浮动即可实现占满⼀排了。
.wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
然后我们把图⽚设置位左浮动，并限定其⼤⼩，如下所⽰：
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
现在的效果如下：
即这时已经显⽰出了第⼀张图⽚。并且充满了整个container(container是有box-shadow的);
然后我们把显⽰次序的buttons放在图⽚的右下⾓。并且设置z-index:2；以保证buttons是在图⽚的上⾯的。
.container .buttons {
position: absolute;
right: 150px;
bottom:20px;
width: 100px;
height: 10px;
z-index: 2;
}
然后将buttons下⾯的span做⼀个简单的修饰，并且给和图⽚对应的span设置⼀个on类，如下：
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.
container .{
background-color: red;
}
接下来，我们把左右切换的箭头加上，然后做简单的修饰，注意：因为这⾥使⽤实体来表⽰左右箭头，所以设置font-size才能改变其⼤⼩， .container .arrow {
position: absolute;
top: 35%;
color: green;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.
container .arrow:hover {
background-color: rgba(0,0,0,0.2);
}
步骤三：添加js逻辑
我们⾸先获取到 wrap（因为要设置其left才能控制轮播图），然后获取到左右两个箭头，并实现⼿动轮播，如下：
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next_pic();
}
prev_pic();
}
function next_pic () {
var newLeft = parseInt(wrap.style.left)-600;
wrap.style.left = newLeft + "px";
}
function prev_pic () {
var newLeft = parseInt(wrap.style.left)+600;
wrap.style.left = newLeft + "px";
}
值得注意的是，这⾥wrap.style.left是⼀个字符串，所以要转化为数字才能进⾏计算，⽽设定left时就要加上px成为⼀个字符串了。
现在我们来测试⼀下：
可以看到，在第⼀页时，left值为-600，所以我们可以点击⼀次上⼀张，但是当再点击⼀次时，就出现了空⽩。同样的，下⼀张点击，到-3600是最后⼀张，就不能再继续点击了。 也就是说，当我们点击下⼀张到-3600px（这是第⼀张图⽚）时，我们需要下次跳转到第⼆张，即-1200px；这样才能正常跳转；
同理，当我们点击上⼀张到0px（这是第五张图⽚时），我们希望下次跳转到第四张，即-2400px；
按照这样的思路我们重新将next_pic和prev_pic函数修改如下：
function next_pic () {
var newLeft;
if(wrap.style.left === "-3600px"){
newLeft = -1200;
}else{
newLeft = parseInt(wrap.style.left)-600;
}
wrap.style.left = newLeft + "px";
}
function prev_pic () {
var newLeft;
if(wrap.style.left === "0px"){
newLeft = -2400;
}else{
newLeft = parseInt(wrap.style.left)+600;
}
wrap.style.left = newLeft + "px";
}
这时，我们就可以发现图⽚可以循环播放了！
但是，这时我们仅仅时⼿动循环播放的，我们如果希望⾃动播放，使⽤setInterval()即可，如下所⽰：
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next_pic();
},1000);
}
autoPlay();
即先设定⼀个计时器，然后创建⼀个可以⾃动播放的函数，最后调⽤这个函数即可。现在它就可以⾃动播放了，效果如下：
但是如果我们想要仔细看其中⼀个图⽚的时候，我们希望轮播图停⽌播放，只要clearInterval()即可，如下：
var container = document.querySelector(".container");
clearInterval(timer);
}
autoPlay();
}
现在，只要我们把⿏标移⼊轮播图中，这时轮播图就不会播放了。⽽移开⿏标之后，轮播图⾃动播放。
但是到⽬前为⽌，轮播图下⽅的⼩圆点还没有动，现在我们就实现它。
原理很简单，即设置buttons的index初始值为0，即第⼀个span的class为on，然后触发next_pic函数时，index加1，当触发prev_pic函数时，inex减1，并设置当前index的⼩圆点的class 为on，这就要求index必须设置为全局变量，才能保证它在每⼀个函数的作⽤域中。
添加showCurrentDot函数：
var index = 0;
var dots = ElementsByTagName("span");
function showCurrentDot () {
for(var i = 0, len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
}
在next_pic中添加代码：
index++;
if(index > 4){
index = 0;
}
在prev_pic中添加⼤吗：
index--;
if(index < 0){
index = 4;
}
showCurrentDot();
这样，轮播图就可以⾃动切换，并且⼩圆点也在随着图⽚的变化⽽变化了。
但是，这距离我们经常看到的轮播图还有⼀定距离 - - - 当点击⼩圆点时，就可跳转到相应图⽚。实现原理即：点击⼩圆点，就使wrap的Left变成相应的值。代码如下：
for (var i = 0, len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == 4 && parseInt(wrap.style.left)!==-3000){
dis = dis - 5;
}
//和使⽤prev和next相同，在最开始的照⽚5和最终的照⽚1在使⽤时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == 0 && parseInt(wrap.style.left)!== -600){
dis = 5 + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
index = i;
showCurrentDot();
}
})(i);
}
原理就是当点击到⼩圆点时，得到相应的i值，这个i值也就是span的index值，我们拿他和全局变量index作⽐较，然后重新设置wrap.style.left的值，然后把i值复制给全局变量index，最后显⽰当前的⼩原点即可。值得注意的是：这⾥涉及到了闭包的概念，如果直接使⽤for循环，则不能得到正确的结果。
最终效果如图：
最终代码如下所⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin:0;
padding:0;
}
a{js实现轮播图最简代码
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
.
container .wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.
container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: 2;
}
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .{
background-color: red;
}
.
container .arrow {
position: absolute;
top: 35%;
color: green;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.container .arrow:hover {
background-color: rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="wrap" >
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>
<script>
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next_pic();
}
prev_pic();
}
function next_pic () {
index++;
if(index > 4){
index = 0;
}
showCurrentDot();
var newLeft;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论