javascript - 使网站横幅幻灯片占据整个宽度

Question

有没有办法让下面站点中显示的横幅图像连续？我的意思是，在示例中，当前横幅图像在左侧被 chop ，取而代之的是上一张图像的一部分。

我希望当前图像占据横幅的整个宽度。这可能吗？

Here's the Website Template

这是我认为 slider 的重要部分:

CSS:

.wrapper ul {
    padding-left:490px
}

.anythingSlider {
    position:relative
}

.anythingSlider .wrapper {
    width:1920px;
    overflow:auto;
    height:405px
}

/* Width below is max for Opera */
.anythingSlider .wrapper ul {
    width:32700px;
    list-style:none
}

.anythingSlider .wrapper ul li {
    display:block;
    float:left;
    padding:0;
    width:auto;
    margin:0
}

JavaScript:

base.setCurrentPage = function(page, move) {
    // Set visual
    if (base.options.buildNavigation){
        base.$nav.find('.cur').removeClass('cur');
        captions.fadeIn(50);
        $(base.$navLinks[page - 1]).addClass('cur');
    };

    // Only change left if move does not equal false
    if (move !== false) base.$wrapper.scrollLeft(base.singleWidth * page);

        // Update local variable
        base.currentPage = page;
    };

    base.goForward = function(autoplay) {
        if(autoplay !== true) autoplay = false;
        base.gotoPage(base.currentPage + 1, autoplay);
        captions.fadeOut(200);
    };

    base.goBack = function() {
        base.gotoPage(base.currentPage - 1);
        captions.fadeOut(200);
    };

HTML:

<div id="slider-container">
    <div id="slider-holder">
        <div class="anythingSlider">
            <div class="wrapper">
               <ul>
                   <li>
                       <a href="#"><img src="images/content/banner1.png" alt="" /></a>

                       <p class="caption">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</p>
                   </li>

                   <li>
                       <a href="#"><img src="images/content/banner2.gif" alt="" /></a>

                       <p class="caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
                   </li>

                   <li>
                       <a href="#"><img src="images/content/banner3.gif" alt="" /></a>

                       <p class="caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                   </li>
                </ul>
             </div>
       </div>

       <div id="bevel"></div>
   </div>
</div>

Answer 1

我猜你的图片太小了，而且幻灯片包装的左边有一个 490px 填充。尝试将其更改为 100px 并查看效果。它在 slider.css 第一种样式中。 #wrapper ul