內容滑塊純CSS

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 ，在空白處直到所有東西滑出盒子。

下面的例子：

 /* 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模型並刪除了絕對定位。 如果需要，主要父母可以是絕對的，孩子不需要。