js利用setInterval定时器方法开发原生轮播图

最新推荐文章于 2023-06-14 21:13:56 发布

铁东博客

最新推荐文章于 2023-06-14 21:13:56 发布

阅读量961

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_39801446/article/details/81607101

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用原生JavaScript结合HTML与CSS创建一个简单的轮播图效果。通过setInterval定时器方法自动切换图片，并使用小圆点指示当前显示的图片序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前去面试的面试的时候，面试官直接叫我手写一个轮播图，那是刚出来，所以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>
<div 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>
</div>
<script type="text/javascript">
    var oDiv = document.getElementsByTagName("img")[0];
    var oLi = document.getElementsByTagName("li");
    var count =1;
    var timer = setInterval(function () {
        oDiv.src = "img/"+count+".jpg";
        for ( var i=0;i<oLi.length;i++ ){
            oLi[i].className = '';
        }
        oLi[count-1].className = "orange";
        count++;
        if (count>8){
            count=1;
        }
    },1000)
</script>
</body>
</html>

示例图：