javascript - 内容 slider 纯 CSS

Question

我有下面的代码，用于使用 HTML、CSS 和 JQuery 的内容 slider 。是否有可能获得我现在所拥有的但仅使用纯 CSS？如果纯 CSS 不可能，是否可以在没有 JQuery 的情况下使用 Vanilla JavaScript？任何帮助，干杯。

$(function(){
        var scroller = $('#scroller div.innerScrollArea');
        var scrollerContent = scroller.children('ul');
        scrollerContent.children().clone().appendTo(scrollerContent);
        var curX = 0;
        scrollerContent.children().each(function(){
            var $this = $(this);
            $this.css('left', curX);
            curX += $this.outerWidth(true);
        });
        var fullW = curX / 2;
        var viewportW = scroller.width();

        // Scrolling speed management
        var controller = {curSpeed:0, fullSpeed:2};
        var $controller = $(controller);
        var tweenToNewSpeed = function(newSpeed, duration)
        {
            if (duration === undefined)
                duration = 600;
            $controller.stop(true).animate({curSpeed:newSpeed}, duration);
        };

        // Pause on hover
        scroller.hover(function(){
            tweenToNewSpeed(0);
        }, function(){
            tweenToNewSpeed(controller.fullSpeed);
        });

        // Scrolling management; start the automatical scrolling
        var doScroll = function()
        {
            var curX = scroller.scrollLeft();
            var newX = curX + controller.curSpeed;
            if (newX > fullW*2 - viewportW)
                newX -= fullW;
            scroller.scrollLeft(newX);
        };
        setInterval(doScroll, 40);
        tweenToNewSpeed(controller.fullSpeed);
    });

#scroller {
  position: absolute;
}

#scroller .innerScrollArea {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#scroller ul {
  padding: 0;
  position: relative;
}

#scroller li {
  padding: 0;
  list-style-type: none;
  position: absolute;
}
.circle {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-color:transparent;
  border-style:solid;
  border-width:9px;
  border-color:#006850;
}

.circle-text {
  color: #1f497d;
  font-family:Verdana;
  font-size: 20.5px;
  text-align: center;
  width: 200px;
  top: 90px;
  left: 10%;
  bottom: 0;
  position: absolute;
  z-index: 99;
}

.arrow {
  width:300px;
  height:80px;
}

.flipimage {
  width:300px;
  height:80px;
  -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.everything {
  /*transform: scale(0.6);
}

<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
    <div class="innerScrollArea">
      <ul>
    		<li>
          <br style="line-height:89px;"/>
        <div class="circle">
      <div class="circle-text">
        HR Connect<br/>Service<br/>Representative
      </div>
      </div>
             <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
      </li>
          		<li>
                <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        <div class="circle">
      <div class="circle-text">
Employee<br/>Relations<br/>Specialist
      </div>
      </div>
      </li>
        <li>
          <br style="line-height:89px;"/>
        <div class="circle">
      <div class="circle-text">
       Employee<br/>Relations<br/>Manager
      </div>
      </div>
             <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
      </li>
          		<li>
                <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        <div class="circle">
      <div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
      </div>
      </div>
      </li>
      </ul>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>

Answer 1

您可以使用 animation ，但要使整个动画永远滑动，您将需要至少克隆(或在 HTML 中制作冗余副本)您最初在 slider 。否则，它将表现为一个 marquee ，在所有内容都滑出框之前一直处于空白区域。

示例如下:

/* all position:absolute removed */
#scroller {
overflow:hidden;
}

#scroller .innerScrollArea {

}

#scroller ul {
  padding: 0;
  position: relative;
  display:flex;/* UPDATE */
}

#scroller li {
  padding: 0;
  list-style-type: none;
}
.circle {
  width: 250px;
  height: 250px;
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-color:transparent;
  border-style:solid;
  border-width:9px;
  border-color:#006850;
}

.circle-text {
  color: #1f497d;
  font-family:Verdana;
  font-size: 20.5px;
  text-align: center;
  width: 200px;
  top: 90px;
  left: 10%;
  bottom: 0;
  position: absolute;
  z-index: 99;
}

.arrow {
  width:300px;
  height:80px;
}

.flipimage {
  width:300px;
  height:80px;
  -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

/* UPDATE  for animation */
ul {
  animation: slidli 9s infinite linear;
}
ul:hover {
  animation-play-state:paused;
}
@keyframes slidli {
  100% {
    transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */ 
  }
}

<div class="everything">
  <div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
    <div class="innerScrollArea">
      <ul>
        <li>
          <br style="line-height:89px;" />
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:89px;" />
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
        <!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
        
        <li>
          <br style="line-height:89px;" />
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:89px;" />
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>

注意:我使用了 flex 模型并放弃了绝对定位。如果您确实需要，主要 parent 可以是绝对的， child 则不需要。