jquery查看图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态图片查看</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/image.jpg" alt="示例图片">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态图片加载</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="imageContainer"></div>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'path/to/getImage.php', // 假设这是一个返回图片 URL 的后端接口
                method: 'GET',
                success: function(data) {
                    $('#imageContainer').html('<img src="' + data.url + '" alt="动态加载的图片">');
                },
                error: function() {
                    alert('加载图片失败');
                }
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .carousel {
            width: 300px;
            overflow: hidden;
        }
        .carousel img {
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <img src="path/to/image1.jpg" alt="图片1">
        <img src="path/to/image2.jpg" alt="图片2">
        <img src="path/to/image3.jpg" alt="图片3">
    </div>

    <script>
        $(document).ready(function() {
            let images = $('.carousel img');
            let index = 0;

            function showImage() {
                images.hide();
                images.eq(index).show();
                index = (index + 1) % images.length;
            }

            images.eq(0).show();
            setInterval(showImage, 3000); // 每 3 秒切换一次图片
        });
    </script>
</body>
</html>