web 轮播_web端轮播组件指定点以文本的形式-CSDN博客

本文链接：https://blog.csdn.net/weixin_56301399/article/details/124154837
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<style>
  * {
      margin: 0;
      padding: 200;
  }
  ul,ol {
      list-style: none;
  }
  a {
      text-decoration: none;
      color: #fff;
  }
  .box,.box li,.box img {
      width: 1200px;
      height: 800px;
  }
  .box {
      margin: 150px auto;
      position: relative;
      overflow: hidden;
  }
  .box .slider {
      width: 700%;
      position: absolute;
      /* left: -600px; */
      top: 0;
  }
  .box ul li {
      float: left;
  }
  .circle {
      position: absolute;
      height: 20px;
      left: 280px;
      bottom: 10px;
  }
  .circle li{
      width: 16px;
      height: 16px;
      background-color: #fff;
      border-radius: 8px;
      line-height: 16px;
      text-align: center;
      margin-left: 5px;
      cursor: pointer;
      float: left;
  }
  .arrow {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 30px;
      background: rgba(0,0,0,.5);
      color: #fff;
      font-size: 24px;
      text-align: center;
      line-height: 30px;
      display: none;
  }
  .arrow:hover {
      background: rgba(0,0,0,.3);
  }
  .prev {
      left: 10px;
  }
  .next {
      right: 10px;
  }
  .circle .current {
      background-color: red;
      color: #fff;
  }
</style>
<body>

<div class="box">
  <!-- 轮播图片 -->
  <ul id="slider" class="slider" style="left:-1200px;">
      <li><img src="/img/11.webp" alt="pitture"></li>
      <li><img src="/img/22.webp" alt="pitture"></li>
      <li><img src="/img/33.webp" alt="pitture"></li>
      <li><img src="/img/44.webp" alt="pitture"></li>
      <li><img src="/img/55.webp" alt="pitture"></li>
      <li><img src="/img/11.webp" alt="pitture"></li>
      <li><img src="/img/22.webp" alt="pitture"></li>
  </ul>
  <!-- 底部小圆点 -->
  <ol id="circle" class="circle">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ol>
  <!-- 左右按钮 -->
  <a href="javascript:;" id="prev" class="arrow prev">&lt;</a>
  <a href="javascript:;" id="next" class="arrow next">&gt;</a>
</div>
</body>
<script>
var slider = document.getElementById("slider");
var box = slider.parentNode;//整个轮播容器
var circle = document.getElementById("circle");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = circle.children;//小圆点
var iNow = 1;//记录当前是第几个小圆点;
var timerTwo = null;//用于存放定时器（自动轮播)名称

//滑动函数
function animate(obj,offset){//对象，移动距离
  clearInterval(obj.timer);
  var timer = null;//用于存放定时器名称
  var move = 15;//滑动(位移)次数
  var speed = offset/move;//每次位移量，即步长
  var target = slider.offsetLeft + offset;//目标值
  var value = 0;//用于存放差值
  obj.timer = setInterval(function(){
      // console.log(slider.offsetLeft);
      slider.style.left = slider.offsetLeft + speed + "px";
      value = target - slider.offsetLeft;
      if(Math.abs(value) < Math.abs(speed)){
          //差值小于步长,直接移动差值的数值
          slider.style.left = slider.offsetLeft + value + "px";
          // console.log("animate:"+slider.offsetLeft);
          if(slider.offsetLeft < -6000){//第七张图时跳转到第二张
              slider.style.left = -1200 + "px";
          }else if(slider.offsetLeft > -1200){//第一张图时跳转到第六张
              slider.style.left = -6000 + "px";
          }
          clearInterval(obj.timer);//清空定时器
      }
  },20);
}

//左右小箭头切换
prev.onclick = function(){
if(iNow == 1){//当在第一个小圆点slider盒子右移时
  iNow = 5;
}else{
  iNow--;
}
showButton(iNow);
animate(slider,1200);//整个ul.slider盒子右移

}
next.onclick = function(){
if(iNow == 5){
  iNow = 1;
}else{
  iNow++;
}
showButton(iNow);
animate(slider,-1200);//整个ul.slider盒子左移
}
// 点击小圆点切换图片
for(var i=0;i<lis.length;i++){
lis[i].index = i+1;//赋予每个小圆点对应的索引值(从1~5)
lis[i].onclick = function(){
  if(this.className == "current"){
    return;//点击当前图片对应的小圆点无效
  }
  var offset = (iNow - this.index)*1200;//通过当前小圆点的小圆点和鼠标经过的索引差值，得到移动距离,注意图片向右切换则slider盒子左移，反之同理；
  animate(slider,offset);
  iNow = this.index;//把鼠标经过的小圆点的索引赋给iNow
  showButton(iNow);
}
}
//当前小圆点背景移动
function showButton(index){
for(var j=0;j<lis.length;j++){
  lis[j].className = "";
}
lis[index-1].className = "current";//因为lis是伪数组，索引从0开始
}

//左右小箭头淡入淡出
box.onmouseover = function(){
prev.style.display = "block";
next.style.display = "block";
stopPlay();
}
box.onmouseout = function(){
prev.style.display = "none";
next.style.display = "none";
autoPlay();
}

//自动轮播
function autoPlay(){
timerTwo = setInterval(function(){
  next.onclick();//每3秒执行一次点击右箭头效果
},3000);
}
function stopPlay(){
clearInterval(timerTwo);
}
autoPlay();//默认执行自动轮播
</script>

</body>
</html>
效果如下，可以自动轮播，也可以手动切换