通过点击链接jQuery

更改淡出图像我创建了一个图像淡化幻灯片阅读this article。的代码看起来是这样的：通过点击链接jQuery

$(document).ready(function() { 
    $('#iPhoneExample img:gt(0)').hide(); 
    setInterval(function() { 
     $('#iPhoneExample :first-child').fadeOut(1000) 
     .next('img').fadeIn(1000) 
     .end().appendTo('#iPhoneExample'); 
    }, 3000); 
});

，这是HTML和CSS：

<div id="iPhoneExample"> 
<img src="photo1.png" alt="" /> 
<img src="photo2.png" alt="" /> 
<img src="photo3.png" alt="" /> 
<img src="photo4.png" alt="" /> 
<img src="photo5.png" alt="" /> 
<img src="photo6.png" alt="" /> 
</div> 

#iPhoneExample { 
    width:305px; 
    height:597px; 
    background:url('immagini/iphoneBg.png') center no-repeat; 
    position:relative; 
    margin:0px 20px 0px 94px; 
} 
#iPhoneExample img { 
    position:absolute; 
    top:106px; 
    right:22px; 
    bottom:104px; 
    left:25px; 
}

现在，我想这样做。当页面加载时，幻灯片播放开始，但我有6个链接，每个图像我想用来显示相应的图像...例如幻灯片开始并显示photo3，但如果我点击photo5链接，幻灯片必须显示photo5然后继续photo6等

我相信我应该使用.click函数，但我不知道该写些什么。我是一个jQuery新手。

非常感谢您的帮助！

来源

2012-06-28 matteodv

你可以做一两件事，我们可以使用clearInterval只要照片被点击，更换旧照片由新的照片，得到它的当前位置（这是他第3或第4图像，例如），并应用setInterval用于替换此照片的下一张照片。这样，如果用户不点击一张照片，setInterval将继续，而如果用户点击一张照片，它将重新定义自己并继续... – SexyBeast

是的，我认为这正是我正在寻找，但你能告诉我一些代码，因为我很少使用jQuery，我不能这么做......谢谢！ – matteodv

好的会的。我会将它发布在答案中。 – SexyBeast

<html> 
<head> 
<style> 
div { width: 850px; height: 350px; background: green; } 
</style> 
<script type = "text/javascript" src = "jquery.js"></script> 
<script type = "text/javascript" /> 
$(function() { 
arr = ['photo1.jpg','photo2.jpg','photo3.jpg','photo4.jpg','photo5.jpg','photo6.jpg']; 
$("#iPhoneExample").append("<img src = '"+arr[0]+"' />"); 
timer = setInterval(function() { 
var curnum = parseInt(($("#iPhoneExample").find("img").attr("src").match(/\d/g))[0]); 
var nextnum = curnum > 5 ? 0 : curnum; 
$("#iPhoneExample img").replaceWith("<img src = '"+arr[nextnum]+"' />"); 
},3000); 
$("a").click(function(e) { 
    if ($("a").filter(function() { return $(this).hasClass("clicked"); }).length) 
    { 
     clearInterval(newtimer); 
    } 
    else { 
     $("a:first").addClass('clicked'); 
     }  
    e.preventDefault(); 
    var curnum = parseInt(($(this).attr("href").match(/\d/g))[0]); 
    nextnum = curnum-1; 
    clearInterval(timer); 
    $("#iPhoneExample").html("<img src = '"+arr[curnum-1]+"' />"); 
    newtimer = setInterval(function() { 
    nextnum = nextnum + 1 > 5 ? 0 : nextnum + 1; 
    $("#iPhoneExample").html("<img src = '"+arr[nextnum]+"' />"); 
    },3000); 
    }); 

}); 
</script> 
</head> 
<body> 
<div id = "iPhoneExample"></div> 
<a href = "www.photo1.html">Photo1</a> 
<a href = "www.photo2.html">Photo2</a> 
<a href = "www.photo3.html">Photo3</a> 
<a href = "www.photo4.html">Photo4</a> 
<a href = "www.photo5.html">Photo5</a> 
<a href = "www.photo6.html">Photo6</a> 
</body> 
</html>

来源

2012-06-28 20:16:22 SexyBeast

通过点击链接jQuery

回答

相关问题