通过单击链接 jQuery 更改褪色图像答案

【问题标题】：Change fading image by clicking on link jQuery通过单击链接 jQuery 更改褪色图像
【发布时间】：2012-06-28 10:13:27
【问题描述】：

我创建了一个图像褪色幻灯片，内容为this article。代码如下所示：

$(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 链接，幻灯片必须显示照片 5，然后继续显示照片 6 等。

我相信我应该使用.click 函数，但我不知道在里面写什么。我是 jQuery 的新手。

非常感谢您的帮助！

【问题讨论】：

你可以做一件事，每当点击一张照片时使用 clearInterval ，用新照片替换旧照片，获取它的当前位置（例如这是他的第三张或第四张图片），并为下一张照片应用 setInterval 来替换这张照片。这样，如果用户不点击照片，setInterval 会继续，而如果用户点击照片，它会重新定义自己并继续...
是的，我认为这正是我正在寻找的，但你能告诉我一些代码吗，因为我很少使用 jQuery，而且我做不了那么多......谢谢！
好的就行。我会在答案中发布。

标签： jquery image slideshow fading

【解决方案1】：

<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>

【讨论】：