使用css實現輪播效果
阿新 • • 發佈：2019-01-24
之前寫過一個點選切換的教程，這裡附上鍊接：
與點選切換一樣，首先先製作一個容器，用來容納所顯示的內容：
HTML程式碼：
同點擊切換一樣，根據需要設定ul的長度，這裡先製作三個切換視窗，因此將ul的寬度設定為容器寬度的300%，li即為每次切換時顯示的子元素，寬度設定為顯示容器的100%；為了將多出來的部分隱藏起來，此時就要給父元素（即顯示視窗）設定overflow:hidden;屬性<html> <head> <meta charset="utf-8"> <link href="css/test.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div class="contain"> <ul> <li class="one">one</li> <li class="two">two</li> <li class="three">three</li> </ul> </div> </div> </body> </html>
CSS程式碼：
.contain{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; overflow: hidden; } .contain ul{ margin:10px 0; padding:0; width: 1800px; } .contain li{ float: left; width: 600px; height: 200px; list-style: none; line-height: 200px; font-size: 36px; } .one{ background: #9fa8ef; } .two{ background: #ef9fb1; } .three{ background: #9fefc3; }
由於我們將ul設定成了一個寬度為父容器300%長條，此時，就可以通過修改margin-left屬性值將其左移，以此實現切換效果，接下來，建立一個動畫：
CSS程式碼：
@keyframes marginLeft{ 0%{margin-left: 0;} 28.5%{margin-left: 0;} 33.3%{margin-left: -600px;} 62%{margin-left: -600px;} 66.7%{margin-left: -1200px;} 95.2%{margin-left: -1200px;} 100%{margin-left: 0;} }
令ul標籤使用這個動畫，這裡將動畫的長度設定為10.5s，無限次播放
HTML程式碼：
<html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="contain">
<ul class="slide-auto">
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
</div>
</div>
</body>
</html>.contain .slide-auto{
animation:marginLeft 10.5s infinite;
}CSS程式碼：
.contain ul{transition:all 0.5s;}