開篇(嘮嗑)
為什么說學過html都會?
因為我也剛學沒多久，所運用的知識都是基礎
兩種方法創(chuàng)建出簡單的輪播圖
1.通過 javascript 去解決圖片輪播
網(wǎng)頁預覽[github可能圖片加載的有點慢]
2.通過引用 bootstrap 去創(chuàng)建輪播圖
網(wǎng)頁預覽[github可能圖片加載的有點慢]
輪播圖Javascript方法
預覽
1.先創(chuàng)建 div 去容納要放進去的內(nèi)容
！id 隨意，但不能重復！
<div id="ppt">
<!-- 按鈕 -->
<div class="il"><-</div>
<div class="ir">-></div>
<!-- 圖片對應的點，有多少張圖片就放多少點 -->
<div id="ppt_dot">
<div id="pd1"></div>
<div id="pd2"></div>
<div id="pd3"></div>
<div id="pd4"></div>
</div>
</div>
================================================================================================
2.寫css修飾
1)先將 ppt 的整體設置好 [ #ppt ]
position: absolute;
width: 100%;
height:600px;
將圖片設為背景
background-image:url(./top/top1.png);
url 所對應的路徑要看好，不然圖片不會出來
./文件夾 為根目錄的文件夾
…/文件夾 為返回上一級的文件夾
將圖片背景設置為不重復
background-repeat: no-repeat;
讓圖片背景寬度填滿高度自動，且圖片背景居中
background-size: 100% auto;
background-position: -50% 50%;
ppt 整體的代碼為
#ppt{
position: absolute;
width: 100%;
height:600px;
/* 將圖片設成不重復 */
background-repeat: no-repeat;
background-image:url(./top/top1.png);
/* 調(diào)整圖片位置 */
background-size: 100% auto;
background-position: -50% 50%;
}
================================================================================================
2) 按鈕的css[ .il 和 .ir ]
調(diào)整按鈕大小
width:50px;
height:50px;
調(diào)整按鈕位置
position: absolute;
top: 30%;
left: 3%;
設置按鈕顏色
白色
background-color: aliceblue;
裝飾下按鈕
/* 只是為了讓內(nèi)容水平垂直居中 */
line-height: 48px;
text-align: center;
/* 設置圓角邊框 */
border-radius: 5px;
/* 設置透明度 */
opacity: 0.3;
/* 設置動畫 */
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
/* 鼠標放在按鈕上改變透明度 */
.ir:hover{
opacity: 0.8;
}
整體的按鈕代碼(左右按鈕只是將 left 改成 right )
.il{
width:50px;
height:50px;
/* 調(diào)整按鈕位置 */
position: absolute;
top: 30%;
left: 3%;/* 左右按鈕不一樣的地方*/
/* 按鈕顏色 */
background-color: aliceblue;
/* 裝飾按鈕 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
}
.il:hover{
opacity: 0.8;
}
.ir{
width:50px;
height:50px;
/* 調(diào)整按鈕位置 */
position: absolute;
top: 30%;
right: 3%;/* 左右按鈕不一樣的地方*/
/* 按鈕顏色 */
background-color: aliceblue;
/* 裝飾按鈕 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: 500ms;
}
.ir:hover{
opacity: 0.8;
}
================================================================================================
3)裝點的 div[ #ppt_dot ]
設置位置，設置大小，得看你由多少張圖片對應多少點設置
position: absolute;
width:200px;
height:30px;
將背景設置成透明
并將 div 設置到底端
background: none;
bottom:0px;
居中 div
left: 50%;
margin-left:-100px;
flex 布局使點在同一條線上
display: flex;
整體代碼如下
#ppt_dot{
position: absolute;
width:200px;
height:30px;
background: none;
bottom:0px;
left: 50%;
margin-left:-100px;
display: flex;
}
================================================================================================
4)每個點的css[ #pd1 #pd2 #pd3 #pd4 ]
設置點大小
width:10px;
height: 10px;
設置點 沒選中 時的顏色[這個顏色為黑灰色]
background:rgb(34, 34, 34);
設置點垂直位置[根據(jù)自己喜好調(diào)]
position: relative;
margin-top: 10px;
設置每個點的空隙[數(shù)值越大，空隙越大]
margin-left: 25px;
設置邊框圓角，讓 方點 變成 圓點 [想用方點調(diào)小或刪掉即可]
如果自定了點的大小，想設置成圓點，圓角數(shù)值應為大小的一半
border-radius: 5px;
設置點的透明度[也可以不用加]
opacity: 0.8;
整體代碼如下
#pd1,#pd2,#pd3,#pd4{
width:10px;
height: 10px;
background:rgb(34, 34, 34);
position: relative;
margin-top: 10px;
margin-left: 25px;
border-radius: 5px;
opacity: 0.8;
}
3.寫JavaScript讓圖片動起來
寫之前需要在開頭定義個變量
這個變量可以設置為你圖片序號的任意數(shù)字
但最好還是1
var img = 1;
1)改變圖片
先創(chuàng)建個方法，讓圖片能變成其他的圖片
先用個變量獲取 id
var a = document.getElementById("ppt");
再用 變量.style.backgroundImage=“url(圖片路徑)”;
img變量用來儲存序號，最好將圖片名字重命名為可以由數(shù)字序號排列的名字
例如：img1.png img2.png img3.png …
“url(./top/top”+img+“.png)” 可能有變量難理解[高手除外哈]
假設四張圖片，
其實這個路徑就是從 top1.png => top4.png 中切換
我這個代碼的第一個top是文件夾，第二個top是文件名+序號
a.style.backgroundImage="url(./top/top"+img+".png)";
整體代碼
function change_img(){
var a = document.getElementById("ppt");
// "url(./top/top"+圖片序號+".png)"
// 路徑| 圖片名 |圖片后綴
// 改變 css 中的 background-Image
a.style.backgroundImage="url(./top/top"+img+".png)";
}
2)改變點的顏色
先用變量獲取 id
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
通過 switch 來判斷 img
記得在定義方法時引入變量
switch(img){
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
}
最后在每個對應的變量，去設置點的顏色
通過 變量.style.backgroundColor=“顏色”;
去改變 css 中的 background-Color 屬性
a.style.backgroundColor="顏色";
b.style.backgroundColor="顏色";
c.style.backgroundColor="顏色";
d.style.backgroundColor="顏色";
最后代碼拼接起來，整體如下
// 改變點的顏色
function change_dot(img){
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
// 通過 switch 去判斷并改變 css 中的 background-Color
switch(img){
case 1:
a.style.backgroundColor="rgb(202, 202, 202)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 2:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(202, 202, 202)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 3:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(202, 202, 202)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 4:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(202, 202, 202)";
break;
}
}
3)向左向右切換圖片
向左向右切換圖片無非就是改變變量
向左:變量-1 向右:變量+1
img--;//向左
img++;//向右
但是不能一直減下去
通過 if 去判斷，并將 變量img 設置成 開頭或結(jié)尾
if(img<=0){//當圖片已經(jīng)是最前面一張時，再次點擊會使 img = 4
img=4;
}
if(img>=5){//當圖片已經(jīng)是最后面一張時，再次點擊會使 img = 1
img=1;
}
把改變圖片的方法和改變點的方法放到最后
能使圖片變換時不會切換到圖片序號為 0 或 5 的圖片
change_img();
change_dot(img);
然后我們需要將方法跟按鈕綁定
用 onclick = “方法” 綁定
<div class="il" onclick="ppt_left()"><-</div>
<div class="ir" onclick="ppt_right()">-></div>
整體代碼如下
js
// 向左切換圖片
function ppt_left(){
img--;
if(img<=0){
img=4;
}
change_img();
change_dot(img);
}
// 向右切換圖片
function ppt_right(){
img++;
if(img>=5){
img=1;
}
change_img();
change_dot(img);
}
html
<div id="ppt">
<!-- 按鈕 -->
<div class="il" onclick="ppt_left()"><-</div>
<div class="ir" onclick="ppt_right()">-></div>
<!-- 圖片對應的點，有多少張圖片就放多少點 -->
<div id="ppt_dot">
<div id="pd1"></div>
<div id="pd2"></div>
<div id="pd3"></div>
<div id="pd4"></div>
</div>
</div>
4)開始輪播圖片
為了讓圖片隔一段時間切換
運用 setInterval 來定義一個計時器
格式為 變量 = setInterval (函數(shù),延遲);
我想讓他向左輪播
那就用我們剛剛定義的 向左改變圖片 的方法去 改變圖片:
ppt_time = setInterval("ppt_left()",3000);
我想讓他向右輪播
那就用我們剛剛定義的 向右改變圖片 的方法去 改變圖片:
ppt_time = setInterval("ppt_right()",3000);
為了讓網(wǎng)頁一打開，圖片就開始輪播，那就需要再 js 最頂部，
加入 window.onloadstart = 方法名 ;
最好時在 img變量 的下面
這樣網(wǎng)頁一打開，就會運行 開始輪播方法
window.onloadstart=ppt_start();//頁面打開運行函數(shù)
整體代碼
window.onloadstart=ppt_start();//頁面打開運行函數(shù)
function ppt_start(){
change_dot(img);//引用改變點顏色函數(shù)
ppt_time = setInterval("ppt_right()",3000);
// 設置計時器輪播圖片,越小越快，可以向左輪播，也可以向右輪播，該函數(shù)即可
// 計時器以毫秒計算，3000 即 3s=3000ms
}
5)停止輪播圖片
通過 clearInterval(計時器變量) 來停止清除剛剛創(chuàng)建的計時器
clearInterval(ppt_time);
當我們想自己切換圖片，但又不想在切換時自動輪播圖片，
我們就可以在 div 中加入 οnmοuseοver=”方法名“ 的屬性，
使得鼠標放在 div 上時，運行 停止輪播 方法
<div id="ppt" onmouseover="ppt_stop()"></div>
當我們看完想看的圖片后，將鼠標移走想讓其繼續(xù)輪播圖片時
用 onmouseleave="方法名" 屬性，讓鼠標移離 div 時，繼續(xù)輪播
<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()"></div>
整體代碼
js
// 停止函數(shù)
function ppt_stop(){
clearInterval(ppt_time);
}
html
<!-- 按鈕 -->
<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
<div class="il" onclick="ppt_left()"><-</div>
<div class="ir" onclick="ppt_right()">-></div>
<div id="ppt_dot">
<div id="pd1"></div>
<div id="pd2"></div>
<div id="pd3"></div>
<div id="pd4"></div>
</div>
</div>
6)點擊對應點切換對應圖片
因為點擊 點 然后切換圖片
所以我們得先將 img 設置成對應點的 點
img = 1;
然后再改變圖片
change_img();
change_dot(img);
然后再將方法綁定到 點 上
通過 onclick = “方法名”;
<!-- id 方法函數(shù)名 -->
<div id="pd1" onclick="click_dot1()"></div>
整體代碼
有多少點，就定義多少方法，按照圖片序號，去改變方法名和變量
js
//每個點的被點擊切換對應圖片
function click_dot1(){
img=1;
change_img();
change_dot(img);
}
function click_dot2(){
img=2;
change_img();
change_dot(img);
}
function click_dot3(){
img=3;
change_img();
change_dot(img);
}
function click_dot4(){
img=4;
change_img();
change_dot(img);
}
html
<!-- 按鈕 -->
<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
<div class="il" onclick="ppt_left()"><-</div>
<div class="ir" onclick="ppt_right()">-></div>
<div id="ppt_dot">
<div id="pd1" onclick="click_dot1()"></div>
<div id="pd2" onclick="click_dot2()"></div>
<div id="pd3" onclick="click_dot3()"></div>
<div id="pd4" onclick="click_dot4()"></div>
</div>
</div>
javascript篇結(jié)束
通過 html+css+javascript 的運用，使得圖片能夠輪播
沒啥技術含量，學得差不多，有邏輯，就能想的出來
整體代碼
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入css -->
<link rel="stylesheet" href="index.css">
<title>輪播圖</title>
</head>
<!-- 引入js -->
<script src="index.js">
</script>
<body>
<!-- 按鈕 -->
<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
<div class="il" onclick="ppt_left()"><-</div>
<div class="ir" onclick="ppt_right()">-></div>
<div id="ppt_dot">
<div id="pd1" onclick="click_dot1()"></div>
<div id="pd2" onclick="click_dot2()"></div>
<div id="pd3" onclick="click_dot3()"></div>
<div id="pd4" onclick="click_dot4()"></div>
</div>
</div>
</body>
</html>
css
#ppt{
position: absolute;
width: 100%;
height:600px;
/* 將圖片設成不重復 */
background-repeat: no-repeat;
background-image:url(./top/top1.png);
/* 調(diào)整圖片位置 */
background-size: 100% auto;
background-position: -50% 50%;
}
.il{
width:50px;
height:50px;
/* 調(diào)整按鈕位置 */
position: absolute;
top: 30%;
left: 3%;
/* 按鈕顏色 */
background-color: aliceblue;
/* 裝飾按鈕 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: opacity 500ms;
}
.il:hover{
opacity: 0.8;
}
.ir{
width:50px;
height:50px;
/* 調(diào)整按鈕位置 */
position: absolute;
top: 30%;
right: 3%;
/* 按鈕顏色 */
background-color: aliceblue;
/* 裝飾按鈕 */
line-height: 48px;
text-align: center;
border-radius: 5px;
opacity: 0.3;
transition: opacity 500ms;
-webkit-transition: 500ms;
}
.ir:hover{
opacity: 0.8;
}
/* 裝點的盒子 */
#ppt_dot{
position: absolute;
width:200px;
height:30px;
background: none;
bottom:0px;
left: 50%;
margin-left:-100px;
display: flex;
}
/* 調(diào)整每個點位置 */
#pd1,#pd2,#pd3,#pd4{
width:10px;
height: 10px;
background:rgb(34, 34, 34);
position: relative;
margin-top: 10px;
margin-left: 25px;
border-radius: 5px;
opacity: 0.8;
}
js
var img = 1;//起始圖片序號
window.onloadstart=ppt_start();//頁面打開運行函數(shù)
// 開始函數(shù)
function ppt_start(){
ppt_time = setInterval("ppt_right()",3000);
// 設置計時器輪播圖片,越小越快，可以向左輪播，也可以向右輪播，該函數(shù)即可
// 計時器以毫秒計算，3000 即 3s=3000ms
change_dot(img);//引用改變點顏色函數(shù)
}
// 停止函數(shù)
function ppt_stop(){
clearInterval(ppt_time);
}
// 向左切換圖片
function ppt_left(){
img--;
if(img<=0){
img=4;
}
change_img();
change_dot(img);
}
// 向右切換圖片
function ppt_right(){
img++;
if(img>=5){
img=1;
}
change_img();
change_dot(img);
}
// 改變點的顏色
function change_dot(img){
var a = document.getElementById("pd1");
var b = document.getElementById("pd2");
var c = document.getElementById("pd3");
var d = document.getElementById("pd4");
// 通過 switch 去判斷并改變 css 中的 background-Color
switch(img){
case 1:
a.style.backgroundColor="rgb(202, 202, 202)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 2:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(202, 202, 202)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 3:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(202, 202, 202)";
d.style.backgroundColor="rgb(34, 34, 34)";
break;
case 4:
a.style.backgroundColor="rgb(34, 34, 34)";
b.style.backgroundColor="rgb(34, 34, 34)";
c.style.backgroundColor="rgb(34, 34, 34)";
d.style.backgroundColor="rgb(202, 202, 202)";
break;
}
}
//每個點的被點擊切換對應圖片
function click_dot1(){
img=1;
change_img();
change_dot(img);
}
function click_dot2(){
img=2;
change_img();
change_dot(img);
}
function click_dot3(){
img=3;
change_img();
change_dot(img);
}
function click_dot4(){
img=4;
change_img();
change_dot(img);
}
// 改變圖片的函數(shù)
function change_img(){
var a = document.getElementById("ppt");
// "url(./top/top"+圖片序號+".png)"
// 路徑| 圖片名 |圖片后綴
// 改變 css 中的 background-Image
a.style.backgroundImage="url(./top/top"+img+".png)";
}
輪播圖bootstrap方法
準備說明
bootstrap 可以說是 html 的一個庫，通過 bootstrap 我們可以通過給的模板，直接創(chuàng)建一個輪播圖組件
我們得先將 bootstrap庫 給下載下來
去下載====> 官網(wǎng) <====去下載
打不開官網(wǎng)的話，點 這里
但是盡量在官網(wǎng)下，迫不得已再點 這里
我們制作的輪播圖，僅僅只是用到了庫里的 bootstrap.css 和 bootstrap.js 文件
我們通過創(chuàng)建 html 來引入這兩貨，就能簡單的制作出輪播圖
接下來，一步一步，教你創(chuàng)建輪播圖，其實你可以跳轉(zhuǎn)到最后，直接抄模板
1.引入 bootstrap 的兩個文件
在 head 中，引入兩個庫
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
整體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.css">
<title>輪播圖bootstrap</title>
<script src="bootstrap.js"></script>
</head>
<body>
</body>
</html>
2.創(chuàng)個 div 裝輪播圖
創(chuàng)建個 div 去裝輪播圖，通過 data-bs-ride 屬性，來獲取 bootstrap庫 里的 carousel 創(chuàng)建輪播圖組件
將 class 類設置為 carousel slide [除了 ppt 可以改成任意名字外，其他的別動]
ppt 為輪播圖組件的 id
data-bs-interval 屬性為設置輪播圖播放速度，以 毫秒/ms 為單位
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000"></div>
3.輪播圖的設置
1)首先在 ppt 里，再創(chuàng)個 div ，將 class 類設置為 carousel-inner 。
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner"> <!-- 這里這里，到這里了 -->
</div>
</div>
2)在 class 為 carousel-inner 的類下，創(chuàng)建 div ，要多少圖片，就創(chuàng)建多少 div 。
3)將每個 div 的 class 類為 carousel-item 。
4)有個特殊的 class 為 carousel-item active ，這個 div 則是第一個展示的 div
<div class="carousel-inner">
<div class="carousel-item active"> <!-- 這里這里，到這里了 -->
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
5)在每個 class 為 carousel-item 的 div 中，用 img 去引用圖片，將 class 都設置為 d-block，并將寬度都設置為 100%
<img src="top1.png" class="d-block" style="width:100%">
整體代碼如下
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="top1.png" class="d-block" style="width:100%"> <!-- 這里這里，到這里了 -->
</div>
<div class="carousel-item">
<img src="top2.png" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="top3.png" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="top4.png" class="d-block" style="width:100%">
</div>
</div>
</div>
4.設置下欄的小橫杠[即為JavaScript版的點]
1)在 ppt 下，創(chuàng)建 div ，將 class 類設置為 carousel-indicators
<div class="carousel-indicators">
</div>
2)在此類里，用 li 或者 button 創(chuàng)建出按鈕 [這里我用 li ]
3)將每個按鈕都增加上 data-bs-target 屬性，屬性設置為輪播圖組件的 id，記得 #
4)將每個按鈕都增加上 data-bs-slide-to 屬性，屬性設置為輪播圖序號，以 0 開頭
5)將第一個，或者你想讓哪張圖片先展示，就添加 class 為 active 的類
<li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#ppt" data-bs-slide-to="1"></li>
<li data-bs-target="#ppt" data-bs-slide-to="2"></li>
<li data-bs-target="#ppt" data-bs-slide-to="3"></li>
整體代碼如下
這個 div 在 ppt 的 div 里
<div class="carousel-indicators">
<li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#ppt" data-bs-slide-to="1"></li>
<li data-bs-target="#ppt" data-bs-slide-to="2"></li>
<li data-bs-target="#ppt" data-bs-slide-to="3"></li>
</div>
5.左右切換按鈕
1)在 ppt 下，創(chuàng)建兩個按鈕
<button></button>
<button></button>
2)兩個按鈕的 class 分別為 carousel-control-prev 和 carousel-control-next
===================[看英文都知道 prev 之前，即往左 next 下一個，即向右]
<button class="carousel-control-prev"></button>
<button class="carousel-control-next"></button>
- 屬性 type 都為 button ， 屬性 data-bs-target 都為 #ppt
<button class="carousel-control-prev" type="button" data-bs-target="#ppt"></button>
<button class="carousel-control-next" type="button" data-bs-target="#ppt"></button>
4)綁定 bootstrap庫 自定的 js
通過屬性 data-bs-slide 分別設置為 prev 和 next
-------------------------------------------------向左----向右
<button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev"></button>
<button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next"></button>
5)在 button 里加入 span 屬性，去引入圖標
這是內(nèi)置的左圖標
<span class="carousel-control-prev-icon"></span>
這是內(nèi)置的右圖標
<span class="carousel-control-next-icon"></span>
你也可以自定義圖標，可以自己通過 css 去自定義按鈕的大小[默認的按鈕很大]
這些都是可以自定義樣式的，包括下面的 小橫杠[點]
整體代碼如下
<button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
bootstrap篇結(jié)束
bootstrap庫 ，可以讓我們更快，更方便的創(chuàng)建一個輪播圖組件，提升效率，而且還可以自定義
完整代碼
我僅僅只是給按鈕添加了點逐漸明顯的動畫文章來源：http://www.zghlxwxcb.cn/news/detail-772009.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.css">
<title>Document</title>
<script src="bootstrap.js"></script>
<style>
/* 自定的按鈕動畫 */
.carousel-control-prev{/* 這里這里 */
opacity: 0.3;/* 這里這里 */
transition: all 500ms;/* 這里這里 */
}/* 這里這里 */
.carousel-control-next{/* 這里這里 */
opacity: 0.3;/* 這里這里 */
transition: all 500ms;/* 這里這里 */
}
</style>
</head>
<body>
<!-- 輪播 -->
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
<!-- 輪播圖片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="top1.png" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="top2.png" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="top3.png" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="top4.png" class="d-block" style="width:100%">
</div>
</div>
<!-- 左右切換按鈕 -->
<button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
<!-- 點 -->
<div class="carousel-indicators">
<li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#ppt" data-bs-slide-to="1"></li>
<li data-bs-target="#ppt" data-bs-slide-to="2"></li>
<li data-bs-target="#ppt" data-bs-slide-to="3"></li>
</div>
</div>
</body>
</html>
結(jié)束
JavaScript 方法我們可以通過自己的邏輯，去創(chuàng)建
bootstrap 方法我們可以通過給定的庫，去快速的創(chuàng)建
兩種方法都很簡單，學過 html 的都會！文章來源地址http://www.zghlxwxcb.cn/news/detail-772009.html
到了這里，關于學過html都會的html輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
