2

我是 Javascript 的新手，但我一直在自学 CSS 和一些 php，所以我希望能学到一点。在过去的几天里，我一直在寻找我想要的东西，希望这不是一个愚蠢的问题。

我正在尝试为我的投资组合项目页面构建迷你图像画廊。我有一页大约 8 张大图——每张图用于不同的项目。我正在尝试获取它，如果您单击图像，它将加载该项目的下一个图像（任务完成！我已经用我在网上找到的代码得到了它）

但我也想要分页点（基本上是圆圈的图像），就像我在其他网站上看到的那样，代表集合中的图像。因此，如果一个项目有三个图像，您会看到三个点，然后单击第三个点会将您带到第三个图像——该点图像将替换为“选定的点”图像。说得通？

我整天都在寻找如何做到这一点的脚本和示例，这就是我的 Javascript 所获得的。这是第一个项目的脚本。与其他人一起输入相同的脚本，但更改变量。img1 变成 img2 然后 img3 等等。谁能告诉我出了什么问题？

<div class="project" id="proj1">

<script type="text/javascript">
var img1 = [ 
    "img/portf/tiger1.jpg", 
    "img/portf/tiger2.jpg", 
    "img/portf/tiger3.jpg" 
];
img1.current = 0;
function showImage1(i) { 
$('#imag1').fadeOut( function() { 
this.src = img1[img1.current]; 
$(this).fadeIn(); 
}); 
}

function NextImage1() { 
img1.current = (img1.current+1) % img1.length; 
showImage1(img1.current); 
}

function PreviousImage1() { 
if (--img1.current < 0) { img1.current = img1.length - 1; } 
showImage1(img1.current);
}
onload = function(){ 
showImage1(0);
};

</script>

<div class="projname">

<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<a href="javascript:showImage1(0)"><img src="img/active.gif" /></a> 
<a href="javascript:showImage1(1)"><img src="img/inactive.gif" /></a> 
<a href="javascript:showImage1(2)"><img src="img/inactive.gif" /></a>
</div>

<div class="clear"></div>

</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>

</div>
</div>

您可以在这里看到我到目前为止所拥有的： http : //www.gmisen.com 非常感谢您的帮助！

4

1 回答 1

0

可能不是最好的学习体验，但您可以使用 jQuery 循环插件轻松实现这一点：http: //jquery.malsup.com/cycle/int2.html（查看寻呼机示例）

这是一个演示：http: //jsfiddle.net/69LNJ/

HTML

<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>​

JS

$(function() {
    $('.slideshow').before('<div id="nav">').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav'
    });
})​;

CSS

#nav{
  position: absolute;
  top: 20px;
    left: 20px;
    z-index: 1000;
}

#nav a{
  background-color: cyan;
  border-radius: 10px;
  height: 20px;
  width: 20px;
  display: block;
  text-indent: -1000px;
    float: left;
    margin-right: 10px;
}
#nav a.activeSlide{
  background-color: blue;
}

​</p>

于 2012-07-23T19:58:15.767 回答