实现效果：
1.鼠标放在图片上图片移动
2.鼠标离开图片，图片暂停
3.页面看起来不会跳转；
实现过程：
1.父盒子相对定位，子盒子绝对定位（'子绝父相'）
2.父盒子用于显示，子盒子放图片，父盒子之外的内容隐藏。
3.改变子盒子的定位来使盒子移动（使用计时器完成动画效果，达到均匀移动）
4.鼠标放在图片上时暂停，鼠标离开图片时移动，鼠标放在图片上有手的形状（cursor:pointer光标显示手的形状，cursor:crosshair光标显示为十字）。
实现细节：
显示十张图片，父盒子中最多显示六张，
重复添加几张（这里增加六张，此时增加的图片总宽度要大于父盒子的宽度）
当重复的图片开始显示，此时重置滚动，来达到无缝滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.screen{
width: 1200px;
height: 120px;
margin: 100px auto;/*居中显示*/
position: relative;/*父盒子相对定位*/
overflow: hidden;/*父盒子之外隐藏*/
}
.screen ul li img{
width: 200px;
height: 120px;
padding: 0 10px; /*图片之间设置间距，图片内边距为10px，两图片之间间距为20px*/
}
.screen ul li{
float: left;
}
.screen ul{
list-style: none;
width:400%;/*使父盒子增宽，让图片和一个盒子在同一平面上*/
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var timer;
var num = 0; //用来记ul的位置
timer = setInterval(marquee,10);
function marquee(){ //注意marquee标签不能做无缝轮播
num--;
if(num<-2200){
num = 0;
}
$('picture').style.left = num +'px';
}
$('picture').onmouseover = function(){
clearInterval(timer);
}
$('picture').onmouseout = function(){
timer = setInterval(marquee,10);
}
}
</script>
</head>
<body>
<div class="screen" id="scl">
<ul id="picture">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/8.jpg" alt=""></li>
<li><img src="img/9.jpg" alt=""></li>
<li><img src="img/10.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
