Question

我有这个想法，在一个没有CMS的网站...我有大约50张图片，一次无法全部显示。所以想法是显示前15个，然后点击下一个，隐藏那些并显示下15个等等

热门用ajax或机智php和css做到这一点？

计数，添加隐藏类，并显示？

或其他方式...在php或jQuery中，如何获得div的前15个元素＆＃34; image＆＃34;并添加class：showimage，然后单击“下一步”按钮：删除所有类showimage，并显示图像16到30

代码看起来像那样：

<div id="gallery2"> <!-- Gallery de photos --> 

<a href="ia/new_01.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_01.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Pont Neuf - Ile de la Cité - Paris - France - Aquarelle <br> Conception personnelle"/></a>

<a href="ia/new_02.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_02.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Studebaker Hawk - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_03.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_03.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Corvette - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_04.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_04.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Thunderbird - Concept rétro <br> Conception personnelle"/></a>

<a href="ia/new_05.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="timthumb.php?src=ia/new_05.jpg&amp;h=<?php echo $size ?>" title="Cliquer pour agrandir" 
alt="Les autos de mon père <br> Conception personnelle"/></a>

以及开启和开启....对于50张图片

Answer 1

你不需要为此而烦恼。您可以将所有图像URL放在JS数组中，当单击下一个按钮时，您只需隐藏当前的15个图像并从阵列中添加新的15个图像。你可以动态渲染它们。因此，图像将由浏览器动态呈现。

var images=[]; // it'll contain images.
var ptr=0;
var length = 15;
function show(offset, count){
    for(var i=offset;i<offset+count;i++){
        // add image images[i] in the image container.
    }
}
function next(){
    // empty the image container
    ptr+=length
    show(ptr, length);
}

show(0, length); // initial call to display first chunk of images

现在，对于下一个按钮，您只需将next函数添加为单击处理程序。

使用ajax仅显示隐藏图像的子集

1 个答案: