2

我正在尝试水平滑动一些 div，但它没有像我希望的那样做出反应......

基本上我在一个产品 div 中有一组“产品” - 我希望这样当用户将鼠标悬停在右箭头上时，产品向右滑动，显示更多，鼠标悬停在左箭头上，产品滑动到左边

我遇到了几个问题......

1.如果到达最后一个 div，我似乎无法准确地在任一方向停止滑动

2.我认为我的 jquery 代码搞砸了，它是我发现的复制/粘贴代码的大杂烩，带有我自己的 MINOR 调整 - 仍然是带有 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" />

非常感谢您对此提供的帮助....如果您需要任何其他信息，请告诉我-再次非常感谢您

4

0 回答 0