Question

我有4896x421图片我希望这个图像向左移动247“没有这个img永远结束” 有没有办法重复“真实”图像左右两侧的图像，以便我不会得到“白点”移动这个图像？

开始位置：div没有“白点”

https://www2.pic-upload.de/img/32898926/1.png

几秒钟后（右侧的白点）：

https://www2.pic-upload.de/img/32898925/2.png

我编辑了图像，这样如果我将图像拍摄时间并将它们彼此相邻放置，它们看起来就像是一张大图像，我可以一直填充div而不显示整个图像吗？

$('#bg1').animate({'left': 1000},10000,'linear');

#wrapper {
	top: 75px;
	left: 5px;
	width:1777px;
	height:1000px;
	overflow: hidden;
	position:relative;
}

.bg{
	top: 0px;
	left: 0px;
	position: absolute;
}
#bg1{
	background-image: url("../img/bg3.png");
  background-color:#000;
	background-repeat: repeat-x;
	z-index: 10;
	height: 100%;
	width: 100%;
}

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

ty guys！

Answer 1

试试这个！

JSfiddle with comments

$(function() {
  var $image = $('#bg1');
  var imgW = $image.css("background-size").replace('px', ''); //negative number of backgroung image size
  
  //comment out if you want it to move from right to left
  imgW = imgW * -1; 
	var num = 0;

  function animate_img() {
  	if (num == 1) {
    	num = 0;
      $image.css("background-position-x", "0")
    }
    
    $image.animate({
        backgroundPositionX: imgW + 'px'
      }, 10000, "linear",
      function() {
        num = 1;
        animate_img();
      });
  }
  animate_img();
});

.bg {
  top: 0px;
  left: 0px;
  position: absolute;
}

#bg1 {
  background: url('https://www2.pic-upload.de/img/32898905/bg3.png') 0 0 repeat-x;
  background-size: 1000px;
  height: 100%;
  width: 100%;
}

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

图片展示位置CSS

1 个答案: