1

シンプルな横スライダーを作ろうとしています。

現状では、同じサイズの3つのdivが一列に並んでいます。私はそれらを移動するためのjQueryを持っていましたが、現在、ビューポートはそれらと一緒に移動するか、何も起こりません。ビューポートが固定され、コンテンツがスライドするように、誰かが私をその方向に向けることはできますか？これはこれまでのコードです...

<!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>
4

2 に答える 2

1

.boxクラスにpositionプロパティを指定します。親戚をお勧めします。次に、コンテナに幅、たとえば600px;を指定します。トリガー1と3は正常に機能しているようです。

jsFiddleの例

于 2012-07-11T20:39:04.320 に答える
0

トリガーメニューを再構築し、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/

于 2012-07-11T21:07:07.770 に答える