问题：点击button1实现图片向左移动后，点击button2无法触发图片向右移动。
（程序中的图片请随便用找图片代替！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#block1{
height:191px;
width: 912px;
border: 1px solid #000;
margin: 50px auto;
font-size: 0px;
overflow: hidden;
}
#block1 ul{
width: 2000px;
position: relative;
}
#block1 ul li{
display: inline-block;
}
</style>
</head>
<body>
<div id="block1">
<ul id="ul1">
<li><img src="xiaomuweb/xiaomupic/assets/Mask group1.png" alt=""></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group2.png" alt=""></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group3.png" alt=""></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group4.png" alt=""></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group5.png" alt=""></li>
<li><img src="xiaomuweb/xiaomupic/assets/Mask group6.png" alt=""></li>
</ul>
</div>
<input type="button" id="toL" value="ToLeft">
<input type="button" id="toR" value="ToRight">
<script>
var block1=document.getElementById('block1');
var ul1=document.getElementById('ul1');
ul1.innerHTML+=ul1.innerHTML;// 复制多一遍所有的li
var left=0;
var right=912;
var timer;
var bntL=document.getElementById('toL');
var bntR=document.getElementById('toR');
function moveL(){
clearInterval(timer);
timer=setInterval(function(){
left-=12;
if(left<=-912) left=0;
ul1.style.left=left+'px';
},25)
}//向左移动
function moveR(){
clearInterval(timer);
timer=setInterval(function(){
right-=12
if(right<=0) right=912;
ul1.style.right=right+'px';
},25)
}//向右移动
bntL.onclick=moveL;//触发向左移动的函数
bntR.onclick=moveR;//触发向右移动的函数
</script>
</body>
</html>
