[英]jQuery gallery turn over with next and previous buttons
i'm trying to do some kind of Gallery-Turn Over Script with jQuery. 我正在尝试使用jQuery进行某种图库翻转脚本。 Therefor i got an array with - let's say 13 - images:
因此我得到一个数组-假设13-图片:
galleryImages = new Array(
'images/tb_01.jpg',
'images/tb_02.jpg',
'images/tb_03.jpg',
'images/tb_04.jpg',
'images/tb_05.jpg',
'images/tb_06.jpg',
'images/tb_07.jpg',
'images/tb_08.jpg',
'images/tb_09.jpg',
'images/tb_10.jpg',
'images/tb_11.jpg',
'images/tb_12.jpg',
'images/tb_13.jpg'
);
My gallery looks like a grid showing only 9 images at once. 我的画廊看起来像一个网格,一次仅显示9张图像。 My current script already counts the number of li-elements in #gallery, loads the first 9 images and displays them.
我当前的脚本已经计算了#gallery中的锂元素数,加载了前9张图像并显示它们。 The HTML looks like this:
HTML看起来像这样:
<ul id="gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="gallery-controls">
<li id="gallery-prev"><a href="#">Previous</a></li>
<li id="gallery-next"><a href="#">Next</a></li>
</ul>
I'm pretty new to jQuery an my problem is that i can't figure out how to split the array in portions with 9 elements to attach it as a link on the control buttons. 我对jQuery很陌生,但我的问题是我无法弄清楚如何用9个元素将数组拆分为多个部分,以将其作为控件按钮上的链接进行附加。 I need something like this:
我需要这样的东西:
$('#gallery-next').click(function(){
$('ul#gallery li').children().remove();
$('ul#gallery li').each(function(index,el){
var img = new Image();
$(img).load(function () {
$(this).css('display','none');
$(el).append(this);
$(this).fadeIn();
}).attr('src', galleryImages[index]); //index for the next 9 images?!?!
});
});
Thanks for help! 感谢帮助!
Check out my solution to your problem . 看看我对您问题的解决方案 。
A few important notes: 一些重要的注意事项:
$(el).append(img)
to a more appropriate spot. $(el).append(img)
移到了更合适的位置。 curIndex
is the index of the last most image. curIndex
是最后一张图像的索引。 curIndex+index
, and then modded it by galleryImages.length so that it will loop the overflow rather than giving errors. curIndex+index
,然后通过galleryImages.length对其进行了修改,以便它将循环溢出而不是给出错误。 <li>
so you can see with is going on. <li>
这样你就可以用是怎么回事看到。 You could create a variable, say var firstIndex = 0;
您可以创建一个变量,例如
var firstIndex = 0;
to hold the array index of the first image currently displayed. 保留当前显示的第一张图像的数组索引。 Have your "next" button increment it and your "previous" button decrement it as necessary (by 1 or 9 or how you want).
让您的“下一个”按钮将其递增,而您的“上一个”按钮根据需要将其递减(按1或9或所需的方式)。 Add this value to
index
in your code. 将此值添加到代码中的
index
中。
Naturally you will need to check array bounds. 自然,您将需要检查数组范围。
Try this: 尝试这个:
<html>
<head>
<style>
#gallery-prev, #gallery-next{text-decoration:underline;color:Blue;cursor:pointer;list-style:none;display:inline;padding:5px;}
#gallery li{list-style:none;display:inline;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
galleryImages = new Array(
'images/tb_01.jpg','images/tb_02.jpg','images/tb_03.jpg',
'images/tb_04.jpg','images/tb_05.jpg','images/tb_06.jpg',
'images/tb_07.jpg','images/tb_08.jpg','images/tb_09.jpg',
'images/tb_10.jpg','images/tb_11.jpg','images/tb_12.jpg',
'images/tb_13.jpg');
function loadImages(p) {
var startIndex = parseInt($('ul#gallery').attr("startIndex")) + 9 * p;
if (startIndex < 1 || startIndex >= galleryImages.length) return;
$('ul#gallery')
.attr('startIndex', startIndex)
.find("li").children().remove().end()
.each(function(i, el) {
var nextID = startIndex - 1 + i;
if (nextID >= 0 && nextID < galleryImages.length) {
$(this).append($("<img src='" + galleryImages[nextID] + "' alt='image " + (nextID + 1) + "' />"));
}
});
}
$(document).ready(function() {
$('ul#gallery').attr('startIndex', '1');
for (var i = 1; i <= 9; i++)
$('ul#gallery').append("<li></li>");
loadImages(0);
$('li#gallery-prev, li#gallery-next').each(function(i) {
$(this).click(function() {
loadImages(i == 1 ? 1 : -1);
})
});
});
</script>
</head>
<body>
<ul id="gallery"></ul>
<ul id="gallery-controls">
<li id="gallery-prev">Previous</li>
<li id="gallery-next">Next</li>
</ul>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.