いくつかのdivを水平方向にスライドさせようとしていますが、期待どおりに反応しません...
基本的に、製品div内にそれぞれ設定された数の「製品」があります。ユーザーが右矢印にカーソルを合わせると、製品が右にスライドし、さらに表示されます。マウスを左矢印に合わせると、製品が次のようにスライドします。左側
私が遭遇しているいくつかの問題...
1.どちらの方向でも、最後のdivに到達すると停止する正確なスライドがないようです。
2.私のjqueryコードがめちゃくちゃになっていると思います。これは、自分自身からのマイナーな調整で見つけたコピー/貼り付けコードの寄せ集めです。Jqueryではまだ本当に新しいです。
これが私のコードです
<script type="text/javascript" language="javascript">
$(document).ready( function() {
$('#btn-next').hover(function(){
$('#product-slides').stop().animate({left: '-=300'},2000,function(){
setTimeout(function() {$('#product-slides').css("left", "-=300")},2000);
});
},
function() {
$('#product-slides').stop();
});
$('#btn-previous').hover(function(){
$('#product-slides').stop().animate({left: '+=300'},2000,function(){
setTimeout(function() {$('#product-slides').css("left", "+=300")},2000);
});
},
function() {
$('#product-slides').stop();
});
});
</script>
<div class="featured">
<img src="/images/btn-previous.png" alt="Previous Products" class="previous" id="btn-previous" />
<div class="product-slider">
<div id="product-slides">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
</div>
<img src="/images/btn-next.png" alt="Next Products" class="next" id="btn-next" />
ご協力いただきありがとうございます。追加情報が必要な場合はお知らせください。よろしくお願いいたします。