JQueryを使用した垂直スライドショーを実装したいと思います。私は垂直リール(div)を使用しています。イメージを1つずつ順番に表示しています。リールを減らしています。イメージサイズで2秒ごとにトップポジションが動作していますが、最後のイメージに到達すると、第1の画像からリールを開始するロジック。私の説明が明確でない場合、私は私のコードを付加しています:JQueryスライドショーのロジック
<script type="text/javascript">
$(function() {
setInterval(SlideImage, 2000);
});
function SlideImage() {
$("#imgReel").animate({ "marginTop": "-=300px" }, 1000, function() { });
}
</script>
<style type="text/css">
img
{
width: 600px;
height: 300px;
}
.imgContainer
{
overflow: hidden;
width: 620px !important;
height: 300px !important;
}
div
{
width: 620px;
}
.current
{
z-index: 0;
}
.next
{
z-index: 1;
}
.imgReel
{
width: 620px !important;
}
.
</style>
<body>
<div id="imgContainer" class="imgContainer">
<div id="imgReel" class="imgReel">
<div class="current">
<img src="Images/Summerwave.jpg" />
</div>
<div>
<img src="Images/Sunlight_and_the_Wild_Forest_Floor.jpg" />
</div>
<div>
<img src="Images/Sunset.jpg" />
</div>
<div>
<img src="Images/Swimming_with_the_fishys.jpg" />
</div>
<div>
<img src="Images/Tearing_Apart.jpg" />
</div>
<div>
<img src="Images/Teaser.jpg" />
</div>
<div>
<img src="Images/Terra_Nova.jpg" />
</div>
</div>
</div>
をすべてのヘルプは大幅に