简单的Javascript图像库 - 具有分页点和多个实例

Posted 2021-03-27

我是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非常感谢你的帮助!!

答案

可能不是最好的学习经验，但您可以使用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;
}