純css實現的無縫滾動

02-08

話不多說，先展示效果：css3無縫滾動

具體代碼實現：

<!doctype html><html><head> <meta charset="utf-8"> <title>標題</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> *{padding: 0;margin: 0;} .out{ width: 900px; height: 300px; margin: 20px auto; overflow: hidden; text-align: center; } .con{ width: 3300px; height: 300px; overflow: hidden; animation: move 8s linear infinite normal; animation-fill-mode:forwards; } .con:hover{ animation-play-state:paused; -webkit-animation-play-state:paused; } .con li{ float: left; list-style: none; overflow: hidden; } .con img{ float: left; width: 300px; height: 300px; } .pause{ position: relative; height: 60px; display: inline-block; margin: 20px auto; text-align: center; } .pause:before{ position: absolute; content: "暫停"; display: inline-block; width: 100px; height: 60px; left: 0px; line-height: 60px; font-size: 20px; color: #fff; margin: 0 20px; background: orange; border: none; border-radius: 20px; outline: none; } @keyframes move{ 0%{transform:translateX(0px);} 100%{transform:translateX(-2400px);} } .out input{ display: none; } .out input:checked ~ .con{ animation-play-state:paused; -webkit-animation-play-state:paused; } .out input:checked ~ .pause:before{ content: "滾動"; } </style></head><body> <div class="out"> <input id="ipt1" type="checkbox" name="" value=""> <label for="ipt1" class="pause"> </label> <ul class="con"> <li><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> <li><img src="img/04.jpg" alt=""></li> <li><img src="img/05.jpg" alt=""></li> <li><img src="img/06.jpg" alt=""></li> <li><img src="img/07.jpg" alt=""></li> <li><img src="img/08.jpg" alt=""></li> <li><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> </ul> </div> <script> /*var con=document.querySelector(.con); var control=document.getElementsByTagName(button); var state=true; var direction=true; control[0].onclick=function(){ if(state){ this.innerHTML="滾動"; con.style.animationPlayState="paused"; state=false; }else{ this.innerHTML="暫停"; con.style.animationPlayState="running"; state=true; } }*/ </script></body></html>

對於小白，可能會摸不著頭腦，大神請跳過（估計也沒有那個大神會看到），現在具體簡介一下實現步驟：

一、結構搭建：

首先我們創建了一個類名為out的容器，用於包括無縫滾動，先跳過input框（這個是重點，後面講），然後創建一個ul列表，內部li浮動布局，已清除橫向間距和保證橫向布局，這裡的布局要點是：子列表li有多少，父元素ul至少全包括li，也就是不能比所有子元素的寬度總和低；

二、滾動思想：

這裡實現的無縫滾動，有兩種基本的思想;

第一種：通過父元素的scrollLeft逐漸增加來實現；

第二種：通過css3的translate來實現，這裡採用的第二種；

三、滾動動畫實現：

主要運用animation動畫：

@keyframes move{ 0%{transform:translateX(0px);} 100%{transform:translateX(-2400px);} }

這裡100%的時候移動的距離是你一次性想要展示的所有圖片的寬度，並不是ul的寬度；

四、css3模仿點擊事件：

主角：input：checkbox；

我們都知道chenckbox有兩種狀態：選中和未選中；那麼我們就可以用選中狀態來展示點擊的效果變化；

label標籤：增加滑鼠的可用性；因此我在label中放了一個按鈕，然後使label的for指向input；那麼當點擊按鈕的時候，就會選中chenckbox；

在css3中有著強大的選擇器；比如input：checked；當chenckbox選中的時候被選擇；在比如：e ~ e：當前元素後面的所有同輩元素，現在是不是有點思路了呢?

流程就是：

當點擊按鈕的時候，觸發checkbox的check選擇器，同時通過 ~ 選擇器選擇checkbox 後面的元素，使其改變樣式（這裡就是動畫暫停）；

五、關於按鈕上的文字變化：

就我目前所掌握的（不用插件的情況下），可以使用偽元素的contenr（）方法來動態改變偽元素的文字；

總結：

利用表單元素的自帶特性和css選擇器巧妙模仿點擊事件。