javascript - 响应式设计 : Scrolling JS/JQuery Rotating Banner Using Percentages (not px)

Question

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

横幅每 5 秒滚动一次，但在返回开头之前只会到达第 3 个图像。此外 - 当我将窗口调整得非常小时，横幅仅在前两个图像之间旋转(有时滚动到不存在的第 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);

Answer 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;}
}

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