Question

我正在尝试制作一个简单的水平滑块。

就目前而言，我有三个div，大小相同，排成一行。我确实有jQuery移动它们，但目前视口移动它们或者没有任何事情发生在al。任何人都可以指出我的方向，以便视口保持固定，内容滑过它？到目前为止这是代码......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider (cutdown, demo)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#trigger1').click(function(){
$(".box").animate({left: "0"});
});
$('#trigger2').click(function(){
$("#viewport").animate({left: "-200"});
});
$('#trigger3').click(function(){
$(".box").animate({left: "-400"});
});
});
</script>
<style>
body    {
background:#003;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#viewport   {
width:200px;
height:200px;
overflow:hidden;
}
.box    {
background-color:#069;
border-style:solid;
border-width:2px;
width:196px;
height:196px;
float:left;
}
</style>
</head>

<body>
<div id="trigger1">
Trigger One
</div>
<div id="trigger2">
Trigger Two
</div>
<div id="trigger3">
Trigger Three
</div>
<div id="viewport">
<div id="container">
<div id="box1" class="box">
Box One
</div>
<div id="box2" class="box">
Box Two
</div>
<div id="box3" class="box">
Box Three
</div>
</div>
</div>
</body>
</html>

Answer 1

为.box类提供位置属性。我推荐亲戚。然后给你的容器一个宽度，比如600px;。触发器1和3现在似乎工作正常。

<强> jsFiddle example

Answer 2

我建议您重构触发器菜单并重写您的JQuery代码，如下所示：

<强> HTML

<ul id="triggerMenu">
    <li id="trigger-0">One</li>
    <li id="trigger-1">Two</li>
    <li id="trigger-2">Three</li>
</ul>

<div id="viewport">
    <div id="container">
        <div id="box1" class="box">Box One</div>
        <div id="box2" class="box">Box Two</div>
        <div id="box3" class="box">Box Three</div>
    </div>
</div>

<强> JQuery的

$("li", "#triggerMenu").on("click", function()
{
    var triggerNumber = $(this).attr("id").replace(/(.*)-/,"");
    var newPosition = triggerNumber * 200;

    // Make sure the box slides in the right direction
    if (newPosition > 0) newPosition = "-" + newPosition;

    // Slide box
    $(".box").animate({left: newPosition});
});

这样您就不必为每个触发器/盒组合添加新的JQuery代码。

现场演示：http://jsfiddle.net/fAWpZ/5/

制作滑块，无法创建视口

2 个答案: