jquery - 如何通过这个简单的幻灯片放映在 jquery 中使用时间间隔-6ren

jquery - 如何通过这个简单的幻灯片放映在 jquery 中使用时间间隔

转载作者：行者123 更新时间：2023-12-01 03:22:40

我是初学者，有这个简单的脚本。我的问题是如何设置淡出 mainImg 和淡入 Img(1,2,3) 之间的时间间隔，因为 mainImg< 的来源淡出时直接改变:

<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function(){
        $("#img1").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/1.png");
            $("#mainImg").fadeIn("slow");
        });
        $("#img2").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/2.png");
            $("#mainImg").fadeIn("slow");

        });
        $("#img3").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/3.PNG");
            $("#mainImg").fadeIn("slow");
        });
    });

</script>
<style type="text/css">
    #theImage{
        width:256px;
        height:256px;   
    }
    .thumb{
        width:100px;
        height:100px;
        cursor:pointer;
        margin-right:20px;
        margin-left:20px;   
    }
</style>
</head>


<body>
<div id="theImage"><img id="mainImg" src="images/1.png" width="256" height="256" /></div>
<img id="img1" src="images/1.png" class="thumb" /> <img id="img2" src="images/2.png" class="thumb" /> <img id="img3" src="images/3.PNG" class="thumb" />
</body>

最佳答案

您可以像这样对所有点击使用一个函数；

function changeImage(e) {
    e.preventDefault();
    var that = this;
    $("#mainImg").fadeOut("slow", function() {
        $(this).attr("src","images/" + that.id.replace('img', '') + ".png").fadeIn("slow");
    });
}

$(function(){
    $("#img1,#img2,#img3").click(changeImage);
});

这里是jsFiddle example 。不要介意 CSS，我必须更改它们以用于显示目的。

关于jquery - 如何通过这个简单的幻灯片放映在 jquery 中使用时间间隔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8550600/