案例-使用JS完成图片轮播效果

最新推荐文章于 2023-11-11 10:19:25 发布

可口口可

最新推荐文章于 2023-11-11 10:19:25 发布

阅读量517

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48351326/article/details/126926502

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例-使用JS完成图片轮播效果

1.需求分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lvc1Ozpl-1663548079846)(img/tu_17.png)]

实现每过3秒中切换一张图片的效果，一共3张图片，当显示到最后1张的时候，再次显示第1张。

2.思路分析

创建定时任务

setInterval(function(){
	//改变img标签的src
},3000);

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <div style="text-align: center">
        <img id="tu" src="../img/banner_1.jpg" width="750" height="200"
             onmouseover="pauseMove()" onmouseout="startMove()">
    </div>
    <script>
        var imgs = ["../img/banner_1.jpg","../img/banner_2.jpg","../img/banner_3.jpg"]
        var i = 0
        //每隔三秒钟切换一张轮播图图片
        var id
        //1. 定时器: 每隔三秒钟做一件事情
        function startMove(){
            id = setInterval(function () {
                i ++
                if (i == 3) {
                    i = 0
                }
                //2. 切换img的图片:重新设置img标签的src
                document.getElementById("tu").setAttribute("src",imgs[i])
            },3000);
        }

        //页面加载的时候开启轮播
        startMove()

        //要求: 当鼠标悬停在轮播图上的时候，停止轮播，鼠标移开，恢复轮播
        //给轮播图绑定鼠标移入和移出事件
        function pauseMove() {
            //暂停轮播: 清除定时器
            clearInterval(id)
        }
    </script>
</body>
</html>