JSFiddle - React, Tailwind, and code Playground

by 亮 薛

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>Document</title>
  </head>

  <body>
    <div id="box">
      <div class="content">
        <div class="item">
          <img src="https://p26.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_a48e528928742074ab69f446045518bd.jpeg?from=3067671334" alt="">
        </div>
        <div class="item">
          <img src="https://p26.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_a48e528928742074ab69f446045518bd.jpeg?from=3067671334" alt="">
        </div>
        <div class="item">
          <img src="https://p26.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_a48e528928742074ab69f446045518bd.jpeg?from=3067671334" alt="">
        </div>
        <div class="item">
          <img src="https://p26.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_a48e528928742074ab69f446045518bd.jpeg?from=3067671334" alt="">
        </div>
      </div>
    </div>
  </body>
</html>

CSS

* {
        padding: 0;
        margin: 0;
        vertical-align: top;
      }
      #box {
        width: 840px;
        height: 200px;
        outline: 1px solid pink;
        margin: 50px auto;
        overflow: hidden;
      }
      img {
        height: 200px;
        width: 200px;
        border-radius: 10px;
      }
      .content {
        /* width: 100%; */
        height: 200px;
        display: flex;
        outline: 3px solid black;
        overflow: hidden;
        position: relative;
        top: 0;
        left: 0;
      }
      .item {
        border-radius: 10px;
        margin-right: 10px;
        height: 200px;
        width: 200px;
      }

JavaScript

// https://p26.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_a48e528928742074ab69f446045518bd.jpeg?from=3067671334


var speed = 4; //初始化速度
//获取节点
var Obox = document.getElementById("box");
var Ocontent = document.getElementsByClassName("content")[0];
console.log(Ocontent);
var Oitem = document.getElementsByClassName("item");
//图片内容
Ocontent.innerHTML += Ocontent.innerHTML;
//设置ul的宽度使图片可以放下
Ocontent.style.width = Oitem.length * 210 + 'px';
var changeLeft = 0;

function move() {
  changeLeft -= speed;
  //Ocontent.offsetleft,往左偏移为负数
  //Ocontent.offsetwidth两组图的总宽度
  if (changeLeft < -(Ocontent.offsetWidth / 2)) { //向左滚动，当靠左的图4移出边框时
    Ocontent.style.left = 0;
    changeLeft = 0;
  } else {
    Ocontent.style.left = changeLeft + 'px';
  }
}
var timer = setInterval(move, 30); //全局变量 ，保存返回的定时器
// console.log(timer);
Obox.addEventListener('mouseout', function() {
  timer = setInterval(move, 30);
}, false);
Obox.addEventListener('mousemove', function() {
  clearInterval(timer); //鼠标移入清除定时器
}, false);