これは私が元のサイトを見つけることができない場所にあるコードです。jquery.scrollTo.jsは5 divs以上スライドしていません
jqueryの-1.3.1.min.js
jquery.scrollTo.js
私はこのサイト上でそれを実行しています:http://www.atomicorchid.co.za/Atomic_Orchid/new/
それだけスクロール5つのdiv?深い研究は、単に答えを見つけ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll vertically</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function() {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_height = height * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_height);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: width, height: mask_height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}
#mask {
width:100%;
height:500%;
overflow:hidden;
background-color:#eee;
}
.item {
width:100%;
height:20%;
display:block;
background-color:#ddd;
}
.content {
width:400px;
height:300px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div class="content">item1 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
<div id="item6" class="item">
<a name="item6"></a>
<div class="content">item6 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
</div>
</div>
</div>
</body>
</html>
他の人があなたを助けることができるようにhttp://jsfiddle.net/ –
あなたは、さらにあなたの問題を説明することはできますか?、JsFiddleを作りますか私は無限のスライドを見ることができる、素敵な音楽backgoundを聞くことができます。あなたのサイトに問題はありません。あなたの問題をはっきりと説明してください。 – Libin
ウェブサイトには6つのメニュータブがあります。スライドはプレス&編集者のみが連絡先になり、連絡先に行くリンクは削除されます。 私は元のスクリプトでもそれを試しましたが、成功しませんでしたか? jquery.scrollTo.jsの一部が粗いと思います。 これはjsfiddle:(http://jsfiddle.net/Drakinfly/DhBSZ/)へのリンクです。 jsfiddleを使用してjquery.scrollTo.js jsfiddleを初めて追加する方法がわかりません。 – Drakinfly