JavaScript快速实现自动轮播

ZackSock

发布于 2020-02-14 13:49:31

5.2K1

发布于 2020-02-14 13:49:31

文章被收录于专栏：ZackSock

大家在逛网页的时候，经常会看到轮播图的出现。尤其是电商网页，一般主页就是一个大的轮播图。那么这种轮播图要怎么实现呢，这个实现方法是多种多样的，具体要看自己怎么喜欢。

先上效果图，还是蜡笔小新主题的，不过这次不需要自己移动鼠标：

这个还是比较简单的一种，没有什么花样。

接下来就来带大家完成这个轮播图，先是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动轮播图</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #image{
        margin: 10px auto;
        width: 1080px;
        display: block;
    }
</style>
<body>
    <img id="image" src="img1.jpg">
</body>
</html>

代码比较简单，主体（body）里面就一个img标签，上面的样式也就是设置居中。接下来讲一下JavaScript代码，具体代码的作用我就写注释里面了：

<script type="text/javascript">
    window.onload = function () {
        //创建图片路径数组
        var imgs = Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
        //获取图片元素
        var image = document.getElementById("image");
        //计算，用来辅助轮播
        var i = 0;
        //设置定时器，每50毫秒运行一次
        setInterval(function () {
             //判断是否越界，为越界就i++进入下一张图片
             if(i <= 3){
                 //改变图片路径实现图片切换
                 image.src = imgs[i];
                 i++;
             }else{
                 //如果下标越界了，就把i设置为0，从第一张图片从新开始
                 i = 0;
             }
        }, 500);
    }
</script>

这里主要就是用到定时器函数setInterval(method, time)；就是传入要运行的方法和运行时间间隔。

目录结构就是这样，其中img1~img4就是轮播的图片，而上面JS代码中的imgs数组也是这四张图片的路径。完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    window.onload = function () {
        var imgs = Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg");
        var image = document.getElementById("image");
        var i = 0;
        setInterval(function () {
             if(i <= 3){
                 image.src = imgs[i];
                 i++;
             }else{
                 i = 0;
             }
        }, 500);
    }
</script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #image{
        margin: 10px auto;
        width: 1080px;
        display: block;
    }
</style>
<body>
    <img id="image" src="img1.jpg">
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-09-12，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript