如何使用jquery carousel在非活动元素li上设置不透明度

时间:2012-10-31 17:53:00

标签: jquery carousel

我试图尝试一些不同的旋转木马,id喜欢有可能改变旋转木马本身的非活动元素的不透明度。

    <section class="wrap">

<div></div>   
</section>    

<section id="carousel">
<ul>
    <li>

            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>

    </li>
   <li>

            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>

    </li>
    <li>



 $(document).ready(function() {
$("#carousel ul").jcarousel({
        scroll:1,
        auto:5,
        wrap:'both',
        easing: 'easeInOutBack',
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

});​

在下面的这个link中,有一个例子,我想从中央div开始获得。 col,让其他元素,左边和右边的元素几乎看不见,是否有可能???

提前谢谢!

1 个答案:

答案 0 :(得分:0)

我找到了插件作者的一个例子,我相信它能做到你想要的。你可以看看这个链接:

https://github.com/jsor/jcarousel/tree/91b1616fab0e3dfbdb8f39e42f39c48cbe6000d6/examples/feature_slider

//编辑,你可以试试这个,有些小问题应该可行。

CSS - .jcarousel-item { opacity : 0.1 } .jcarousel-item.active { opacity: 1 !important }

JS -

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
    visible: 3,
    scroll: 1,
    itemVisibleInCallback: {
    onAfterAnimation: function ( c, o, i, s ) {
        i = ( i - 2 ) % $('#mycarousel li').size();
        jQuery('.jcarousel-item').removeClass('active');
        jQuery('.jcarousel-item').eq( i ).addClass('active');
    }
}
});

});