我试图从左到右滑动图像，在设定点之后它应该再次向相反方向滑动。这是我的代码，它在某种程度上不起作用，因为我在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>
答案 0 :(得分：2)
首先，您使用IIFE（立即调用函数表达式）而不是DOM就绪处理程序。此代码仅在放置在它引用的元素之后才有效。
将此快捷方式用于DOM ready，同时提供本地范围的$
jQuery(function ($) {...});
你也有一个丢失的结束语（或者实际上是一个冗余的$(，因为它已经是一个jQuery对象）：
JSFiddle： http://jsfiddle.net/g0gn4osy/7/
您还需要一个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);
});
backgroundPosition而不是background-position。我更喜欢使用与css属性匹配的值（仅用于维护的个人选择）。$()问题，我建议您使用$为jQuery变量添加前缀。例如在这种情况下$banner。然后很明显你正在处理一个jQuery对象。x并仅使用职位。答案 1 :(得分：1)
灵感来自并模仿了 Gone Coding的答案。
我已经扩展了他的示例，以考虑图像宽度和视图窗格 DIV宽度。
现在滚动到图像末尾，然后再返回。您永远不会滚出画布或滑过图像的可见部分。它不会晃动也不晃动，只需切换方向即可。
了解了查看框的宽度后，您可以轻松调整div#banner的宽度以适合显示空间，并进行代码调整。只需记住设置背景图像宽度imgW即可。
我还添加了：
-1向左滚动，+1向右滚动），px中0是左侧的起始图像，负号是整个图像中途的起始图像，即向左预滚动的图像）px中的垂直起始位置（以垂直向上/向下拉图像。如果视图窗格的高度小于图像高度，并且您想调整所看到的内容，则很有用）要做的事情：
background: url(IMAGENAMEHERE) no-repeat 0 0;）var imgW = #PIXELWIDTH#;）div#banner）的WIDTH和HEIGHT：享受。
播放http://jsfiddle.net/Lm5yk46h/
图片来源Mark Higgins | Dreamstime.com Image source for purchase
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>
答案 2 :(得分：0)
只需将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);
答案 3 :(得分：0)
你的“if”应该是这样的：
In [43]: df=pd.DataFrame(np.random.rand(10,5))
In [44]: sr=pd.Series(np.random.rand(5))
In [45]: df
Out[45]:
0 1 2 3 4
0 0.435234 0.197012 0.364953 0.942068 0.657147
1 0.310736 0.721353 0.880256 0.140999 0.757069
2 0.840233 0.957006 0.785870 0.884206 0.625479
3 0.368817 0.386193 0.634408 0.895458 0.433639
4 0.804589 0.509249 0.124370 0.556714 0.895174
5 0.034010 0.519510 0.853540 0.192033 0.234513
6 0.262984 0.270159 0.673854 0.465467 0.906740
7 0.318838 0.518621 0.295384 0.596599 0.612002
8 0.804619 0.616971 0.309750 0.544413 0.013770
9 0.440933 0.857697 0.447541 0.266759 0.002859
In [46]: sr
Out[46]:
0 0.807357
1 0.605892
2 0.328464
3 0.298340
4 0.424584
dtype: float64
In [47]: dfmin = pd.DataFrame(np.minimum(np.array(df),np.array(sr)))
In [48]: dfmin
Out[48]:
0 1 2 3 4
0 0.435234 0.197012 0.328464 0.298340 0.424584
1 0.310736 0.605892 0.328464 0.140999 0.424584
2 0.807357 0.605892 0.328464 0.298340 0.424584
3 0.368817 0.386193 0.328464 0.298340 0.424584
4 0.804589 0.509249 0.124370 0.298340 0.424584
5 0.034010 0.519510 0.328464 0.192033 0.234513
6 0.262984 0.270159 0.328464 0.298340 0.424584
7 0.318838 0.518621 0.295384 0.298340 0.424584
8 0.804619 0.605892 0.309750 0.298340 0.013770
9 0.440933 0.605892 0.328464 0.266759 0.002859
答案 4 :(得分：-1)
你的if应该插入你的setInterval处理程序中，所以它会每90毫秒得到一次评估（谢谢你纠正我）。
实际上，只有在你的javascript文件被解析时才第一次评估你的if。
将它添加到你的setInterval中，它应该按预期工作