Question

我想知道如何使用CSS定位和浮动来实现内容滑块效果。

例如，我想禁用链接行为，而不是让菜单链接到页面，而是让页面内容看起来水平滑动（左或右），以显示离开屏幕和新内容的旧内容的效果出现在屏幕上？

这种效果是如何实现的？

在这样的页面上显示内容是否也存在SEO优势或劣势，反对链接到多个页面？

谢谢，瑞克

编辑：此问题已被修改为看起来不太具体，特别是对整个社区有用。

Answer 1

尝试使用jcarousel插件进行滑动divs

http://sorgalla.com/projects/jcarousel

Answer 2

首先，您应将<h2>放在.sliders类之外。

您可以将以下样式添加到div：

<div class='container'>

    <div class='sliders'>
        <div class='panel' id='home_slider'></div>
        <div class='panel' id='portfolio_slider'></div>
        <div class='panel' id='contact_slider'></div>
    </div>

</div>

然后你的风格将是：

.container{
   width:960px;
   overflow:hidden;
   position:relative;
}

.sliders{
   float:left; 
   width:10000px;
   position:relative;
   left:0; top:0;
}

.panel{
   float:left;
   width:auto; /*You can define a width for this if required*/
   margin:20px;
}

你必须更改上面的值才能满足你的要求，但要点就是'.container'类充当一个图层，在它下面你有'.sliders'类，其中包含所有的'.panels'divs。通过在'容器'上设置'overflow：none'，可见的'.sliders'宽度与'.containers'的可见区域保持一致，无论'.sliders'div有多大。 '.sliders'div的宽度将根据你内部div的数量而扩展（如果你将宽度设置为auto）那么你只需要使用一些JQuery来动画'.sliders'类的左侧位置。

希望这有帮助。

Answer 3

获取jQuery。滚动滚动。读。学习。实施

scrollTo演示：http://demos.flesler.com/jquery/scrollTo/

相当不错的现场示例：http://www.charliegentle.co.uk/

希望你能搞清楚。如果您有困难，请将您的代码添加到http://jsfiddle.net/，我会看看我是否能找到您出错的地方。

为内容而不是图像创建水平滚动条

3 个答案: