How does js use the setInterval timer method to implement a carousel chart (complete code)-JS Tutorial-php.cn

How does js use the setInterval timer method to implement a carousel chart (complete code)

不言

Release： 2018-08-13 16:08:36

Original

8116 people have browsed it

The content of this article is about how js uses the setInterval timer method to implement carousel images (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

When I went for an interview before, the interviewer asked me to write a carousel by hand. It had just come out, so js was not very good, so I just said that I couldn’t write it. If I wanted a high salary, I still had to use js. Yes, you can just learn it when you are bored. Now use the setInterval timer method to develop a native carousel image;

The code is as follows:

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

Copy after login

Sample image:

Related recommendations:

What are the methods to remove duplicates from js arrays? Summary of five methods to deduplicate js arrays (with code)

Implementation and usage of unordered image preloading in jquery

The above is the detailed content of How does js use the setInterval timer method to implement a carousel chart (complete code). For more information, please follow other related articles on the PHP Chinese website!