HTML メトロポリスの HTML カルーセル画像を学ぶ

プログラミング 2024-01-09 03:07:02 訪問数: null

htmlカルーセルチャート

始まり（せせらぎ）

なぜ HTML を学んだ後、やり方がわかったと言えるのでしょうか?
なぜなら、私はそれを短期間学んだばかりであり、使用する知識はすべて基礎的なものだからです。
単純なカルーセル画像を作成する 2 つの方法
1. JavaScriptを使用して画像を解決しますカルーセル
Web ページのプレビュー[github は画像の読み込みが少し遅い場合があります Slow]
展示する
2.ブートストラップを参照してカルーセル画像の
Web プレビューを作成します[github は画像の読み込みが少し遅い場合があります]
ディスプレイ1

カルーセル チャート Javascript メソッド

プレビュー
展示する

1. まず、配置したいコンテンツを収容する div を作成します。

！ID は任意ですが、重複することはできません。

	<div id="ppt">
		<!-- 按钮 -->
        <div class="il">&lt;-</div>
        <div class="ir">-&gt;</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);
	    /* 调整图片位置 */
	    background-size: 100% auto;
	    background-position: -50% 50%;
	}

================================================= =============================================

2) ボタン CSS [ .il および .ir ]

サイズ変更ボタン

	width:50px;
	height:50px;

ボタンの位置を調整する

	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;
	
	/* 鼠标放在按钮上改变透明度 */
	.ir:hover{
    
    
    	opacity: 0.8;
	}
全体的なボタン コード (左右のボタンが左から右に変わるだけです)
	.il{
    
    
	    width:50px;
	    height:50px;
	    /* 调整按钮位置 */
	    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;
    /* 调整按钮位置 */
    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;

センターディビジョン

	left: 50%;
    margin-left:-100px;

フレックスレイアウトにより点が同一線上に維持されます

	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);

ポイントの垂直位置を設定[好みに応じて調整]

	position: relative;
    margin-top: 10px;

各ポイントのギャップを設定します[値が大きいほどギャップが大きくなります]

	margin-left: 25px;

枠線の角丸を設定して四角いドットを丸いドットにします【四角いドットにしたい場合は小さくするか削除してください】
ドットの大きさをカスタマイズして丸いドットにしたい場合は、角の丸い値はサイズの半分である必要があります。

	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 を記述します。

書き込む前に、最初に変数を定義する必要があります。
この変数は、画像のシリアル番号の任意の番号に設定できますが、 1
が最適です。

var img = 1;

1)画像を変更する

まず画像を他の画像に変更するためのメソッドを作成し、
変数を使用してIDを取得します。

	var a = document.getElementById("ppt");

次に、変数 .style.backgroundImage="url (画像パス)" を使用します。img
変数はシリアル番号を保存するために使用されます。画像名を数値のシリアル番号で整理できる名前に変更することをお勧めします。
たとえば、 : img1.png img2.png img3.png…
"url(./top/top"+img+".png)" は変数がわかりにくい場合があります [専門家以外]
画像を 4 枚とすると、
実際にはこのパスはコードをtop1.png => top4.png切り替えるには、最初の上部はフォルダー、2番目の上部はファイル名+シリアル番号です。

	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="color";
を介してポイントの色を設定し、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を設定します。

	if(img<=0){
    
    //当图片已经是最前面一张时，再次点击会使 img = 4
        img=4;
    }
    if(img>=5){
    
    //当图片已经是最后面一张时，再次点击会使 img = 1
        img=1;
    }


画像を変更する際に画像番号0や5の画像に切り替わらないように、画像の変更方法とポイントの変更方法を最後に記載します。

	change_img();
    change_dot(img);


次に、 onclick = "method"を使用してメソッドをボタンにバインドする必要があります。

	<div class="il" onclick="ppt_left()">&lt;-</div>
    <div class="ir" onclick="ppt_right()">-&gt;</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()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</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 を使用
してタイマーを定義します。

左に回転させたいので、
先ほど定義したメソッドを使用して画像を左に変更し、画像を変更します。

	ppt_time = setInterval("ppt_left()",3000);

右に回転させたいので、
先ほど定義したメソッドを使用して画像を右に変更し、画像を変更します。

	ppt_time = setInterval("ppt_right()",3000);

Web ページを開いた直後に画像の回転を開始するには、jsの先頭にwindow.onloadstart = メソッド名を
追加する必要があります; これをimg 変数の下に置くのが最善です。 Web ページが開かれるとすぐに、開始カルーセル メソッドが実行されます。

	window.onloadstart=ppt_start();//页面打开运行函数
コード全体
window.onloadstart=ppt_start();//页面打开运行函数
function ppt_start(){
    
    
	change_dot(img);//引用改变点颜色函数
    ppt_time = setInterval("ppt_right()",3000);
    // 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
    // 计时器以毫秒计算，3000 即 3s=3000ms
}

5) カルーセル写真を停止する

作成したばかりのタイマーのクリアを停止するには、clearInterval (タイマー変数)を使用します。

	clearInterval(ppt_time);

画像を自分で切り替えたいが、切り替え時に自動的に画像を回転させたくない場合は、属性οnmοuseοver="メソッド名" を
div に追加して、マウスをdiv上に置いたときにstop carousel メソッドが実行されるようにすることができます。実行される。

	<div id="ppt" onmouseover="ppt_stop()"></div>

当我们看完想看的图片后，将鼠标移走想让其继续轮播图片时
用 onmouseleave="方法名" 属性，让鼠标移离 div 时，继续轮播

	<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()"></div>
コード全体

js

// 停止函数
function ppt_stop(){
    
    
    clearInterval(ppt_time);
}

