話不多說，先展示效果：
css3無縫滾動
具體代碼實現：
<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浮動布局，已清除橫向間距和保證橫向布局css 中設置滾動條顏色，這里的布局要點是：子列表li有多少，父元素ul至少全包括licss 中設置滾動條顏色，也就是不能比所有子元素的寬度總和低；
二、滾動思想：
這里實現的無縫滾動，有兩種基本的思想;
第一種：通過父元素的逐漸增加來實現；
第二種：通過css3的來實現，這里采用的第二種；
三、滾動動畫實現：
主要運用動畫：
@keyframes move{
0%{transform:translateX(0px);}
100%{transform:translateX(-2400px);}
}
這里100%的時候移動的距離是你一次性想要展示的所有圖片的寬度，并不是ul的寬度；
四、css3模仿點擊事件：
主角：input：；
我們都知道有兩種狀態：選中和未選中；那么我們就可以用選中狀態來展示點擊的效果變化；
label標簽：增加鼠標的可用性；因此我在label中放了一個按鈕，然后使label的for指向input；那么當點擊按鈕的時候，就會選中；
在css3中有著強大的選擇器；比如input：；當選中的時候被選擇；在比如：e ~ e：當前元素后面的所有同輩元素，現在是不是有點思路了呢?
流程就是：
當點擊按鈕的時候，觸發的check選擇器，同時通過 ~ 選擇器選擇后面的元素，使其改變樣式（這里就是動畫暫停）；
五、關于按鈕上的文字變化：
就我目前所掌握的（不用插件的情況下），可以使用偽元素的（）方法來動態改變偽元素的文字；
總結：
利用表單元素的自帶特性和css選擇器巧妙模仿點擊事件。