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