輪播圖：就是多張圖片按照一定的時間和順序依次從某個窗口來向用戶展示圖片
輪播圖的實現(xiàn)代碼：
1）創(chuàng)建一個容器來進行輪播圖的展示
這里的容器就是最外部的盒子
注意最外部盒子設(shè)置寬高時要與我們進行展示的圖片的寬高保持一致，這樣就可以保證一次輪播一張圖片
最外部的盒子
<div class="box1></div>最外部盒子的css樣式
.box1{
width:722px;
height:358px;
margin:0 auto;
overflow: hidden;
}
/* overflow: hidden;
溢出隱藏 并且不占有位置 當沒有添溢出隱藏時 圖片的展示如上圖所示? */
?2）創(chuàng)建一個盒子來存存儲所有的圖片
<div class="box"></div>放置所有的圖片的容器的樣式的設(shè)置 這里為了讓所有的圖片在一行顯示如上圖所示，需要給盒子足夠的寬，
.box{
width:2200px;
height:352px;
}同時第一個盒子添加 ?overflow: hidden; 呈現(xiàn)出來的總體樣式是
?這是因為其他圖片隱藏了
3)添加圖片
這里為盒子里面的圖片設(shè)置樣式：
.box img{
float: left;
height: 352px;
width: 722px;
}?4）這是最重要的一步 css動畫的添加實現(xiàn)圖片輪播
CSS 動畫用于實現(xiàn)元素從一個 CSS 樣式配置轉(zhuǎn)換到另一個 CSS 樣式配置。
動畫包括兩個部分：描述動畫的樣式規(guī)則和用于指定動畫開始，結(jié)束以及中間
? animation: move 20s infinite;? ?這里使用了 animation 的簡寫屬性，將動畫與div 元素綁定
然后利用：@keyframes 規(guī)則進行圖片輪播。
transform:translate();的應(yīng)用 請參考：
http://t.csdn.cn/o8Wns
上完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>輪播圖</title>
</head>
<!-- style 里面是css樣式 因為代碼較少就沒有再次創(chuàng)建 -->
<style>
/* 盒子1的樣式 */
.box1{
width:722px;
height:358px;
margin: 0 auto;
/* 超出的位置將隱藏并且不占位 */
overflow: hidden;
}
.box{
width: 2200px;
height: 352px;
animation: move 20s infinite;
}
@keyframes move {
0%{
transform: translateX(0);
}
30%{
transform: translateX(-722px);
}
60%{
transform: translateX(-1422px);
}
100%{
transform: translateX(-1422px);
}
}
.box img{
float: left;
height: 352px;
width: 722px;
}
</style>
<body>
<div class="box1">
<div class="box">
<img src="./images/img.jpg" alt="">
<img src="./images/img2.jpg" alt="">
<img src="./images/img3.jpg" alt="">
</div>
</div>
</body>
</html>?漸變實現(xiàn)輪播圖：
漸變實現(xiàn)輪播圖相對來說比較簡單，這里是把圖片疊放在一個盒子里讓上面的圖片顏色漸漸變淡下面的圖片顯示出來，這里我把圖片放進了樣式里面這是一種比較取巧的方法
建議疊放圖片參考
http://t.csdn.cn/8HEk3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>輪播圖</title>
</head>
<!-- style 里面是css樣式 因為代碼較少就沒有再次創(chuàng)建 -->
<style>
/* 盒子1的樣式 */
.focus{
margin:0 auto;
width: 700px;
height: 322px;
animation: focus 20s infinite;
}
@keyframes focus {
0%{
background-image: url("./images/img.jpg");
}
50%{
background-image: url("./images/img2.jpg");
}
100%{
background-image: url("./images/img3.jpg");
}
}
</style>
<body>
<div class="focus">
</div>
</body>
</html>作者是一個萌新小白如果有什么錯誤歡迎指出，互相交流共同成長，文章有借鑒下面兩位大大的博客，勿見怪?。。。?/p>
http://t.csdn.cn/DBjqm 自動輪播圖的借鑒
http://t.csdn.cn/cjcxz 漸變輪播圖的借鑒文章來源：http://www.zghlxwxcb.cn/news/detail-406742.html
圖片來源：王者榮耀官方網(wǎng)站文章來源地址http://www.zghlxwxcb.cn/news/detail-406742.html
到了這里，關(guān)于css實現(xiàn)輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
