Question

好的，我正在尝试创建一个简单的幻灯片但不是自动幻灯片，就像自动下一张幻灯片但用户需要先点击下一步然后转到下一张幻灯片。

所以，好吧，我有超过50张图片，我希望按照批次显示它，如前8和下8批和其他8批等...

实施例： enter image description here

所以接下来的第二个8批次将点击下一个（橙色箭头）切换。然后在背面按下最后一个节目批次将切换回来。

继承人我现在所做的......

来自index.php的

（这只显示前8个批次）

<div class="flowers-gallery-show">
        <ul class="ul-flowers">
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/1.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/2.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/3.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/4.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/1.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/2.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/3.jpg" alt="" />
                </div>
            </li>
            <li class="li-flowers">
                <div class="c-flowers">
                    <h1 class="flower-name">White Sympthay Box</h1>
                    <img src="images/new_flowers/4.jpg" alt="" />
                </div>
            </li>
        </ul>
    </div>
<!---The button--->
<div class="buttons-this">
        <span class="icon-prev" title="Back">
        </span>
        <span class="icon-next" title="Next">
        </span>
</div>

现在，显示下一个8批，另一个对我来说不得而知。在我的jquery上，我有这个代码。

$('.icon-next').click(function(e){
        //To show the next 8 batch
});

$('.icon-back').click(function(e){
            //To show the last 8 batch
});

我知道我可以通过ajax按钮点击查询下一个8批次，但有时需要加载下一个8批，所以我想要的是加载前8个批次和页面加载我会查询所有的因此页面加载和NEXT点击将变得简单快捷。但我不知道我怎么能命令显示下一个8批次和下一个8批次等，并在按钮上显示最后8批。

对此问题的任何帮助？非常感谢你!!!

为了澄清一下，请问我。再次感谢你！

Answer 1

在页面加载时，您可以在其自己的块中添加剩余的8个组，其他类别为“hide”或其他一些设置为display：none

你的后面和下一个函数将查询.flowers-gallery-show中的哪一个.ul-flowers是：可见的。然后，无论是后退还是下一个，将“隐藏”类应用于当前可见的类，并将其从适当的类（之前或之后）中删除。

使用类似的东西：

var current = jQuery('.ul-flowers').is(':visible');
var next = current.next('.ul-flowers');
current.addClass('hide');
next.removeClass('hide');

在另一种情况下，

.prev（）应该是有用的。

你需要处理下一个函数中的最后一个可见情况和后面函数中的第一个可见情况，但这很容易。

使用PHP和JQuery创建SlideShow

1 个答案: