ネイティブJavaScriptでカルーセルを実装する

この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果：

コード：

<!DOCTYPE html>
<html>

 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
 * {
 マージン: 0;
 パディング: 0;
 }
 
 ウル、
 li {
 リストスタイル: なし;
 }
 
 .バナー{
 幅: 1200ピクセル;
 高さ: 535px;
 境界線: 1px 実線の赤;
 マージン: 0 自動;
 位置: 相対的;
 }
 
 .スライダー li {
 位置: 絶対;
 左: 0;
 上: 0;
 }
 
 {
 幅: 40px;
 高さ: 50px;
 背景色: rgba(0, 0, 0, 0.1);
 フォントサイズ: 50px;
 テキスト配置: 中央;
 行の高さ: 50px;
 位置: 絶対;
 テキスト装飾: なし;
 色: グレー;
 }
 
 .btnl {
 左: 0;
 上位: 50%;
 上マージン: -15px;
 }
 
 .btnr{
 右: 0;
 上位: 50%;
 上マージン: -25px;
 }
 
 .タブ {
 位置: 絶対;
 下: 20px;
 左: 50%;
 左マージン: -75px;
 }
 
 .タブ li {
 幅: 15px;
 高さ: 15px;
 背景色: #ccc;
 境界線の半径: 50%;
 フロート: 左;
 右マージン: 10px;
 }
 </スタイル>
 </head>

 <本文>
 <div class="banner">
 <ul class="スライダー">
 <li><img src="img/b1.jpg" alt="" /></li>
 <li><img src="img/b2.jpg" alt="" /></li>
 <li><img src="img/b3.jpg" alt="" /></li>
 <li><img src="img/b4.jpg" alt="" /></li>
 <li><img src="img/b5.jpg" alt="" /></li>
 <li><img src="img/b6.jpg" alt="" /></li>
 </ul>
 <a href="javascript:void(0);" class="btnl">
 <</a>
 <a href="javascript:void(0);" class="btnr">></a>
 <ul class="タブ">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <script type="text/javascript">
 var バナー = document.getElementsByClassName("バナー")[0];
 var スライダー = document.getElementsByClassName("スライダー")[0];
 var li = slider.getElementsByTagName("li");
 var btnl = document.getElementsByClassName("btnl")[0];
 var btnr = document.getElementsByClassName("btnr")[0];
 var タブ = document.getElementsByClassName("タブ")[0];
 var btns = tabs.getElementsByTagName("li");

 //初期化 btns[0].style.backgroundColor = "red";

 for(var i = 0; i < li.length; i++) {
 もし(i == 0) {
 続く;
 } それ以外 {
 li[i].style.opacity = 0;
 }
 }

 var タイマー = setInterval(ムーバー、1000);

 //現在の画像の添え字を表す変数を宣言します。var num = 0;

 関数ムーバー() {
 数値++;
 if(num == li.length) {
 数値 = 0;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "赤";

 }

 関数movel() {
 数値--;
 if(数値 == -1) {
 数値 = li.長さ - 1;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "赤";
 }

 バナー.onmouseover = 関数() {
 クリアインターバル(タイマー)
 }

 バナー.onmouseout = 関数() {
 タイマー = setInterval(ムーバー、1000)
 }

 btnl.onclick = 関数(e) {
 移動();
 }
 btnr.onclick = 関数(e) {
 ムーバー();
 }

 // 小さなドット効果 for(var i = 0; i < btns.length; i++) {
 btns[i].インデックス = i;
 btns[i].onmouseover = 関数() {
 if(this.index == num) {
 戻る;
 } それ以外 {
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[this.index].style.opacity = 1;
 btns[this.index].style.background="赤";
 num=このインデックス;
 }
 }
 }
 </スクリプト>
 </本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: