1

我快到了。但是，有一个我无法解决的错误。我认为问题在于使用百分比而不是像素（因为我希望横幅针对不同的屏幕宽度调整大小）。

横幅每 5 秒滚动一次，但在返回到开头之前只会到达第三张图像。另外 - 当我将窗口调整得非常小时，横幅仅在前两个图像之间旋转（有时会滚动到不存在的第 5 个图像，显示空白）。

我玩过Javascript。将 IF 语句更改为 < -400%（仍旋转 3 个图像）。当我将它设置为 < -800% 时，它会转到 2 张图像，而 < -1000% 它永远不会回到开头！我很困惑，但也许我错过了一些明显的东西。

HTML：

<div id="wrapper">

    <div id="subwrapper3">

        <div class="bannerwrapmain">
            <img src="/images/banner-image-1.jpg" />
        </div>

        <div class="bannerwrapmain">
            <img src="/images/banner-image-2.jpg" />
        </div>

        <div class="bannerwrapmain">
            <img src="/images/banner-image-3.jpg" />
        </div>      

        <div class="bannerwrapmain">
            <img src="/images/banner-image-4.jpg" />
        </div>  

    </div>

</div>

CSS：

#wrapper 
{
    width:100%;
    overflow:hidden;
    margin:0px 0px 0px 0px;
    padding:0px;
}

#subwrapper3
{
    width:400%;
    overflow:hidden;
    margin: 0px;
    padding:0px;
}

.bannerwrapmain
{
    display: block;   
    width:25%;
    margin:0px;
    padding:0px;
    float:left;
}

.bannerwrapmain img
{
    width:100%;
    margin:0px;
    padding:0px;
    height:auto;
    border:none;
}

JAVASCRIPT：

window.setInterval(function(){

if ($("#subwrapper3").css("marginLeft") < "-300%") { 
    $("#subwrapper3").animate({ marginLeft: '0%' });
} else {
    $("#subwrapper3").animate({ marginLeft: '-=100%' });        
}

}, 5000);
4

1 回答 1

1

尝试将主包装器设置为固定尺寸，例如 1000 像素。然后你的 subwrapper 到 100%，你的图片到 max-width:100%;

#wrapper{width:1000px;}
#subwrapper3, .bannerwrapmain{width:100%;}
.bannerwrapmain img{max-width:100%;}

然后，您可以使用媒体查询根据屏幕大小更改主包装宽度，并且包含的​​元素将随之缩放：

@media screen and (max-width:500px){    
    #wrapper{width:500px;}
}

几个月前我创建了一个内容滑块，它可能对你有一些帮助...... http://codepen.io/lukeocom/pen/mHyBv

于 2013-04-30T00:55:12.360 回答