|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【實例】淡入淡出幻燈片/自動輪播動畫效果
作者:admin 時間:2021-9-27 17:55:44 瀏覽:本文介紹的幻燈片/輪播實例，具有淡入淡出的過渡效果，除了能自動輪播外，還可以手動點擊按鈕向左向右滑動。此外，幻燈片上還可以自定義標題和內(nèi)容。是一款比較流行的幻燈片/輪播動畫。
1、本實例使用Bootstrap插件實現(xiàn)
需要引用如下兩個文件：bootstrap.min.css、bootstrap.min.js，此外，還要引用jquery庫文件。
在<body>前面引用CSS文件：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
在<body>后面引用JS文件：
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
2、自定義輪播速度
實例需要用到的JS編程：
<script id="rendered-js" >
//$('#carouselFade').carousel(); /* 默認 */
$('#carouselFade').carousel({
interval: 3000 //改變輪播速度
})
</script>
3、字體文件不能缺
本實例向左向右箭頭圖標使用的是字體圖標，所以實例文件不能缺失如下幾個文件，且文件夾位置和名稱不能改，否則看不到向左向右箭頭圖標。
如果看不到箭頭圖標，你可能需要設(shè)置下WEB服務器環(huán)境，參考文章： Linux Nginx安裝配置Font Awesome圖標字體，IIS6.0安裝配置FontAwesome圖標字體運行環(huán)境，IIS7.5安裝配置Font Awesome圖標字體的方法。
4、自定義幻燈片/輪播圖片
幻燈片/輪播圖片在CSS樣式里定義background: url();。
.item:nth-child(1) {
background: url('1-1.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.item:nth-child(2) {
background: url('1-2.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.item:nth-child(3) {
background: url('1-3.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}5、在HTML里自定義標題和內(nèi)容
幻燈片/輪播圖片對應的HTML。
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption">
<h3>標題1</h3>
<p>內(nèi)容1</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>標題2</h3>
<p>內(nèi)容2</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>標題3</h3>
<p>內(nèi)容3</p>
</div>
</div>
</div>
您可能對以下文章也感興趣
相關(guān)文章
x
