原生JS实现无缝轮播图片

  • Z时代
  • 2024-01-10
  • 分类：综合

本文实例为大家分享了JS实现无缝轮播图的具体代码，供大家参考，具体内容如下

运动插件

function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  let step = (distance - obj.offsetLeft) / 10;
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  if (obj.offsetLeft == distance) {
  clearInterval(obj.timer);
  if (callback) {
   callback();
  }
  }
  obj.style.left = obj.offsetLeft + step + 'px';
 },speed)
}

CSS代码

 * {
  margin: 0;
  padding: 0;
 }
 ul,li {
  list-style: none;
 }
 .box {
  width: 1226px;
  height: 460px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
 }
 .pic-box {
  width: 4904px;
  position: absolute;
 }
 .pic-box > li {
  float: left;
 }
 .point {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
 }
 .point > li {
  float: left;
  width: 8px;
  height: 8px;
  border: 1px solid blueviolet;
  margin: 0 4px;
  border-radius: 50%;
 }
 .point > .active {
  background-color: orange;
 }
 .left-btn,
 .right-btn {
  width: 50px;
  height: 40px;
  background-color: rgba(0,0,0,.5);
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 }
 .left-btn {
  left: 0;
 }
 .right-btn {
  right: 0;
 }

HTML代码

<div class="box">
 <ul class="pic-box">
  <li>
  <img src="lb.webp" alt="">
  </li>
  <li>
  <img src="lb2.webp" alt="">
  </li>
  <li>
  <img src="pic3.jpg" alt="">
  </li>
 </ul>
 <ul class="point">
 </ul>
 <div class="left-btn"><</div>
 <div class="right-btn">></div>
 </div>
<script src="运动插件.js"></script>

js代码

let picbox = document.querySelector('.pic-box');
 let pic = document.querySelectorAll('.pic-box > li'); //由于获取的不是动态的 所以之后的克隆 并不会使这个变量发生改变
 let point = document.querySelector('.point');
 let leftbtn = document.querySelector('.left-btn');
 let rightbtn = document.querySelector('.right-btn');
 let carouselindex = 0;
 //通过for循环 生成小圆点 并将圆点添加到ul里
 for (let i = 0; i < pic.length; i ++) {
  let pointli = document.createElement('li');
  pointli.classList.add(i);
  point.appendChild(pointli);
 }
 //给第一个小圆点默认添加active
 point.children[0].classList.add('active');
 //克隆第一个图片 深度
 let kelon = picbox.children[0].cloneNode(true);
 picbox.appendChild(kelon); //将图片添加到最后位置
 //获取所以圆点
 let pointli = document.getElementsByClassName('point')[0].getElementsByTagName('li');
 //轮播方法
 function carousel(index) {
  let distance = (-index * pic[0].offsetWidth); //计算行走的距离 图片的index值乘以图片的大小
  animove(picbox,distance,10); //调用运动函数
  for (let i = 0; i < pointli.length; i ++) { //for循环移除每个小点的选中状态
  pointli[i].classList.remove('active');
  }
  if (index != pic.length) { //如果不等于pic的长度 就执行
  pointli[index].classList.add('active');
  } else { //如果索引值为3 说明此时图片为克隆的图 而圆点的最大索引值为2 将第一个圆点设置为active即可正常显示圆点状态
  point.children[0].classList.add('active');
  }
 }
 Array.prototype.forEach.call(pointli,function (item,index) { //给每个圆点添加点击事件
  item.addEventListener('click',function () {
   carouselindex = index;  //将点击的索引值赋值给轮播索引全局变量
   carousel(carouselindex);
  })
 });
 rightbtn.addEventListener('click',function () { //右边点击事件
  carouselindex ++; //每次点击全局轮播索引增加
  if (carouselindex > pic.length) { //如果索引大于图片数量 由于数量大小获取的是静态的 所以长度不会因为克隆变化而变化
   picbox.style.left = "0px"; //如果大于索引说明此时要离开克隆的那张图 此时迅速将left值设置为0
   carouselindex = 1; //然后将索引设置为1
  }
  carousel(carouselindex); //这时候就在left为0的位置 过渡到索引1的位置 实现无缝轮播的效果
 });
 leftbtn.addEventListener('click',function () { //左边点击事件
  carouselindex --; //减减
  if (carouselindex < 0) { //如果索引值小于0
  carouselindex = 2; //将索引值设置为2
  picbox.style.left = "-3678px"; //将位置迅速变换为第四张图的位置（克隆的图）
  }
  carousel(carouselindex); //由克隆的图过渡到索引为2的图（第三张图）
})

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上是 原生JS实现无缝轮播图片 的全部内容， 来源链接： utcz.com/z/360880.html

回到顶部