jquery 实现图片

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 可以方便地实现图片的各种操作，比如图片的加载、切换、特效等。

基础概念

jQuery 是一个 JavaScript 函数库，它封装了很多预定义的对象和实用函数，使得 HTML 文档遍历、事件处理、动画和 Ajax 变得更加简单。

类型

图片加载：使用 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="placeholder.jpg" alt="图片加载中...">
    <script>
        $(document).ready(function() {
            $('#myImage').attr('src', 'actual-image.jpg').on('load', function() {
                console.log('图片加载完成');
            });
        });
    </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>
        .image-container img {
            display: none;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="图片1">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
    </div>
    <script>
        $(document).ready(function() {
            let images = $('.image-container img');
            let index = 0;
            function showImage() {
                images.hide();
                images.eq(index).show();
                index = (index + 1) % images.length;
            }
            setInterval(showImage, 3000);
            showImage(); // 初始显示第一张图片
        });
    </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>
        #fadeImage {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img id="fadeImage" src="image.jpg" alt="淡入淡出图片">
    <button id="fadeButton">开始淡入淡出</button>
    <script>
        $(document).ready(function() {
            $('#fadeButton').click(function() {
                $('#fadeImage').fadeOut(1000, function() {
                    $(this).fadeIn(1000);
                });
            });
        });
    </script>
</body>
</html>