0

我得到了这个想法，在一个没有 CMS 的网站上……我有大约 50 张图片，不能一次全部显示。所以想法是显示前 15 个，然后单击下一步，隐藏这些并显示下一个 15 等

用 ajax 或 wit php 和 css 来做这件事很热吗？

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

或另一种方法...在 php 或 jQuery 中，如何使用类“image”获取 div 的前 15 个元素并添加类：showimage，然后单击 NEXT 按钮：删除所有类 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张图片

4

1 回答 1

0

您不需要为此使用 ajax。您可以将所有图像 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功能添加为单击处理程序。

于 2012-09-27T05:17:53.713 回答