Image Billboard Issues | 易学教程

问题

I am building a carouFredSel billboard that has the main large image on the left, three thumbs on the right, and a nav pagination below.

I can get the carousel to work perfectly with just images, but I'm having issues trying to figure out how to modify the code that that I can put the main image in a DIV and rotate the DIV's instead.

Maybe I'm just missing something.

Link to jFiddle: HERE

Here's the Javascript that is inside the page, with Jquery and CarouFredSel already linked:

$(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 }] );
        });
    });

回答1:

I believe this is what you need: http://jsbin.com/geqakupe/10/edit

来源：https://stackoverflow.com/questions/22177804/image-billboard-issues

标签

javascript

jquery

html

caroufredsel