当前位置：网站首页>Web rotation

Web rotation

2022-04-21 08:18:00 【395 Long Street】 

<!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">
  <!--  Rotate pictures  -->
  <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>
  <!--  Bottom dot  -->
  <ol id="circle" class="circle">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ol>
  <!--  Left and right buttons  -->
  <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;// The whole rotation container 
var circle = document.getElementById("circle");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = circle.children;// Little dots 
var iNow = 1;// Record the current number of dots ;
var timerTwo = null;// For storing timers （ Automatic wheel broadcasting ) name 

// Slip function 
function animate(obj,offset){// object , Moving distance 
  clearInterval(obj.timer);
  var timer = null;// Used to store timer name 
  var move = 15;// slide ( Displacement ) frequency 
  var speed = offset/move;// Displacement per time , That is, step length 
  var target = slider.offsetLeft + offset;// The target 
  var value = 0;// It is used for storage 
  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)){
          // The difference is less than the step size , Move the value of the difference directly 
          slider.style.left = slider.offsetLeft + value + "px";
          // console.log("animate:"+slider.offsetLeft);
          if(slider.offsetLeft < -6000){// Jump to the second picture in the seventh picture 
              slider.style.left = -1200 + "px";
          }else if(slider.offsetLeft > -1200){// Jump to the sixth picture in the first picture 
              slider.style.left = -6000 + "px";
          }
          clearInterval(obj.timer);// Clear timer 
      }
  },20);
}

// The left and right small arrows switch 
prev.onclick = function(){
if(iNow == 1){// When in the first dot slider When the box moves to the right 
  iNow = 5;
}else{
  iNow--;
}
showButton(iNow);
animate(slider,1200);// Whole ul.slider The box moves to the right 

}
next.onclick = function(){
if(iNow == 5){
  iNow = 1;
}else{
  iNow++;
}
showButton(iNow);
animate(slider,-1200);// Whole ul.slider The box moves left 
}
//  Click the small dot to switch the picture 
for(var i=0;i<lis.length;i++){
lis[i].index = i+1;// Assign the index value corresponding to each small circle point ( from 1~5)
lis[i].onclick = function(){
  if(this.className == "current"){
    return;// Clicking the dot corresponding to the current picture is invalid 
  }
  var offset = (iNow - this.index)*1200;// The difference between the dot of the current dot and the index passed by the mouse , Get the moving distance , Note that if the picture is switched to the right slider The box moves left , On the contrary, the same is true ;
  animate(slider,offset);
  iNow = this.index;// Assign the index of the small circle point passed by the mouse to iNow
  showButton(iNow);
}
}
// The current dot background moves 
function showButton(index){
for(var j=0;j<lis.length;j++){
  lis[j].className = "";
}
lis[index-1].className = "current";// because lis It's a pseudo array , Index from 0 Start 
}

// The left and right small arrows fade in and out 
box.onmouseover = function(){
prev.style.display = "block";
next.style.display = "block";
stopPlay();
}
box.onmouseout = function(){
prev.style.display = "none";
next.style.display = "none";
autoPlay();
}

// Automatic wheel broadcasting 
function autoPlay(){
timerTwo = setInterval(function(){
  next.onclick();// Every time 3 Execute the right arrow effect once every seconds 
},3000);
}
function stopPlay(){
clearInterval(timerTwo);
}
autoPlay();// By default, automatic rotation is executed 
</script>

</body>
</html>

The effect is as follows , It can automatically rotate , It can also be switched manually

版权声明
本文为[395 Long Street]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204210743206323.html

边栏推荐

猜你喜欢

随机推荐