Question

下面的代码是使用HTML，CSS和JQuery的内容滑块。是否有可能获得我现在拥有的但仅使用纯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中创建冗余副本）至少在滑块中首先看到的元素。否则，它会表现为marquee，生活在一个空白处，直到一切都从盒子里滑下来。

以下示例：

＆＃13;

/* 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 */ 
  }
}

＆＃13;

<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>

＆＃13;

注意：我使用了flex模型并且删除了绝对位置。如果你确实需要，主要父母可以是绝对的，孩子则不是。

内容滑块纯CSS

1 个答案: