Javascript 将图像从左向右滑动，然后再次反转

我试图将图像从左向右滑动，在设定点后，它应该再次反向滑动。这是我的代码，不知怎么的，它不起作用，因为我在if语句的某个地方出错了

（函数（$）{
var x=0；
var y=0；
//缓存对横幅的引用
var banner=$（“#banner”）；
//设置初始横幅背景位置
css（'backgroundPosition'，x+'px'+''+y+'px'）；
//每90毫秒向上滚动一次背景位置
setInterval（函数（）{
css（“backgroundPosition”，x+'px'+''+y+'px'）；
x++；
//x--；
//如果需要水平滚动图像-
//取消注释x和注释y
}, 90);
如果（$（banner.offset（）.left>40）{
css（“背景位置”，“0px 0px”）；
}
})（jQuery）；

div#banner{
宽度：960px；
高度：200px；
保证金：自动；
背景：url(http://cdn-careers.sstatic.net/careers/gethired/img/companypageadfallback-leaderboard-2.png?v=59b591051ad7)不重复0；
}
分区#横幅p{
字体：15px Arial，Helvetica，无衬线；
颜色：白色；
位置：相对位置；
左：20px；
顶部：120px；
宽度：305px；
填充：20px；
背景：黑色；
文本对齐：居中；
文本转换：大写；
字母间距：20px；
缩放：1；
过滤器：α（不透明度=50）；
不透明度：0.5；
}

---

只需将

if

条件放入

setInterval

中，并检查语法错误。

if

没有结束符

}

：

// scroll up background position every 90 milliseconds  
window.setInterval(function() {
  banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
  x++;
  //x--;  

  if (banner.offset().left > 40) {
      banner.css("backgroundPosition", "0px 0px ");
  }

}, 90);

你的“如果”应该是这样的：

if ($(banner).offset().left > 40) {
    banner.css("backgroundPosition", "0px 0px ");

  }

---

您的if应该插入到setInterval处理程序中，因此它将每90毫秒计算一次（谢谢您纠正我的错误）

实际上，只有在第一次解析javascript文件时，才会计算if

---

将它添加到setInterval中，它应该按预期工作。首先，您使用的是IIFE（立即调用的函数表达式），而不是DOM就绪的处理程序。此代码只有放在它引用的元素之后才能工作

对DOM ready使用此快捷方式，该快捷方式还提供本地范围的

$

jQuery(function ($) {...});

您还缺少一个结束参数（或者实际上是一个冗余的

$（

，因为它已经是一个jQuery对象）：

JSFiddle:

你还需要有一个delta值，当你达到一个绑定值时，它会改变方向。我加快了你的计时来显示这一点：

jQuery(function ($) {

    var delta = 1;
    var y = 0;
    //cache a reference to the banner  
    var $banner = $("#banner");

    // set initial banner background position  
    $banner.css('background-position', '0px' + ' ' + y + 'px');

    // scroll up background position every 90 milliseconds  
    window.setInterval(function () {
        var position = parseInt($banner.css('background-position'));
        if (position >= 40 || position < 0) {
            delta = -delta;
        }
        position += delta;
        $banner.css("background-position", position + 'px' + ' ' + y + 'px');
    }, 10);

});

jQuery（函数（$）{
varδ=1；
var y=0；
//缓存对横幅的引用
var$banner=$（“#banner”）；
//设置初始横幅背景位置
$banner.css（'background-position'，'0px'+''+y+'px'）；
//每90毫秒向上滚动一次背景位置
window.setInterval（函数（）{
var position=parseInt（$banner.css（'background-position'））；
如果（位置>=40 | |位置<0）{
delta=-delta；
}
位置+=三角形；
$banner.css（“背景位置”，位置+'px'+''+y+'px'）；
}, 10);
});

笔记：

• CSS属性也有

  backgroundPosition

  而不是

  backgroundPosition

  。我更喜欢使用与CSS属性匹配的值（个人选择仅用于维护）
• 为了避免冗余的

  $（）

  问题，我建议您在jQuery变量前面加上

  $

  。例如，在这种情况下，

  $banner

  。然后，很明显您正在处理jQuery对象
• 我倾向于使用元素的当前位置，而不是保持全局var运行。这允许外部影响更改位置并仍然有效。已删除

  x

  并仅使用位置

---

灵感来源于《Gone编码》的答案
我扩展了他的示例，将图像宽度和视图窗格

DIV

宽度考虑在内
它现在会滚动到图像的末尾，然后再滚动回来。你永远不会从画布上滚动，也不会滚动过图像的可见部分。它不会抖动或晃动，只会切换方向
了解查看框的宽度后，您可以轻松调整

div#banner

的宽度，以适应显示空间并调整代码。只需记住设置背景图像宽度

imgW

var
我还添加了：
• 视觉指示器用于测试当前位置和滚动方向。（当

  -1

  向左滚动时，

  +1

  向右滚动时）
• 图像开始位置在

  px

  中（一个负数或零。如果

  0

  是左侧的开始图像，负数是部分通过图像预滚动到左侧的开始图像）
• 图像开始垂直位置在

  px

  中（垂直向上/向下拉动图像。如果视图窗格高度小于图像高度，并且您希望调整所看到的内容，则此功能非常有用）
要做的事情：
• 更改图像URL（

  背景：URL（IMAGENAMEHERE）不重复0；

  ）
• 插入图像宽度（

  var imgW=#像素宽度#

  ）
• 使用视图窗格的宽度和高度（

  div#banner

  ）
享受
不停摆弄 有戏
图片来源：马克·希金斯| Dreamstime.com
Javascript HTML

点击运行

if在计时器回调之外，因此只运行一次。90“毫秒循环”，您错过了其他问题..更新：您仍然错过了其他问题这不会“滑动”当它按要求达到40px时再次返回。实际上，您的JSFIDLE从未停止向右滑动。当达到限制时，这不会再次向后滑动。原始代码需要增强以支持这一点。如您所愿：）删除

x

变量确实有意义

jQuery(function ($) {
    var delta = 1;
    var imgW = 3000;//width of image px
    var imgY = 0;//to shift image view vertically px (Minus or zero)

    //cache ref to #banner  
    var $banner = $("#banner");
    var viewpaneW = $banner.width();
    var endpos = (imgW - viewpaneW);
    var startpos = 0;//0 or negative number

    // set initial banner background position
    $banner.css('background-position', startpos + 'px' + ' ' + imgY + 'px');

    // scroll background position every 20ms
    window.setInterval(function () {
        var position = parseInt($banner.css('background-position'));
        // minus is left, plus is right
        if (position >= 0 ) delta = -delta;//go left
        if (position < (-1*endpos)) delta = (-1*delta);//go right
        position += delta;//increment posn
        $banner.css("background-position", position + 'px' + ' ' + imgY + 'px');
        $("#indicator").text('Posn:' + position + '  | direction: ' + delta);
    }, 20);
});

div#canvas {
    background-color: #999;
    width: 100%;
    height: 400px;
    margin:0;padding:10px;
}
div#banner {
    width: 460px;
    height: 300px;
    margin: 10px;
    background: url(https://digido.net/eg/newcastle-beach-3000x300.jpg) no-repeat 0 0;
}
div#banner p {
    font: 13px Arial, Helvetica, sans-serif;
    color: white;
    position: relative;
    left: 0;
    top: 310px;
    width: 99%;
    padding: 10px;
    background: black;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 8px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

<div id="canvas">
    <div id="banner">
        <p id="indicator">Hit run</p>
    </div>
</div>