html5背景平滑移动,jq css3 实现全屏背景图片平滑移动~不间歇。

我自己写了两版，需求是 让后面的世界地图向左移动起来，一直循环下去。自己写的有bug。到一段时间就不移动了。

问一下大神是不是可以帮助我实现这个功能

html

css

/* reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0; padding:0;}

html{-webkit-text-size-adjust:none;}

body{font:12px/1.5 \5B8B\4F53, Arial, Helvetica, sans-serif; text-align:center;}

ol,ul{list-style:none;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

img{border:none; vertical-align:top}

i,em{font-style:normal;}

input,select,option,textarea{font-size:12px;}

a{text-decoration:none;} a:hover{text-decoration:underline;}

/*enter*/

body,html {

width:100%;

height:100%;

}

.main_content {

width:100%;

height:100%;

background: url("../pro_img/bac.png") 0px 0px no-repeat;

background-size:100% 100%;

overflow:hidden;

}

.maps {

position: absolute;

left: 0px;

top: 0px;

width:100%;

height:100%;

border:none;

transition: left 10s linear;

-moz-transition: left 10s linear;

-webkit-transition: left 10s linear;

-o-transition: left 10s linear;

}

.absolute {

position: absolute;

left: 0px;

top: 0px;

z-index: 1;

}

.relative {

position: relative;

left: 0px;

top: 0px;

z-index: 1;

}

.hidden {

display: none;

}

js`$(function(){

var windowW = document.body.clientWidth;

$(".map2").css("left",windowW);

var flag = false;

move();

var int = setInterval(function(){

move();

},10000);

function move(){

flag = !flag;

$(".map1").show();

$(".map2").show();

var left1 = parseInt($(".map1").css("left"));

var left2 = parseInt($(".map2").css("left"));

if(flag){

$(".map1").css("left",-windowW);

$(".map2").css("left",0);

} else {

$(".map1").css("left",0);

$(".map2").css("left",-windowW);

}

var int = setTimeout(function(){

clearTimeout(int);

int = null;

if(flag){

$(".map1").hide();

$(".map1").css("left",windowW);

} else {

$(".map2").hide();

$(".map2").css("left",windowW);

}

![clipboard.pn

I)