如何使用 CSS 使图像滑块重复为无限循环或选取框

Question

因为 标签已被弃用，我尝试更改我的滑块以执行相同的功能，但使用 CSS。这是我的 CSS 代码：

<style>
    .marquee{ 
        width: 80%;       
        overflow: hidden;
        border:1px solid #ccc;
    }
    .brandSlider{
        display: flex;
        list-style: none;
        animation: scrollingSlider 20s linear  infinite;
        
    }
    .barndSliderItem{
        height: 250px;
        width: 250px;
        margin-left: 10px;
        
    }
    .brandSliderContainer{
        width: 90%;
        overflow: hidden;
    }

    @keyframes scrollingSlider {
        0% {transform: translateX(100%);}
        100% {transform: translateX(-3000px);}
        
    }
</style>

效果很好而且动人，但我希望第一张图片直接出现在最后一张图片之后，没有任何空格或延迟，该怎么做？

从数据库中检索到的滑块中使用的图像，这是带有 php 代码的 html：

<div class="brandSliderContainer">
    <div class="brandSlider">
    <?php
        $sql="select logo,id,website,name from companies where state=1 order by id asc";//get brands from database
        $preProd=$con->prepare($sql);
        $preProd->execute();

        if($preProd->rowcount())
        {
            $allBrands=$preProd->fetchall();


            foreach($allBrands as $img){
                $id1=encript_id($img["id"]); 
                echo "
                    <a href='brand-products.php?id=$id1'><img  class='barndSliderItem' src='../control-panel/images/$img[logo]' alt='Brand Logo'></a>";
            }
        }
    ?>
    </div>
</div>

$con 是与 PDO 的数据库连接，图片检索成功。

Answer 1

我没有做我应该做的事情，而是捏造了这个，并应用了“两份”类型的方法，后者的复制偏移并在一定程度上有所延迟。使用 css 变量可以对其进行调整，以便更改时间、幻灯片数量、大小等

最初事情需要一段时间才能出现，但我相信您可以通过更小的值来translateX

还有什么比无限滚动的小猫展示更好的呢？还添加了pause 功能，但尚未在移动设备上进行广泛测试。

const d = document;
const q = (e, n = d) => n.querySelector(e);
const qa = (e, n = d) => n.querySelectorAll(e);
const parent = q('.brandSliderContainer');

const pausehandler = function(e) {
  qa('.brandSlider').forEach(n => {
    let pttn = new RegExp('mouse*');
    let evt = (pttn.test(e.type) == true) ? 'mouseover' : 'touchstart';
    let state = e.type == evt ? 'paused' : 'running';
    n.style.setProperty('animation-play-state', state);
  });
};

parent.addEventListener('mouseover', pausehandler);
parent.addEventListener('mouseout', pausehandler);
parent.addEventListener('touchstart', pausehandler);
parent.addEventListener('touchend', pausehandler);

:root {
  --t: 30s;
  --w: 250px;
  --slides: 10;
  --margin: 10px;
  --sw: calc( var(--w) + calc(var(--margin) * 2));
  --tw: calc( var(--slides) * var(--sw));
  --offset: calc( var(--tw) * -1);
}

.brandSlider {
  clear: none;
  position: absolute;
  top: var(--margin);
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  align-content: center;
  justify-content: space-around;
  width: var(--tw);
  height: var(--w);
  margin: 0;
  animation: scrollingSlider var(--t) linear infinite;
  counter-reset: slide;
}

.brandSlider:nth-of-type(2) {
  position: absolute;
  top: var(--margin);
  animation-delay: calc( var(--t) / 2);
  transform: translate(100%);
}

.brandSlider a {
  height: var(--w);
  width: var(--w);
  margin-left: auto;
  counter-increment: slide;
  text-decoration: none;
  display: inline-block;
}

.brandSliderContainer {
  display: block;
  position: absolute;
  top: var(--margin);
  left: 5%;
  width: 90%;
  max-width: 90%;
  height: calc( var(--w) + calc( var(--margin) * 2));
  overflow: hidden!important;
  background: inherit;
}

@keyframes scrollingSlider {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(var(--offset));
  }
}

<div class="brandSliderContainer">
  <div class="brandSlider">
    <a href='?id=1'>
      <img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
    </a>
    <a href='?id=2'>
      <img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
    </a>
    <a href='?id=3'>
      <img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
    </a>
    <a href='?id=4'>
      <img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
    </a>
    <a href='?id=5'>
      <img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
    </a>
    <a href='?id=6'>
      <img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
    </a>
    <a href='?id=7'>
      <img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
    </a>
    <a href='?id=8'>
      <img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
    </a>
    <a href='?id=9'>
      <img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
    </a>
    <a href='?id=10'>
      <img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
    </a>
  </div>

  <div class="brandSlider">
    <a href='?id=1'>
      <img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
    </a>
    <a href='?id=2'>
      <img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
    </a>
    <a href='?id=3'>
      <img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
    </a>
    <a href='?id=4'>
      <img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
    </a>
    <a href='?id=5'>
      <img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
    </a>
    <a href='?id=6'>
      <img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
    </a>
    <a href='?id=7'>
      <img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
    </a>
    <a href='?id=8'>
      <img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
    </a>
    <a href='?id=9'>
      <img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
    </a>
    <a href='?id=10'>
      <img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
    </a>
  </div>
</div>

Answer 2

我认为您需要有两组<a> 标签来解决您的问题。在这里，我发布了适合我的解决方案：

.marquee{ 
    width: 80%;       
    overflow: hidden;
    border:1px solid #ccc;
    min-height: 250px;
}

.fixSlide{
    display: flex;
    list-style: none;
    position: absolute;
    animation-name: fixSlider;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.brandSlider{
    display: flex;
    background-color: #fff;
    list-style: none;
    position: absolute;
    animation-name: scrollingSlider;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}
.barndSliderItem{
    height: 250px;
    width: 250px;
    margin-left: 10px;
    
}
.brandSliderContainer{
    width: 90%;
    /* border: 2px solid red; */
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

@keyframes scrollingSlider {
    0% {
        right: 0;
        transform: translateX(100%);
    }

    100% {
        right: 0;
        transform: translateX(0%);
    }
}

@keyframes fixSlider {
    0% {
        right: 0;
        transform: translateX(0);
    }

    100% {
        right: 0;
        transform: translateX(-100%);
    }
}

<!-- .php file -->
<!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>slider</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    
    <section class = "marquee">
        <div class="brandSliderContainer">
            <?php
            $allBrands = [1, 2, 3, 4, 5, 6];
            // for synchronize the duration of animation
            $duration = 8;
            $imgQuant = 6;
            $finalDuration = $number * ($duration / $imgQuant);
            // ---------------------------------------

            echo "<div class='fixSlide' style='animation-duration:" .$finalDuration. "s;'>";
            foreach($allBrands as $img){
                echo "
                    <a href='#'><img  class='barndSliderItem' src='img/$img.jpg' alt='$img'></a>";
            }
            echo "</div>";

            echo "<div class='brandSlider' style='animation-duration:" .$finalDuration. "s;'>";
                
                foreach($allBrands as $img){
                    echo "
                        <a href='#'><img  class='barndSliderItem' src='img/$img.jpg' alt='$img'></a>";
                }
            ?>
                
            </div>
        </div>
    </section>
</body>
</html>

我只是在我的本地文件夹中使用了一个引用 img names 的数字数组，但是您可以使用数据库中自己的图像。