ホームページ > 記事 > ウェブフロントエンド > JS を使用して単純なカルーセルを実装する方法の簡単な分析
JS を使用して単純なカルーセルを実装する方法の簡単な分析
- **オリジナル
- 2021-07-28 15:57:462431ブラウズ
デザインアイデア: js でタイマーを使用して画像カルーセルの効果を実現し、すべての画像を img フォルダーに入れます。この時点では 3 枚の写真を保存しました。次に、3 枚の写真をそれぞれ 3 つの div に配置します。各 div の表示と非表示はタイマーによって制御されます。左下隅にある 3 つの数字が付いた div は、これがどの写真であるかを表します。写真は合計 3 つあるため、3 つあります部
コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.imgbox{
width: 100%;
height:400px;
background-color: black;
transform: 1s;
}
.img{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:cover ;
}
.img0{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:100% ;
}
.img1{
width: 100%;
height:100%;
background-image: url(img/5572568_110213373115_2.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img2{
width: 100%;
height:100%;
background-image: url(img/5875f5fb7a8f8.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img3{
width: 100%;
height:100%;
background-image: url(img/980.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
ul{
margin-left:-30px ;
list-style-type: none;
position: relative;
margin-top: -100px;
line-height: 50px;
}
ul li{
float: left;
width: 50px;
height:50px;
border:1px solid #000000;
text-align: center;
background-color: aliceblue;
}
.div{
background-color: orange;
line-height: 50px;
}
.div1{
background-color: gainsboro;
line-height: 50px;
}
</style>
<script type="text/javascript">
var i=0;
function imgbox(){
i++;
if(i<4){
document.getElementById("img").className="img"+i;
if(i==1){
document.getElementById("one").className="div";
document.getElementById("two").className="div1";
document.getElementById("three").className="div1";
}
if(i==2){
document.getElementById("one").className="div1";
document.getElementById("two").className="div";
document.getElementById("three").className="div1";
}
if(i==3){
document.getElementById("one").className="div1";
document.getElementById("two").className="div1";
document.getElementById("three").className="div";
}
}
if(i==4){
i=0;
clearInterval('imgbox()');
}
}
setInterval('imgbox()',1000);
</script>
</head>
<body>
<div class="imgbox">
<div class="img" id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
</body>
</html>HTML を理解する
HTML は Web ページと呼ばれるもので、Web ページのファイル形式は次のとおりです。 .html形式。私たちの目には、追加のコンパイルや処理を必要としないハイパーテキスト言語であり、一度作成して開くと、それは Web ページになります。
HTML は、e388a4556c0f65e1904146cc1a846bee、c8b28895262a62371d18ac056c4442e2、d5fd7aea971a85678ba271703566ebfd、a1f02c36ba31691bcfe87b2722de723b... などの多くのタグと、1aa9e5d373740b65a0cc8f0a02150c53 、c37f8231a37e88427e62669260f0074d などのいくつかのセマンティック タグで構成されます。 ;,....
js とは:
js (JavaScript) は、文字通りのスクリプト言語です。 JavaScript スクリプトは HTML 言語に直接配置でき、js をサポートするブラウザ上で実行できます。これは Web アプリケーション開発で広く使用されており、Web ページにさまざまな動的機能を追加して、ユーザーによりスムーズで美しいブラウジング効果を提供するためによく使用されます。 Webページの閲覧中に何らかの操作が行われるとイベントが発生し、JavaScriptで記述されたプログラムが対応するイベントに応答することができます。
js タイマー: imgbox メソッドを毎秒実行するタイマー setInterval('imgbox()',1000); を定義します。imgbox メソッドには、div の画像と色の変更が含まれます
タイマーを有効にする
window オブジェクトには、タイマーの効果を実現するための 2 つのメソッド、window.setTimeout() と window.setInterval が用意されています。前者は指定された時間の後にコードを実行できますが、後者は指定された時間ごとにコードを 1 回実行できます。
window.setTimeout(code,millisec); window.setInterval(code,millisec);
このうち、コードは引用符で囲まれたコードでも関数名でもよく、指定した時刻になるとシステムが自動的に関数を呼び出します。関数名を次のように使用する ハンドルを呼び出す場合、パラメータを取ることはできませんが、文字列を使用する場合は、それに渡すパラメータを記述することができます。両方のメソッドの 2 番目のパラメーターは millisec で、遅延または繰り返し実行のミリ秒数を表します。
具体的な書き方は次のとおりです:
関数名、パラメータなし setTimeout (test,1000); 文字列、実行コード setTimeout ('test()', 1000); 匿名関数 setTimeout (function(){},1000); 注: setInterval の使用法は setTimeout と同じです
パラメータを指定して関数を呼び出します setTimeout ('test(parameter)',1000);
div レイアウト: レイアウトには ul、li を使用します
スタイルを次のように変更します:
ul{
margin-left:-30px ;//据左部边距
list-style-type: none;//去除默认ul样式
position: relative;//采用相对定位
margin-top: -100px;//据顶部边距
line-height: 50px;//行高
}
ul li{
float: left;//浮动
width: 50px;
height:50px;
border:1px solid #000000;//边框
text-align: center;//文字居中
background-color: aliceblue;
}Html 構造:
<div> <div id="img"></div> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </div>
Img は大きな div ボックスです、img は画像、ff6d136ddc5fdfeffaf53ff6ee95f185画像番号 li が含まれます。
以上がJS を使用して単純なカルーセルを実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。