js原生实现轮播图

1.原生js

原理：图片平铺，通过设置偏移量进行移动图片，设置定时器进行定时移动。

实现功能：

点击左右可以跳转下一页，在底部圆标可以到对应页

鼠标不在图片内可以实现自动轮播

因为使用codepen写的，所以图片都是网上的图片，左右两个的白边是图片问题

HTML和CSS要点：

• 外面的大容器是relative，宽高与一个img的一致
• 放图片的容器宽必须是几个图片宽的和，高与一个img一致，处理间隙可以用浮动，设置行内块元素，font-size:0
• 内部容器全部设置成绝对定位，方便布局

<div id="wrap">
  <div id="wImg">
    <img src="https://static.runoob.com/images/demo/demo2.jpg" >
		    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSzrfmmLamu8XXzvgRLFOBOtaOHkKfO8xNMWmVSyyiIWv-mJnxH&usqp=CAU">
		    <img src="https://pic-bucket.ws.126.net/photo/0009/2019-12-10/F02FNPP40AI20009NOS.jpg">
		    <img src="https://img-blog.csdnimg.cn/2022010616554730761.jpeg">
		  </div>
  
  <ul id="icon">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  
  <span id="leftB">《</span>
  <span id="rightB">》</span>  
</div>

注：本人的图片全是网上复制的链接地址，仅作为练习使用。

CSS
#wrap{
  width:600px;
  height:400px;
  position:relative;
  overflow:hidden;
  margin:auto;
}
#wImg{
  width:2400px;
  height:400px;
  position:absolute;
  font-size:0;
  left:0;
  transition:1s all;
}
#wImg img{
  width:600px;
  height:400px;
}
ul{
  list-style:none;
  position:absolute;
  bottom:0;
  left:180px;
}
ul li{
  width:20px;
  height:20px;
  background:rgba(255,255,0);
  border-radius:50%;
  border:1px solid #000;
  float:left;
  margin-left:10px;
}
span{
  display:block;
  position: absolute;
  font-size:30px;
  width:26px;
  height:40px;
  padding:10px;
  background:rgba(0,0,0,0.3);
  color:#fff;
  opacity:0.7;
  top:220px;
}
#leftB{
  left:20px;
}
#rightB{
  right:20px;
}

css中的样式:主要transition：2s all

首先是轮播，轮播使用setInterval定时器定时给图片容器 wImg 的 left 添加一倍的单个img宽度，设置了绝对定位的图片容器 wImg 就可以动起来了。设置一个position作为当前页面的index，也可以作为一个倍数。

//获取元素
var leftBtn, rightBtn, liList, wImg, wrap, preLi, timer;
var position = 0;
//初始函数
init();
function init(){
  leftBtn = document.getElementById('leftB');
  rightBtn = document.getElementById('rightB');
  liList = Array.from(document.getElementsByTagName('li'));
  
  //轮播
  auto();
}
//轮播
function auto(){
    clearInterval(timer);
    timer = setInterval(function(){
    position++;
    if(position > 3){
      position = 0;
    }
    moveImg();
  }, 2000);
}


function moveImg(){
  wImg.style.left = -600*position+'px';
}

点击按钮到下一页，如果this ===  leftBtn 也就是说如果点击的是leftBtn就做出对应的反应。在点击结束之后还自动播放

init(){
  //左点击
  leftBtn.addEventListener('click', ClickHandler);
  //右点击
  rightBtn.addEventListener('click', ClickHandler);
}

function ClickHandler(e){
  clearInterval(timer);
  if(this === leftBtn){
    position--;
    if(position < 0){
      position = 3;
    }
    moveImg();
    auto();
    return ;
  }
  position++;
  if(position > 3){
    position = 0;
  }
  moveImg();

  auto();
}

图标变色，监听每一个图标，变色和停止

init(){
//liList变色
  for(var i=0; i<liList.length; i++){
    liList[i].addEventListener('mouseover', liHandler);
  }
}

//liList变色
  for(var i=0; i<liList.length; i++){
    liList[i].addEventListener('mouseover', liHandler);
  }
  //轮播
  auto();
}

function moveImg(){
  wImg.style.left = -600*position+'px';
  
  if(preLi){
    preLi.style.backgroundColor= 'rgba(255,255,0)';
  }
  preLi = liList[position];
  preLi.style.background = 'rgba(255,255,0,0.3)';
}

最后整合一下代码

//获取元素
var leftBtn, rightBtn, liList, wImg, wrap, preLi, timer;
var position = 0;
//初始函数
init();
function init(){
  leftBtn = document.getElementById('leftB');
  rightBtn = document.getElementById('rightB');
  liList = Array.from(document.getElementsByTagName('li'));
  wImg = document.getElementById('wImg');
  wrap = document.getElementById('wrap');
  //碰到停止
  wrap.addEventListener('mouseover',parseAuto);
  wrap.addEventListener('mouseout',auto);

  //左点击
  leftBtn.addEventListener('click', ClickHandler);
  //右点击
  rightBtn.addEventListener('click', ClickHandler);
  
  //liList变色
  for(var i=0; i<liList.length; i++){
    liList[i].addEventListener('mouseover', liHandler);
  }
  //轮播
  auto();
}
//轮播
function auto(){
    clearInterval(timer);
    timer = setInterval(function(){
    position++;
    if(position > 3){
      position = 0;
    }
    moveImg();
  }, 2000);
}

function parseAuto(e){
  clearInterval(timer);
}

function ClickHandler(e){
  clearInterval(timer);
  if(this === leftBtn){
    position--;
    if(position < 0){
      position = 3;
    }
    moveImg();
    auto();
    return ;
  }
  position++;
  if(position > 3){
    position = 0;
  }
  moveImg();

  auto();
}

function liHandler(e){
  clearInterval(timer);
  position = liList.indexOf(this);
  moveImg();
  auto();
}

function moveImg(){
  wImg.style.left = -600*position+'px';
  
  if(preLi){
    preLi.style.backgroundColor= 'rgba(255,255,0)';
  }
  preLi = liList[position];
  preLi.style.background = 'rgba(255,255,0,0.3)';
}