Question

我试图横向滑动一些div，但它没有像我希望的那样反应......

基本上我在产品div中有一定数量的“产品” - 我希望当用户将鼠标悬停在右箭头上时，产品向右滑动，显示更多，鼠标悬停在左箭头上，产品向左滑动

我遇到了几个问题...

1。我似乎没有一个准确的幻灯片，如果它到达最后一个div，在任何一个方向停止

2。我认为我的jquery代码搞砸了，它是一个复制/粘贴代码的hodge podge我发现w / MINOR从我自己调整 - 仍然真的是新的W / 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" />

非常感谢您对此的帮助....如果您需要任何其他信息，请与我们联系 - 再次非常感谢提前

Jquery水平滑动

0 个答案: