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

问题描述

问 题

我想用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("div.contain");//根据当前点击元素获取到父元素
            console.log($parent);
            var $v_show = $parent.find("div.product_list"); //寻找到视频内容展示区域
            console.log($v_show);
            var $v_content = $parent.find("div.product"); //寻找到视频内容展示区域外围的DIV元素
            console.log($v_content);
            $v_show.animate({ left : '-977px' }, "slow");
            return false;
        });
    });
    </script>

dom结构如下：

    <div class="contain">
        <div class="product">
            <div 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>
            </div>
            <div 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>
            </div>
        </div>
        <div class="items">
            <img src="pic/page-1_03.png">
            <img src="pic/page-1_05.png">
            <img src="pic/page-1_07.png">
        </div>
    </div>

解决方案

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

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

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

这篇关于javascript - 请问jquery的轮播头图翻页效果无法实现，是什么问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！