コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js は setInterval タイマー メソッドを使用してカルーセル チャートを実装する方法 (完全なコード)

js は setInterval タイマー メソッドを使用してカルーセル チャートを実装する方法 (完全なコード)

不言
リリース： 2018-08-13 16:08:36
オリジナル
8121 人が閲覧しました

この記事の内容は、js が setInterval タイマー メソッドを使用してカルーセル画像を実装する方法に関するものです (完全なコード)。必要な方は参考にしていただければ幸いです。

昔面接に行った時、面接官から「カルーセルを手書きで書いてください」と言われ、まだ出たばかりだったのでjsが苦手で書けないと言いました。高い給料が欲しい、まだ js を知る必要がある。それは学ぶだけでも大丈夫です。今度は setInterval タイマー メソッドを使用してネイティブ カルーセル チャートを作成します。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #main{width:490px;margin:100px auto;}
        #main img{width:100%;height:300px}
        #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;
            padding:6px;
        }
        .orange{background-color: orange}
    </style>
</head>
<body>
<p id="main">
    <img src="img/1.jpg">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</p>
<script type="text/javascript">
    var op = document.getElementsByTagName("img")[0];
    var oLi = document.getElementsByTagName("li");
    var count =1;
    var timer = setInterval(function () {
        op.src = "img/"+count+".jpg";
        for ( var i=0;i<oLi.length;i++ ){
            oLi[i].className = &#39;&#39;;
        }
        oLi[count-1].className = "orange";
        count++;
        if (count>8){
            count=1;
        }
    },1000)
</script>
</body>
</html>
ログイン後にコピー

サンプル画像:

関連する推奨事項:

js 配列を重複排除する方法は何ですか? js配列の重複を排除する5つの方法のまとめ(コード付き)

jqueryでの順序付けされていない画像のプリロードの実装と使用方法

以上がjs は setInterval タイマー メソッドを使用してカルーセル チャートを実装する方法 (完全なコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
js
ソース：php.cn
前の記事：ページ間のデータ転送を実装する js コード 次の記事：マルチパーティがnodejsでファイルアップロードを実装するためのコード例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート