jQuery入门案例

最新推荐文章于 2024-10-30 18:24:25 发布

Rolling_stones

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量132

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/Rolling_stones/article/details/111563808

版权

这篇博客介绍了如何使用jQuery实现一个简单的图片循环展示案例。点击开始按钮，左上角的小图片会在10张照片中循环播放，同时开始按钮被禁用，而停止按钮变为可用。当点击停止按钮时，左上角小图片与右侧大图片会显示相同的图像。

摘要由CSDN通过智能技术生成

jQuery入门案例

html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="img/01.jpg" id="big" style="width: 400px; height: 400px; ">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>  <!--注意在html的<script>标签中需引入jQuery函数库-->
<script>
    //1.准备一个数组,其中有10张图片
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];
    //2.开始循环
    let index;        //记录img数组的索引值
    let intervalTag;
    let count=0;     //记录count变量,记录循环次数
    $("#startBtn").click(function () {
        intervalTag = setInterval(function () {
         //让count对数组长度取余,当count大于数组长度后,index从第一张图片重新开始循环
            index=count%imgs.length;
          $("#small").prop("src",imgs[index]);
            count++;
          //禁用开始按钮,设置停止按钮可用
          $("#startBtn").prop("disabled",true);
          $("#stopBtn").prop("disabled",false);
        },0.001);
    })

    //3.停止循环
    $("#stopBtn").click(function () {
        //停止循环定时器
        clearInterval(intervalTag);
        //禁用停止按钮,设置开始按钮可用
        $("#startBtn").prop("disabled",false);
        $("#stopBtn").prop("disabled",true);
        $("#big").prop("src",imgs[index]);
    })
</script>
</html>