Question

我创建了一张图片淡入淡出幻灯片，显示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链接，幻灯片必须显示photo5，然后继续照片6等。

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

非常感谢你的帮助！

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

通过单击链接jQuery更改淡入淡出的图像

1 个答案: