Question

我正在构建一个carouFredSel广告牌，左边是主要的大图像，右边是三个拇指，下面是导航分页。

我可以让旋转木马完美地与图像一起工作，但是我在尝试弄清楚如何修改代码时会遇到问题，我可以将主图像放在DIV中并旋转DIV代替。

也许我只是错过了什么。

链接到jFiddle：HERE

这是页面内的Javascript，Jquery和CarouFredSel已经链接：

$(function() {
        var $carousel = $('#carousel'),
            $pager = $('#pager');

        function getCenterThumb() {
            var $visible = $pager.triggerHandler( 'currentVisible' ),
                center = Math.floor($visible.length / 2);

            return center;
        }

        $carousel.carouFredSel({
            responsive: true,
            items: {
                visible: 1,
                width: 746,
                height: (214/746*100) + '%'
            },
            scroll: {
                fx: 'crossfade',
                onBefore: function( data ) {
                    var src = data.items.visible.first().attr( 'src' );
                    src = src.split( '/large/' ).join( '/small/' );

                    $pager.trigger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] );
                    $pager.find( 'img' ).removeClass( 'selected' );
                },
                onAfter: function() {
                    $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' );
                }
            },
            pagination: {
                container: '#nav'
            }
        });

        $pager.carouFredSel({
            height: '100%',
            auto: false,
            width: 300,
            items: {
                visible: 3
            },
            direction: "up",
            onCreate: function() {
                var center = getCenterThumb();
                $pager.trigger( 'slideTo', [ -center, { duration: 0 } ] );
                $pager.find( 'img' ).eq( center ).addClass( 'selected' );
            }
        });
        $pager.find( 'img' ).click(function() {
            var src = $(this).attr( 'src' );
            src = src.split( '/small/' ).join( '/large/' );
            $carousel.trigger( 'slideTo', [ 'img[src="'+ src +'"]' ] );
        });

        $('#nav').hover(function() {
            var current = $('#carousel').triggerHandler( 'currentPosition' );
            thumbs.trigger( 'slideTo', [ current, 0, true, { fx: 'none' } ] );
            $('#thumbs').stop().fadeTo(300, 1);
        }, function() {
            $('#thumbs').stop().fadeTo(300, 0);
        });

        $('#nav a').mouseenter(function() {
            var index = $('#nav a').index( $(this) );

            //  clear the queue
            thumbs.trigger( 'queue', [[]] );

            //  scroll
            thumbs.trigger( 'slideTo', [index, { queue: true }] );
        });
    });

Answer 1

我相信这就是你所需要的： http://jsbin.com/geqakupe/10/edit

图像广告牌问题

1 个答案: