javascript - 如何修改此滑动 div 以使其实际工作？

Question

嗨，我正在尝试合并我在这个 jfiddle 上找到的代码：http: //jsfiddle.net/x2qk7/158/

进入我的网站，但它不起作用。

从我的实际页面粘贴它看起来像这样：

<script type="text/javascript"> $(document).ready(function(){

    $('a.next').click(function(){             
        $('.slide').animate({left:-720})
    })

});​ </script>

<style>.form-slides {width:100000px;} .slide {width:300px;float:left;left:0;position:relative;}​&lt;/style>

<div class="form-slides">
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div>
    <div class="slide">
        <p>Lipsum blah blah blah</p>
        <a href="#" class="next">Next</a> 
    </div> </div>

这似乎是准确的，但它根本不起作用。我错过了什么吗？

Answer 1

1. jQuery 加载了吗？

2. 我不知道你的目标是什么，但我认为改变left动画可能有助于进入第三张幻灯片

   $('a.next').click(function(){             
       $('.slide').animate({left: "-=785px"})
   })
   

   试试这个。

3. 回答@Daniel Fein评论：是的，有一种方法，而且很简单。用 a 包裹它<div>并为其添加overflow:hidden属性。就像这样