2012-01-02 92 views
2

有没有办法让网站中显示的横幅广告图片连续显示?我的意思是,在示例中,当前横幅图像在左侧被切断,并且在其位置上是前一图像的一部分。制作网站横幅广告幻灯片的宽度为

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

Here's the Website Template

这就是我认为是滑块的重要组成部分:

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> 

回答

2

我想你的图片太小了,但幻灯片包装的左边填充了490px。尝试将其更改为100px并查看它的功能。它在slider.css第一种风格。 #wrapper ul

+0

是的。这部分是问题所在。拿走填充物后,横幅一直移动到左侧,但现在右侧有同样的问题。 – 2012-01-02 23:00:55

+0

你需要一张能填满你需要的整个空间的图像。否则,将'right'或'left'边缘添加到'.wrapper ul li',它应该按照您指定的量分隔图像。 – 2012-01-03 15:03:35

+0

感谢您的帮助。我能弄明白。问题是现在我不记得我是如何修复它的。大声笑。 – 2012-01-03 19:44:03