html

	<!-- 按钮 -->
    <div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
        <div class="il" onclick="ppt_left()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</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 = 1;

じゃあ写真変えて

    change_img();
    change_dot(img);

次に、onclick = "メソッド名";
を通じてメソッドをポイントにバインドします。

<!--     id             方法函数名    -->
<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()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</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 の章の終わり

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()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</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);
    /* 调整图片位置 */
    background-size: 100% auto;
    background-position: -50% 50%;
}
.il{
    
    
    width:50px;
    height:50px;
    /* 调整按钮位置 */
    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;
    /* 调整按钮位置 */
    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;
}
/* 调整每个点位置 */
#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();//页面打开运行函数

// 开始函数
function ppt_start(){
    
    
    ppt_time = setInterval("ppt_right()",3000);
    // 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
    // 计时器以毫秒计算，3000 即 3s=3000ms
    change_dot(img);//引用改变点颜色函数
}
// 停止函数
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);
}
// 改变图片的函数
function change_img(){
    
    
    var a = document.getElementById("ppt");
    //                      "url(./top/top"+图片序号+".png)"
    //                            路径|     图片名    |图片后缀
    // 改变 css 中的 background-Image
    a.style.backgroundImage="url(./top/top"+img+".png)";
}

カルーセル チャートのブートストラップ メソッド

ディスプレイ1

準備手順

Bootstrap はHTMLのライブラリであると言えます。 Bootstrapを通じて、提供されたテンプレートを使用してカルーセル コンポーネントを直接作成できます。
まず、ブートストラップ ライブラリをダウンロードする必要があります。
ダウンロードに移動====>公式 Web サイト<====Goダウンロードするには
。公式 Web サイトがない場合は、ここをクリック
してください。ただし、公式 Web サイトにアクセスするようにしてください。選択肢がない場合は、ここをクリックしてください。作成したカルーセルは、次のbootstrap.cssファイルとbootstrap.jsファイル
のみを使用します。ライブラリ. この 2 つの製品を HTML を作成することで紹介します。それだけです。カルーセル グラフを簡単に作成できます。次に、カルーセル グラフの作成方法をステップバイステップで説明します。実際には、最後までジャンプして、テンプレートを直接コピーします。

1.ブートストラップの2つのファイルを導入します

headで2 つのライブラリを導入します

	<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. カルーセル画像を保持する div を作成します。

カルーセル画像を保持するdivを作成し、 data-bs-ride属性を使用してブートストラップ ライブラリでカルーセルを取得し、カルーセル画像コンポーネントを作成します。クラスclass をカルーセル スライド
に設定します[ただし、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にdiv を作成し、クラスをcarousel-innerに設定します。

	<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
		 <div class="carousel-inner"> <!-- 这里这里，到这里了 -->
		 </div>
	</div>

2) carousel-innerクラスの下にdivを作成し、画像に必要な数だけdivを作成します。3)各divのクラスをcarousel-itemとして分類します。4) 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) carousel-itemクラスの各divで、imgを使用して画像を参照し、クラスを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でdivを作成し、クラスをcarousel-indicatorsに設定します。

	<div class="carousel-indicators">
  	</div>

2) このクラスでは、liまたはbutton を使用してボタンを作成します [ここではliを使用します]
3)各ボタンにdata-bs-target属性を追加し、その属性をカルーセル コンポーネントの IDに設定します。#
4) 追加data-bs-slide-to属性を各ボタンに設定し、その属性を0から始まるカルーセル画像のシリアル番号に設定します。5
) 最初の画像、または最初に表示する画像をクラスのアクティブな種類で

	<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の下に2 つのボタンを作成します

	<button></button>
   	<button></button>

2) 2 つのボタンのクラスはcarousel-control-prevとcarousel-control-nextです
===================[英語ではprevの前、つまり、左へ次へ次へ、つまり右へ]

	<button class="carousel-control-prev"></button>
   	<button class="carousel-control-next"></button>
  1. 属性タイプは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)ブートストラップ ライブラリをバインドし、属性data-bs-slideを通じてカスタムjsをそれぞれ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)アイコンを導入するボタンにspan属性を追加します(
これは組み込みの左側のアイコンです)。

<span class="carousel-control-prev-icon"></span>

これは組み込みの右側のアイコンです

<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>

ブートストラップの章の終わり

ブートストラップ ライブラリを使用すると、カルーセル コンポーネントをより迅速かつ便利に作成でき、効率が向上し、カスタマイズすることもできます。

完全なコード

ボタンに段階的なアニメーションを少し追加しました。

<!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>

仕上げる

JavaScriptメソッドを使用すると、独自のロジックを使用して
ブートストラップメソッドを作成できます。指定されたライブラリを使用してブートストラップ メソッドをすばやく作成できます。どちらの方法も非常に単純で、 HTML を
学習したことがある人なら誰でも実行できます。

おすすめ

転載: blog.csdn.net/weixin_46396315/article/details/129747595
おすすめ
ランキング
1028リストの並べ替え（25分）
pom.xml ファイルがアイデアによって認識されません
単一テーブルのデータのSQLクエリ組み合わせ（C）
gitのinitとgitの初期化-bare違いやソースファイルなしで問題を解決するには、WWWで見ることができません
BULLETエンジンスターター - コンパイル（cmakeのとPreMake）
vue-crossドメインの問題
ThingsBoard フロントエンド プロジェクトの組み込みコンポーネント開発
単元の学習過程での難しい問題とその解決策 -----(1)
MongoDBのデータは、クライアントで表示することができますが、作業はコマンドラインでlinuxでありません
How to check your PYTHONPATH environment variable
アーカイブ
もっと
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)

コードワールド

© 2018 codetd.com