Question

我正在尝试使用bxslider使用bxslider中的goToSlide函数和一组自定义按钮来滑动整个页面的内容。当我使用.bxSlider函数加载滑块时，它加载得很好。但是，当我单击按钮转到特定幻灯片时，它表示该方法不存在！我知道哪里弄错了？

这是我的代码：

<html>
<head>
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/grids.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/jquery-1.11.0.min.js"></script>
    <script src="js/main-test.js"></script>
    <script src="js/vendor/jquery.bxslider.min.js"></script>
</head>
<body>
    <section class="section-3" id="lastBlock-wrapper">
        <ul id="lastBlockCtrl">
            <li class="switch">
                <div class="switchbar"></div>
                <div class="switchbar"></div>
                <div class="switchbar"></div>
            </li>
            <li class="diamond"><a onClick="jumptoslide(0);" class="active">Performance</a></li>
            <li class="diamond"><a onClick="jumptoslide(1);">Durability</a></li>
            <li class="diamond"><a onClick="jumptoslide(2);">Transparency</a></li>
        </ul>
        <ul id="slider">
            <li>
                <section class="feature">
                    <div class="grid" style="height: 100%;">
                        <div class="grid__item two-fifths grid--center slider-bg">
                            <h1>Test</h1>
                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Performance</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <section class="feature">
                    <div class="grid">
                        <div class="grid__item two-fifths grid--left">

                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Showcase</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <section class="feature">
                    <div class="grid">
                        <div class="grid__item two-fifths grid--left">

                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Showcase</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
        </ul>
    </section>
</body>

$( document ).ready( function () {

    //last slider
    var bxslider = $('.slider').bxSlider({        
        controls: false,
        easing: 'ease-in-out'
    });

    jumptoslide = function (slide) { 
        bxslider.goToSlide(slide);
    };

} );

Answer 1

您没有滑块类。您只有一个滑块ID。

更改

var bxslider = $('.slider').bxSlider({        
    controls: false,
    easing: 'ease-in-out'
});

到

var bxslider = $('#slider').bxSlider({        
    controls: false,
    easing: 'ease-in-out'
});

Answer 2

将javascript代码中的$('.slider')更改为 $('#slider') ，因为您在html中提到的滑块为id而不是class。< / p>

.用于表示类。

#用于表示身份。

希望它有所帮助。

我该如何修复：未捕获的TypeError：对象[object Object]没有与bxslider一起使用'goToSlide'的方法？

2 个答案: