ホームページ > ウェブフロントエンド > jsチュートリアル > js は setInterval タイマー メソッドを使用してカルーセル チャートを実装する方法 (完全なコード)

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!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
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
ノード Js + JS 入力 = document.getElementById
から 1970-01-01 08:00:00
0
0
0
js addClassが機能しない
から 1970-01-01 08:00:00
0
0
0
javascript - jsコードをPythonに変換
から 1970-01-01 08:00:00
0
0
0
jsファイルのコードが見つかりません
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート