Question

我的网站上有一个使用bxslider的主要功能，我的Html makrup如下：

    <ul class="bxslider">
    <li class="slide_one">
        <h1>Quality Comes First</h1>
        <p><a href="/products">Products <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_two">
        <h1>uk market leaders</h1>
        <p><a href="/process">Processes <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
    <li class="slide_three">
        <h1>100% MADE IN THE UK</h1>
        <p><a href="/services">Quality Services <img src="/images/arrow-right.png" alt=""/></a></p>
    </li>
</ul>

<div class="sub_nav">
    <div class="row">
        <ul id="bx-pager">
            <li class="four columns"><a index="0" href="#" >Products</a></li>
            <li class="four columns"><a index="1" href="#" >Processes</a></li>
            <li class="four columns"><a index="2" href="#" >Quality Services</a></li>
        </ul>
    </div>
</div>

所以，我有每个滑块内容和图像的主要bxslider区域，然后我在下面创建了一个tab（sub_nav），我希望它们能够跟随主bxslider寻呼机的活动状态。

我的js如下：

<script>
var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
if(!oldieCheck) {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');

} else {
document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
}
</script>

$(this).ready(function() {
var slider;
slider=$('.bxslider').bxSlider({
auto: true,
mode: 'fade',

onSlideAfter: function($slideElement, oldIndex, newIndex){
    $(this).addClass('onstate');
}
});

    $(".sub_nav li a").click(function(e) {
        e.preventDefault();
        var index = $(this).attr('index');
        slider.goToSlide(parseInt(index));
        $(".sub_nav li a").removeClass('onstate');
        $(this).addClass('onstate');
    });
})

Answer 1

这是适用于我的代码。

请注意，要在代码中使用'slider'var，我首先在设置bxslider时初始化它。

#wrapper {
    height: 80vmin;
}
.scrollable {
    height: 63vmin;
    margin-bottom: 3vmin;
    overflow: hidden;
}
div {
    padding: 2vmin;
    border: 1px solid #ccf;
}

如何制作标签跟随bxslider寻呼机？

1 个答案: