javascript - 请问jquery的轮播头图翻页效果无法实现，是什么问题？

Question

我想用jquery的animate实现轮播头图实现翻页效果。但是当我点击a标签时，无法实现。

页面地址：http://louislee0229.github.io...
代码部分如下：

<script type="text/javascript">
    $(function(){
        var page = 1;//初始页
        var i = 4;//4个翻页
        //向后
        $("a.next").click(function(){ //绑定click事件
            var $parent = $(this).parent("p.contain");//根据当前点击元素获取到父元素
            console.log($parent);
            var $v_show = $parent.find("p.product_list"); //寻找到“视频内容展示区域”
            console.log($v_show);
            var $v_content = $parent.find("p.product"); //寻找到“视频内容展示区域”外围的p元素
            console.log($v_content);
            $v_show.animate({ left : '-977px' }, "slow");
            return false;
        });
    });
    </script>

dom结构如下：

    <p class="contain">
        <p class="product">
            <p class="button">
            <a class="prev"><img src="pic/left.png" style="width:23px;height:23px;"></a>
            <a class="next"><img src="pic/right.png" style="width:23px;height:23px;"></a>
            </p>
            <p class="product_list">
            <ul class="list">
                <li><a href="#"><img src="pic/pic-1.jpg"></a></li>
                <li><a href="#"><img src="pic/pic-2.jpg"></a></li>
                <li><a href="#"><img src="pic/pic-3.jpg"></a></li>
            </ul>
            </p>
        </p>
        <p class="items">
            <img src="pic/page-1_03.png">
            <img src="pic/page-1_05.png">
            <img src="pic/page-1_07.png">
        </p>
    </p>

Answer 1

首先如樓上所說先阻止默認事件，把 href 刪除並不是阻止默認事件，還是得在 js 中處理
還有這行 var $parent = $(this).parent("p.contain")
parent() 是找父元素，這樣他只會找到上一層，但是 p.contain 是在更上層的地方，要用 parents()，這是找祖先元素的方法

這邊是改好的，測試過了可以運行

$("a.next").click(function(event){ //绑定click事件
    event.preventDefault() // 阻止默認事件
    var $parent = $(this).parents("p.contain");//根据当前点击元素获取到父元素
    console.log($parent);
    var $v_show = $parent.find("p.product_list"); //寻找到“视频内容展示区域”
    console.log($v_show);
    var $v_content = $parent.find("p.product"); //寻找到“视频内容展示区域”外围的p元素
    console.log($v_content);
    $v_show.animate({ left : '-977px' }, "slow");
    return false;
});

Answer 2

那个按钮是a标签吧，建议你先阻止一下a的默认事件。

Answer 3

a有默认事件，a标签写成

<a href="javascript:void(0);"></a)