Home > Web Front-end > JS Tutorial > body text

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

不言
Release: 2018-08-13 16:08:36
Original
8064 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!

Related labels:
js
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!