ImageSlider（jQuery）的不同结构/组织

Question

我即将重写一些mycode并重新实现它，以满足我当前的需求。 我基本上有两个要求：

• 实施预加载器的可能性
• SEO友好（一次显示没有JavaScript的所有图像）
• 使用#hash
更改图像

有很多例子如何做，但是我想问一下你说的是滑块的最佳结构：

1. div有很多img的
2. ul with li's，每个都有img
3. 与其他div的div，每个div都有一个img

我看到了所有三种实现，但如果它们完全不同，很难说这些方法有何不同。你怎么想，你会推荐什么？

Answer 1

为幻灯片显示构建一个窗口，给它溢出：滚动，但应用溢出：用JS隐藏。这样，如果没有JS，幻灯片仍然可用（很少见，我知道，但这只是一点点接触......）

如果你想要一个动画运动而不是淡化，那么为幻灯片“轨道”添加一个容器可以使事情变得容易一些。如果你只是为了淡出，你可以按顺序淡化/解开它们。然后，根据幻灯片的复杂程度，如果它只是图像，请使用JS预加载它们，否则如果您的需求更复杂，可以使用div填充它以保存滑块的每个“屏幕”。

<div id="slideshow_window">
    <div id="slide_container">
        <img /><img /> ... repeat
        <!-- or -->
        <div>more complex stuff</div> ... repeat
    </div>
</div>