私は一連のdivを持っていますが、最初のdivはアクティブです(リンク付きのウェルカム画面を表示しています)。その他は非表示のdivの絶対位置左:-100%(これらにはリンクも含まれます)。
ユーザーがリンクをクリックすると、現在のdivが左に(スムーズに)スライドし、新しいコンテンツが右から(スムーズに)スライドするようにする必要があります。
視差スライドは、各スライドに相互に移動できるため機能しませんが、サイトがすべてのスライドをスクロールしてターゲットコンテナに到達することは望ましくありません。要求されたコンテンツに到達する前に、スクロールシーケンスを1つだけにしたい。
私が見たもののほとんどは、浮動小数点数で動作するスクロールスクリプトのようです。したがって、リンク3をクリックすると、1,2,3をスライドします。私は真ん中のものを見逃す必要があります!これが理にかなっているといいのですが!?
また、可能であれば、スライドのコンテンツを動的にロードしたいですか?しかし、私はそれで完全に迷子になっています!
これが私がこれまでに持っているコードです...
http://jsfiddle.net/ykbgT/5249/
これはほとんど私が必要としているものですが、ご覧のとおり、すべてのスライドが同時に呼び出されています。すべての助けは大いに感謝されます!!!
html, body{
width:100%;
height:100%;
padding:0px;
margin:0px;
overflow: hidden;
}
.wrapper {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide{
position: absolute;
width: 200%;
height: 100%;
font-size: 30px;
text-align: center;
border: 2px solid black;
left: 100%;
top:0px;
}
.navigation{
font-size:14px;
}
.navigation a{
display:block;
background-color:#000;
color:#fff;
padding:5px;
float:left;
margin-right:5px;
}
#slide1{
background-color:#000;
background-image:url(images/BG1.jpg);
background-position:center top;
background-repeat:no-repeat;
width:100%;
left: 0%;
}
.inner{
width:960px;
height:800px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
position:relative;
}
#slide2{
background-color:#090;
}
#slide3{
background-color:#F30;
}
.content{
width:30%;
height:80%;
float:right;
background-color:#fff;
margin:10%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slide" id="slide1">
<div class="inner">
WELCOME CONTENT HERE
</div>
</div>
<div class="slide" id="slide2">
<div class="content">
<div>SLIDE 2 DYNAMIC CONTENT LOADS HERE</div>
<div class="navigation">
<a class="button">LINK TO SLIDE 3</a>
<a class="button">LINK TO SLIDE 4</a>
<a class="button">LINK TO SLIDE 5</a>
<a class="button">LINK TO SLIDE 6</a>
<a class="button">LINK TO SLIDE 7</a>
<a class="button">LINK TO SLIDE 8</a>
</div>
</div>
</div>
<div class="slide" id="slide3">
<div class="content">
<div>SLIDE 3 DYNAMIC CONTENT LOADS HERE</div>
<div class="navigation">
<a class="button">BACK TO SLIDE 2</a>
<a class="button">LINK TO SLIDE 4</a>
<a class="button">LINK TO SLIDE 5</a>
<a class="button">LINK TO SLIDE 6</a>
<a class="button">LINK TO SLIDE 7</a>
<a class="button">LINK TO SLIDE 8</a>
</div>
</div>
</div>
</div>