为什么这个jQuery滑块垂直工作但不是水平工作？

时间：2011-09-03 13:43:16

标签： javascript jquery css

我有一个滑块，它有一个主图像区域和侧面的小拇指。当您单击拇指时，它会在主图像区域中以较大的尺寸加载该图像。还有下一个和上一个链接。如果有更多的拇指，那么有空间可以显示，然后只显示13个，其余隐藏。当您单击“下一步”时，所有拇指向上移动一个，导致另外一个拇指暴露。当您单击“上一个”时，所有拇指向下移动一个，导致前一个拇指暴露出来。这就是垂直滚动的工作原理，以下是代码：

HTML：

    <div class="gallery">
        <div id="gallery_actions">
            <div class="gallery_count"><span class="counter">3</span> / 17</div>
            <div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
        </div>
        <div class="carousel">
            <div class="arrow arrow_previous"></div>
            <div class="carousel_region">
                <div class="carousel_subregion">

<ul class="carousel_slide">
    <li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
    <img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
    <img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
    </li>

    <li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
    <img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
    <img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
    <img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
    <img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
    <img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
    <img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
    <img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
    <img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
    <img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
    <img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
    <img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
    <img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
    <img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
    <img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
    </li>

    <li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
    <img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
    </li>
</ul>
                </div>
            </div>
            <div class="arrow arrow_next"></div>
        </div>
        <div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
        <div class="pic_info">
            <div class="title">Title goes here</div>
            <div id="description" class="description">Description goes here</div>
        </div>
    </div>

CSS for VERTICAL SLIDE：

.gallery {
    background: #000;
    color: #fff;
    padding: 10px;
}
.gallery .gallery_count {
    float: right;
    font-size: 14px;
    font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }

.carousel {
    float: right;
    width: 125px;
}

.carousel .arrow {
    display: block;
    height: 20px;
    background: url(../sprite_slideshow_controls.png) no-repeat top left;   
    width: 46px;
    height: 30px;   
}

.carousel .arrow_previous {
    background-position: 0 0;
}

.carousel .arrow_previous:hover {
    background-position: 0 -30px;
    cursor: pointer;
}
.carousel .arrow_previous:active {
    background-position: 0 -60px;
}

.carousel .arrow_next {
    background-position: -46px 0;
}

.carousel .arrow_next:hover {
    background-position: -46px -30px;
    cursor: pointer;
}

.carousel .arrow_next:active {
    background-position: -46px -60px;   
}

.carousel .carousel_region {
    overflow: hidden;   
    width: 40px;
    height: 450px;
}

.carousel .carousel_subregion {
    overflow: hidden;
    z-index: 1000;
    position: relative; 
    width: 40px;
    height: 450px;  
}

.carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 500;
}

.carousel ul li {
    float: left;
    overflow: hidden;
    margin: 0 0 5px 0;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #ccc;   
    width: 40px;
    height: 30px;   
}

.carousel ul li:hover {
    opacity: .8;
    filter: alpha(opacity = 80);
}

.carousel ul li.selected, .carousel ul li.selected:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

.carousel .thumb img {
    cursor: pointer;
}

#pic_main {
    text-align: center;
    background: #000;
    border: 1px solid red;
    width: 600px;
    height: 450px;
}

#pic_main img {
    margin: 0 auto;
    display: block;
}

#pic_main img.loading {
    display: block;
    position: relative;
    top: 280px;
}

#pic_main img:first {
    display: block;
}

JQUERY PLUGIN CODE：

