<img id="myImage" src="image1.jpg" alt="示例图片">
<button id="toggleBtn">切换图片</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#toggleBtn").click(function(){
        var currentSrc = $("#myImage").attr("src");
        if(currentSrc === "image1.jpg"){
            $("#myImage").attr("src", "image2.jpg");
        } else {
            $("#myImage").attr("src", "image1.jpg");
        }
    });
});
</script>

<img id="slideshow" src="image1.jpg" alt="幻灯片">
<button id="prevBtn">上一张</button>
<button id="nextBtn">下一张</button>

<script>
$(document).ready(function(){
    var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
    var currentIndex = 0;
    
    $("#nextBtn").click(function(){
        currentIndex = (currentIndex + 1) % images.length;
        $("#slideshow").attr("src", images[currentIndex]);
    });
    
    $("#prevBtn").click(function(){
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        $("#slideshow").attr("src", images[currentIndex]);
    });
});
</script>

$(document).ready(function(){
    $("#toggleBtn").click(function(){
        $("#myImage").fadeOut(500, function(){
            var currentSrc = $(this).attr("src");
            $(this).attr("src", currentSrc === "image1.jpg" ? "image2.jpg" : "image1.jpg")
                   .fadeIn(500);
        });
    });
});

// 预加载图像
var img1 = new Image();
img1.src = "image1.jpg";
var img2 = new Image();
img2.src = "image2.jpg";

// 使用绝对路径
$("#myImage").attr("src", "/images/image1.jpg");

$(document).on("click", "#toggleBtn", function(){
    // 切换代码
});

<img id="myImage" src="image1.jpg" data-alternate="image2.jpg">
<button id="toggleBtn">切换图片</button>

<script>
$(document).ready(function(){
    $("#toggleBtn").click(function(){
        var $img = $("#myImage");
        var currentSrc = $img.attr("src");
        var alternateSrc = $img.data("alternate");
        $img.attr("src", alternateSrc).data("alternate", currentSrc);
    });
});
</script>

.image-container {
    width: 300px;
    height: 200px;
    background-size: cover;
}

.image-default {
    background-image: url('image1.jpg');
}

.image-alternate {
    background-image: url('image2.jpg');
}

$("#toggleBtn").click(function(){
    $(".image-container").toggleClass("image-default image-alternate");
});