0

我创建了一个图像褪色幻灯片阅读这篇文章。代码如下所示： 

$(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 的新手。

非常感谢你的帮助！

4

1 回答 1

0 
<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-28T20:16:22.660 回答