(function($) {
    if(typeof($.fn.scrollTo) == 'function') {
        $.fn.slideShow = function(options) {
            var defaults = {
                axis: 'y',
                click: function() { },
                counter: '.counter',
                left: '.arrow_previous',
                increment: 1,
                mouseover: function() { },
                mouseout: function() { },
                next: function() { },
                previous: function() { },
                region: '.carousel_region',
                right: '.arrow_next',
                selected: '.thumb:first',
                selected_class: 'selected',
                slideshow_status: false,
                slideshow_time: 6,
                slideshow_toggle: '.slideshow_toggle',
                speed: 400,
                subregion: '.carousel_subregion',
                thumb: '.thumb'
            };

            var options = $.extend(defaults, options);

            return $(this).each(function() {
                var region = $(options.region, $(this));
                var subregion = $(options.subregion, $(this));
                var left = $(options.left, $(this));
                var right = $(options.right, $(this));
                var slideshow = $(options.slideshow_toggle);
                var timeout;

                var dimension;
                if(options.axis == 'x') {
                    dimension = region.find(options.thumb).eq(0).outerWidth();
                } else if(options.axis == 'y') {
                    dimension = region.find(options.thumb).eq(0).outerHeight();
                }

                var update_counter = function() {
                    var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
                    $(options.counter).text(index + 1);
                };

                $(this)
                    .bind('next', function(event) { region.trigger('next'); })
                    .bind('previous', function(event) { region.trigger('previous'); });

                region
                    .bind('next', function(event) {
                        event.stopPropagation();

                        if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
                            var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;

                            if(next + options.increment > region.find(options.thumb).length) {
                                next = region.find(options.thumb).length - options.increment;
                            }

                            var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
                            if(next_thumb.length == 0) {
                                next_thumb = region.find(options.thumb + ':last');
                            }
                            next_thumb.addClass(options.selected_class);
                            subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });

                            update_counter();

                            return options.next(event);
                        }
                    })
                    .bind('previous', function(event) {
                        event.stopPropagation();

                        if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
                            var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
                            if(prev < 0) {
                                prev = 0;
                            }

                            var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
                            if(prev_thumb.length == 0) {
                                prev_thumb = region.find(options.thumb + ':first');
                            }

                            prev_thumb.addClass(options.selected_class);
                            subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });

                            update_counter();

                            return options.previous(event);
                        }
                    })
                    .find(options.thumb)
                        .bind('click', function(event) {
                            // Move Selected Class
                            region.find('.' + options.selected_class).removeClass(options.selected_class);
                            $(this).addClass(options.selected_class);

                            // Update Counter
                            update_counter();

                            return options.click(event);
                        })
                        .bind('mouseover', function(event) {
                            return options.mouseover(event);
                        })
                        .bind('mouseout', function(event) {
                            return options.mouseout(event);
                        });


                left.click(function() {
                    return region.trigger('previous');
                });

                right.click(function() {
                    return region.trigger('next');
                });

                slideshow
                    .attr('checked', options.slideshow_status)
                    .click(function() {
                        if($(this).is(':checked')) {
                            region.trigger('next');

                            timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
                        } else {
                            clearInterval(timeout);
                        }
                    });

                if(options.selected !== false) {
                    $(region).find(options.selected).click();
                    subregion.scrollTo($(options.selected, region).eq(0), options.speed);
                }
                if(options.slideshow_status) {
                    timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
                }
            });
        };
    }
})(jQuery);

我想稍微改变一下行为，让图像水平滚动而不是垂直滚动。我看到其中一个插件选项是axis。我将该值更改为“x”而不是“y”。并将css更改为：

.gallery {
    background: #000;
    color: #fff;
    padding: 10px;
}
.gallery .gallery_count {
    float: right;
    font-size: 14px;
    font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }

.carousel {
    float: right;
    width: 125px;
    border: 1px solid green;
    width: 490px;
}

.carousel .arrow {
    display: block;
    height: 20px;
    background: url(../sprite_slideshow_controls.png) no-repeat top left;
    width: 46px;
    height: 30px;   
}

.carousel .arrow_previous {
    background-position: 0 0;
}

.carousel .arrow_previous:hover {
    background-position: 0 -30px;
    cursor: pointer;
}
.carousel .arrow_previous:active {
    background-position: 0 -60px;
}

.carousel .arrow_next {
    background-position: -46px 0;
}

.carousel .arrow_next:hover {
    background-position: -46px -30px;
    cursor: pointer;
}

.carousel .arrow_next:active {
    background-position: -46px -60px;   
}

.carousel .carousel_region {
    overflow: hidden;
    width: 490px;
    height: 30px;
}

.carousel .carousel_subregion {
    overflow: hidden;
    z-index: 1000;
    position: relative;
    width: 490px;
    height: 30px;   
}

.carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 500;
}

.carousel ul li {
    float: left;
    overflow: hidden;
    margin: 0 0 5px 0;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #ccc;
    width: 40px;
    height: 30px;   
}

.carousel ul li:hover {
    opacity: .8;
    filter: alpha(opacity = 80);
}

.carousel ul li.selected, .carousel ul li.selected:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

.carousel .thumb img {
    cursor: pointer;
}

#pic_main {
    text-align: center;
    background: #000;
    border: 1px solid red;
    width: 600px;
    height: 450px;
}

#pic_main img {
    margin: 0 auto;
    display: block;
}

#pic_main img.loading {
    display: block;
    position: relative;
    top: 280px;
}

#pic_main img:first {
    display: block;
}

否则HTML和jQuery的其余部分完全相同。然而，它不起作用。当您单击“下一步”时，图像不会向左滑动，导致列表中的下一个图像被曝光。

我不确定这是一个jQuery还是一个CSS问题，但我昨天花了一整天时间试图找出它没有运气。有人可以帮忙吗？

0 个答案:

没有答案
相关问题
最新问题