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

Question

我正在试着从左向右滑动图像，在一个设置点之后，它应该再次以相反的方向滑动。这是我的代码，不知何故无法工作，因为我在if语句中的某个地方出错了。

​

(function($) {
    var x = 0;
    var y = 0;
    //cache a reference to the banner  
    var banner = $("#banner");
    // set initial banner background position  
    banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
    // scroll up background position every 90 milliseconds  
    window.setInterval(function() {
        banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
        x++;
        //x--;  
        //if you need to scroll image horizontally -  
        // uncomment x and comment y  
    }, 90);
    if ($(banner.offset().left > 40) {
        banner.css("backgroundPosition", "0px 0px ");
    }
})(jQuery);

div#banner {
  width: 960px;
  height: 200px;
  margin: auto;
  background: url(http://cdn-careers.sstatic.net/careers/gethired/img/companypageadfallback-leaderboard-2.png?v=59b591051ad7) no-repeat 0 0;
}
div#banner p {
  font: 15px Arial, Helvetica, sans-serif;
  color: white;
  position: relative;
  left: 20px;
  top: 120px;
  width: 305px;
  padding: 20px;
  background: black;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 20px;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner"></div>

​

Answer 1

首先，您使用的是IIFE (立即调用的函数表达式)，而不是DOM就绪处理程序。这段代码只有放在它引用的元素之后才能工作。

对DOM ready使用此快捷方式，该快捷方式还提供本地作用域$

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

您还缺少一个结束paren (或者实际上是一个冗余的$(，因为它已经是一个jQuery对象)：

JSFiddle: http://jsfiddle.net/g0gn4osy/7/

你还需要有一个增量值，当你命中一个绑定值时，它会改变方向。我加快了你的时间来展示这个：

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);

});

备注：

对于CSS属性，

• 也使用了backgroundPosition而不是background-position。我更喜欢使用与css属性匹配的值(仅限maintenance).
• To的个人选择)避免冗余的$()问题，我建议您在jQuery变量前加上$。例如，本例中为$banner。
• 我倾向于使用元素的当前位置，而不是让全局变量运行。这允许外部影响改变位置并仍然工作。我删除了x，只使用position。

Answer 2

灵感来自于Gone Coding的 answer。

我扩展了他的示例，以考虑图像宽度和视图窗格 DIV width。

它现在滚动到图像结束，然后返回。您永远不会滚动离开画布或经过图像的可见部分。它不会颠簸，也不会摇晃，只是切换方向。

通过感知查看框的宽度，您可以轻松地调整div#banner的宽度以适应显示空间，并调整代码。只需记住设置背景图像宽度imgW变量。

我还添加了：

用于测试当前位置和滚动方向的

1. Visual指示器。(使用-1向左滚动，+1向右滚动)，
2. Image start position in px。(负数或零。与左边的0是开始图像，减去的数字是开始图像的一部分，即图像预滚动left)
3. Image开始垂直位置 in px (垂直拉图像向上/向下。如果视图窗格高度小于图像高度，并且您希望调整所看到的内容，则非常有用)

要做的事情：

通过视图窗格的宽度：(var imgW = #PIXELWIDTH#;)

• Play :和高度: of

1. 更改图像URL和图像宽度。

好好享受吧。

小提琴

玩一玩http://jsfiddle.net/Lm5yk46h/

图片来源:马克·希金斯| Dreamstime.com Image source for purchase

Javascript

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

CSS

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

HTML

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

Answer 3

只需将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);