我在我的个人网站上有一个图像库滑块(您可以在此处查看视觉效果:http://www.alexmarvick.com/gallery.html)遵循HTML和JavaScript:
html(使用fontawesome图标和图像在我的目录中)
<section class="body-home" id="body-gallery">
<div id="gallery-outline">
<img id="gallery-enlarged-image" src="image1.jpg">
<p id="caption">Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014</p>
<div id="gallery-scroll-selectors">
<i class="fa fa-arrow-circle-left" id="left-arrow" aria-hidden="true"></i>
<i class="fa fa-arrow-circle-right" id="right-arrow" aria-hidden="true"></i>
</div>
<div id="gallery-image-options-outline">
<li><img class="small-images" id="1" src="image1.jpg"></li>
<li><img class="small-images" id="2" src="image2.jpg"></li>
<li><img class="small-images" id="3" src="image3.jpg"></li>
<li><img class="small-images" id="4" src="image4.jpg"></li>
<li><img class="small-images" id="5" src="image5.jpg"></li>
<li><img class="small-images" id="6" src="image6.jpg"></li>
<li><img class="small-images" id="7" src="image7.jpg"></li>
<li><img class="small-images" id="8" src="image8.jpg"></li>
<li><img class="small-images" id="9" src="image9.jpg"></li>
</div>
</div>
</section>
javascript
var caption = "";
var imageNo = 1;
var photoChange = function() {
if (imageNo == 0) {
imageNo = 1;
caption = "Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014";
$('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
}
else if (imageNo == 10) {
imageNo = 9;
caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
$('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
}
else if (imageNo == 1) {
caption = "Study Abroad Trip in Spring 2014: Weekend Trip to Paris, France. Missing it! February 2014";
}
else if (imageNo == 2) {
caption = "Our cat, Cosmo";
}
else if (imageNo == 3) {
caption = "Gonzaga University Graduation, May 2016";
}
else if (imageNo == 4) {
caption = "Gonzaga University Graduation Picture 2, May 2016";
}
else if (imageNo == 5) {
caption = "Me with my parents in Burch Bay, WA. June 2016";
}
else if (imageNo == 6) {
caption = "Me striking a pose with my Senior Design Project. April 2016";
}
else if (imageNo == 7) {
caption = "Our cat, Rudy";
}
else if (imageNo == 8) {
caption = "At the Orleans arena in Vegas watching Gonzaga Basketball take the WCC title. March 2016";
}
else if (imageNo == 9) {
caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
}
else {
caption = "No Image Here Yet";
}
$('#caption').html(caption);
};
$('#gallery-enlarged-image').hide();
$('#gallery-enlarged-image').fadeIn(500);
$('.small-images').click(function() {
var bigImageSrc = $(this).attr("src");
$('#gallery-enlarged-image').attr("src", bigImageSrc);
imageNo = $(this).attr("id");
$('#gallery-enlarged-image').hide();
$('#gallery-enlarged-image').fadeIn(500);
photoChange();
});
$('#left-arrow').click(function() {
$('#gallery-enlarged-image').hide();
imageNo -= 1;
$('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
$('#gallery-enlarged-image').fadeIn(500);
photoChange();
});
$('#right-arrow').click(function() {
$('#gallery-enlarged-image').hide();
imageNo += 1;
$('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
$('#gallery-enlarged-image').fadeIn(500);
photoChange();
});
首先加载站点时,左右按钮可以正常工作。但是,当您在下面的画廊中单击任何随机图像时,右箭头就会停止,但左箭头仍然可以正常工作。当我打开控制台时,我会发现一个错误说:
" image71.jpg:1获取http://www.alexmarvick.com/image71.jpg 404(找不到)"
看来存在一个解析问题,就像激活'#right-arrow'.click函数时一样,Imageno表现为字符串(在此示例中,我单击了第7张图像,然后一旦单击了右箭头在其末端解析了" 1",而不是将其添加到等于8)。但是,它不使用左箭头执行此操作,并且代码在左右都相同。
尝试
imageNo = parseInt(imageNo) + 1;
而不是
imageNo += 1;
在您的 $('#right-arrow').click()
-handler中。
问题是imageNo
是一个字符串,而您尝试将其用作int。
edit :或(我认为是更好的选择),您可以更改行
imageNo = $(this).attr("id");
to:
imageNo = parseInt($(this).attr("id"));
来自 $('.small-images').click()
-handler。
在提出一个实际答案之前,我想提出一些建议:
-
您应该制作一系列对象(更易于维护和添加或删除某些对象)
-
您应该真正与
%
操作员一起工作以更改图像(-1%x
等于x-1
) -
当您有多个
else if
并且条件总是在价值方面时,您必须使用switch
,否则代码将以非常无用的方式放大 -
从其他任何事物开始,然后0总是比实际从0开始更棘手(请记住,一切都开始在0处索引)
因此,我们去了答案(以及一些返工以简化未来的工作):
首先,我们需要一个构造函数函数(对象最简单的方法):
function GallerySlide(url, caption){
this.url = url || "#";
this.caption = caption || "No image here yet";/*if you don't pass a caption it will assign the left operand of the OR*/
this.isEqualTo = function(obj){
return this.url == obj.url;
}/*for small image click*/
}
然后,我们将使用这些对象数组来简化控制:
var gallery=[];
您确实需要记住,数组开始在0开始索引,但是如果您确实想从1开始,则仍然可以将"无效"对象分配为第一个对象,如下所示:
gallery.push( new GallerySlide() );
然后,每次添加图像时(如果保留图案:索引1:image1.png),则可以使用:
gallery.push( new GallerySlide("image"+gallery.length+".jpg", /*caption goes here*/) );/*as the left adjacent spot will always be the index gallery.length*/
然后,我们需要一个全局变量来保持当前画廊位置:
var gallery_index = 1;/*only set this after all images are loaded in array*/
现在这是有趣的部分,重新设计的左箭头(您可以从中推断出右箭头和初始化):
$('#left-arrow').click(function(){
gallery_index-=1;
gallery_index%=gallery.length;
if(gallery_index == 0){
gallery_index = gallery_length-1;
}
$('#gallery-enlarged-image').fadeOut(500);/*way smoother look*/
$('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
$('#gallery-enlarged-image').fadeIn(500);
$('#caption').html(gallery[gallery_index].caption);
}
sidenote:在将1分配给Gallery_Index
后立即初始化既然我们已经左和右,初始化,让我们查看一下单击一点图像:
$('.small-images').click(function(){
var si = new GallerySlide( $(this).attr("src") );
var toChange = new GallerySlide();
for(var i = 1 ; i<gallery.length ; i++){
if( gallery[i].isEqualTo(si) ){
toChange = gallery[i];
gallery_index = i;
break;
}
}
$('#gallery-enlarged-image').fadeOut(500);/*the following seems like it could go in a function in which you always pass the array and the current index (or have them global to it)*/
$('#gallery-enlarged-image').attr("src",gallery[gallery_index].url);
$('#gallery-enlarged-image').fadeIn(500);
$('#caption').html(gallery[gallery_index].caption);
}
在那里,您应该尝试一下(也许您会遇到调试需要,但我很有信心),总的来说,我认为在添加新图像和所有这些内容方面,它更加灵活。