原始js实现循环轮播图

最新推荐文章于 2023-09-17 14:12:21 发布

风吹@头皮凉

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量188

点赞数

分类专栏：前端 js html5 文章标签： css html html5

本文链接：https://blog.csdn.net/S3328047358/article/details/120221590

版权

前端同时被 3 个专栏收录

54 篇文章 0 订阅

订阅专栏

49 篇文章 0 订阅

订阅专栏

html5

10 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图最佳实现方案</title>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <div class="container">
    <div id="img-list" style="left:0;">
      <img class="current-img" src="http://127.0.0.1:5500/images/1.jpg">
      <img class="current-img" src="http://127.0.0.1:5500/images/2.jpg">
      <img class="current-img" src="http://127.0.0.1:5500/images/3.jpg">
      <img class="current-img" src="http://127.0.0.1:5500/images/4.jpg">
      <img class="current-img" src="http://127.0.0.1:5500/images/5.jpg">
      <img class="current-img" src="http://127.0.0.1:5500/images/1.jpg">
    </div>
  </div>
  <div class="btn-box">
    <span class="prev-btn">上一个</span>
    <span class="next-btn">下一个</span>
  </div>
  <script src="./index.js"></script>
</body>
</html>

css

*{
  padding: 0;
  margin: 0;
}
.container{
  width: 960px;
  height: 320px;
  overflow: hidden;
  margin: 0 auto;
}
#img-list{
  display: flex;
  position: relative;
}

.btn-box{
  width: 960px;
  margin: 0 auto;
  cursor: pointer;
}

// 图片列表
let imgList = document.querySelector('#img-list');
// 上一个按钮
let prevBtn = document.querySelector('.prev-btn');
// 下一个按钮
let nextBtn = document.querySelector('.next-btn');
// 所有图片集合
let allImgList = [
  'http://127.0.0.1:5500/images/1.jpg',
  'http://127.0.0.1:5500/images/2.jpg',
  'http://127.0.0.1:5500/images/3.jpg',
  'http://127.0.0.1:5500/images/4.jpg',
  'http://127.0.0.1:5500/images/5.jpg',
  'http://127.0.0.1:5500/images/1.jpg',
];
// 图片宽度
let actWidth = imgList.querySelector('img').offsetWidth;



// 点击 上一个按钮
prevBtn.onclick = throttle(toPreImg, 500);
function toPreImg() {
  let left = imgList.style.left;
  left = Number(left.slice(0, left.length - 2));
  if((left + actWidth) > 0){
     // 实现无缝循环的关键
    // 图片按照 1 2 3 4 5 *1 的顺序布局
    // 要从 1 切换到5  需要无动画的将 left 设置到 *1 处
    imgList.style.transition = "none";
    left = - (actWidth * (allImgList.length-1));
    imgList.style.left =  left + 'px';
  }
  setTimeout(function () {
    imgList.style.transition = "all .5s ease-in .1s";
    imgList.style.left = left + actWidth + 'px';
  }, 1)
}
// 点击 下一个按钮
nextBtn.onclick = throttle(toNextImg, 500);
function toNextImg() {
  let left = imgList.style.left;
  left = Number(left.slice(0, left.length - 2));
  if((left - actWidth) === -(actWidth * allImgList.length)){
    // 实现无缝循环的关键
    // 图片按照 1 2 3 4 5 *1 的顺序布局
    // 要从 *1 切换到2  需要无动画的将 left 设置到 1 处
    imgList.style.transition = "none";
    left = 0;
    imgList.style.left = left;
  }
  setTimeout(function () {
    imgList.style.transition = "all .5s ease-in .1s";
    imgList.style.left = (left - actWidth) + 'px';
  }, 1)
}


// 节流函数
function throttle(func, wait) {
  var context, args;
  var old = 0;

  return function() {
      var now = +new Date();
      context = this;
      args = arguments;
      if (now - old > wait) {
          func.apply(context, args);
          old = now;
      }
  }
}

风吹@头皮凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原始js实现循环轮播图

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图最.
复制链接

扫一扫