search

Home >Web Front-end >JS Tutorial >How does js use the setInterval timer method to implement a carousel chart (complete code)

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

不言
不言Original
2018-08-13 16:08:368112browse

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js code to implement data transfer between pagesNext article：js code to implement data transfer between pages

Related articles

See more