jQuery 淡入新图像 - 然后继续循环浏览图像列表？答案

【问题标题】：jQuery fade to new image - then continue to cycle through a list of images?jQuery 淡入新图像 - 然后继续循环浏览图像列表？
【发布时间】：2012-06-26 14:44:47
【问题描述】：

所以我有一个标题图像，在单击该图像时，它会随着传输进行动画处理，然后淡出，然后用新图像淡入。然后我可以单击新图像，它也会动画并淡出到空白区域。如何在一系列有序图像中连续设置动画/淡入淡出 - 每次点击一个新图像，无限次？

这是我到目前为止所得到的......

$(document).ready(function(){
    $("#headuh").click(function(){
        $("#headimg").transition({ skewY: '30deg' },1000);
        $("#headimg").fadeOut(function() {      
        $(this).transition({ skewY: '00deg' }) .load(function() { $(this).fadeIn(); }); 
        $(this).attr("src", "/imgurl.jpg");

【问题讨论】：

标签： javascript jquery image transition

【解决方案1】：

下面的 sn-p 并不能完全解决您的问题，但它可能会让您走上正轨，因为它会随机循环播放一组 28 张带有淡入和淡出的图像。你可以在http://moodle.hsbkob.de看到它的直播：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
//<![CDATA[
var g_first_call = true;
var g_pic_old;

$(document).ready(function() {      
    pickPic();
    setInterval("pickPic()", 7500);
});

function randomPic() {
    do {
        var pic = parseInt(28*Math.random()+1);
    } while (pic == g_pic_old);  // Don't want same pic twice 

    g_pic_old = pic;

    document.getElementById("_image_").src = "./picfolder/picno" + pic + ".jpg";
}

function pickPic() {
    if (g_first_call) {
        randomPic();
        g_first_call = false;
    }

    $("#_fadee_").fadeIn(750, function() {
        $("#_fadee_").delay(6000).fadeOut(750, randomPic);
    }); 
}
//]]>
</script>
<div id="_fadee_"><img id="_image_" alt="Image" /></div>

【讨论】：

【解决方案2】：

您可以像这样使用名为 setInterval(); 的 javascript 函数：

setInterval(function(){
   //this code will keep on executing on every 2 seconds.
},2000)

【讨论】：