幻灯片内容/页面转换

Question

幻灯片内容/页面转换

单击图像时,内容当前页面向左滑出并淡出.目标页面淡入并从右侧滑入.

我尝试了几件事,比如在宽度为200%的容器中创建两个div并滚动内容以查看和使用JqueryUI并滑动div.滚动失败,div完全没有移动,srollLeft总是0,无论如何.幻灯片工作得更好,但对我来说,似乎他们不是同时运行.第二个div只是弹出存在而不是在第一个后面很好地滑动.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>slide demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    .container {
        width: 100%;
        float: left;
        height: 800px;
    }
    #one {
        background-color: red;
    }
    #two {
        background-color: #333;
        display: none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
    <div class="container" id="one"></div>
    <div class="container" id="two"></div>
<script>
$( document ).click(function() {
          $("#one").hide("slide", { direction: "left" }, 1000);
          $("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

看起来应该很容易实现,但我被卡住了.

照顾自己.

编辑:我有点工作,你可以在这个小提琴中看到.幻灯片在那里,但我看不到褪色.也可能有更好的方法来实现这一点,但我非常满意不必加载第三个lib /插件来滑动div.

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios 找到他们的开发人员编写的教程.认为这将算作解决方案.

Answer 1

Min*_*nen 2

我建议你使用我不久前在一个网站上使用的这个 jQuery 脚本，它的工作方式就像一个魅力，它被称为CODA SLIDER ，它是由 Kevin Batdorf制作的，安装只需要 5 行代码。

祝你好运

归档时间：	12 年，9 月前
查看次数：	9010 次
最近记录：	12 年，4 月前