1，要求
通过定时器使其出现滚动的效果
可以通过按键控制图片滚动的方向（设置两个按钮绑定点击事件）
当鼠标悬停时图片停止，鼠标离开时图片继续向前滚动（可以设置鼠标的悬停和离开事件）
参考如下
content.onmouseenter = function(){//设置鼠标悬停事件
key = "stop";
}
content.onmouseleave = function(){//设置鼠标离开事件
key = "run";
}图片可以持续滚动，不会出现空白（添加滚动图片）
2，参考代码（左右滚动）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#slide{
width:800px;
height: 100px;
margin: 0 auto;
margin-top: 100px;
border: 1px solid black;
overflow: hidden;
}
#content{
width: 999999px;
}
img{
width: 160px;
height: 100px;
float: left;
margin-right: 10px;
cursor: pointer;
}
#button{
width: 100px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="slide">
<div id="content">
<img src="../img/1.png"/>
<img src="../img/2.png"/>
<img src="../img/3.png"/>
<img src="../img/4.png"/>
<img src="../img/5.png"/>
<img src="../img/6.png"/>
<img src="../img/7.png"/>
<img src="../img/8.png"/>
<img src="../img/9.png"/>
</div>
</div>
<div id="button">
<button type="button" id="left">向左</button>
<button type="button" id="right">向右</button>
</div>
<script type="text/javascript">
var content = document.getElementById("content");
var left = document.getElementById("left");
var right = document.getElementById("right");
content.style.marginLeft = 0+"px";
content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;
var key = "run";
var dkey = "left";
left.onclick = function(){
dkey = "left";
}
right.onclick = function(){
dkey = "right";
}
content.onmouseenter = function(){
key = "stop";
}
content.onmouseleave = function(){
key = "run";
}
dd();
function dd(){
var num = parseFloat(content.style.marginLeft);
if(key == "run"){
if(dkey == "left"){
num-=0.5;
if(num<=-170*9){
num=0;
}
}else{
num+=0.5;
if(num>=0){
num=-170*9;
}
}
}
content.style.marginLeft = num+"px";
setTimeout("dd()",13);
}
</script>
</body>
</html>
3，结果参考示例
4，参考代码（上下滚动）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 设置盒子 */
#div{
height: 800px;
width: 100px;
border: 1px solid black;
margin: 0px auto;
overflow: hidden;
}
/* 设置内容即图片的容器*/
#content{
height: 999999px;
}
/* 设置图片的样式 */
img{
width: 100px;
height: 160px;
margin-top: 10px;
cursor: pointer;
}
/* 设置按钮样式*/
#button{
width: 100px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="div">
<div id="content">
<img src="../img/2ee18-231100-163232346010b0.jpg"/>
<img src="../img/1.png"/>
<img src="../img/2.png"/>
<img src="../img/3.png"/>
<img src="../img/4.png"/>
<img src="../img/5.png"/>
<img src="../img/6.png"/>
<img src="../img/7.png"/>
<img src="../img/8.png"/>
<img src="../img/9.png"/>
</div>
</div>
<div id="button">
<button type="button" id="top">向上</button>
<button type="button" id="buttom">向下</button>
</div>
<script>
var content = document.getElementById("content");//获取内容的id
var topSlide =document.getElementById("top");//获取向上按钮的id
var downSlide =document.getElementById("buttom");//获取向下按钮的id
content.innerHTML = content.innerHTML+content.innerHTML+content.innerHTML;//使内容乘于3倍
content.style.marginTop = 0 + "px";//设置外边距初始值
var key = "run";//设置初始是运行的
var dkey = "top";//设置初始是向右边的
topSlide.onclick = function(){
dkey = "top";
}
downSlide.onclick = function(){
dkey = "buttom";
}
content.onmouseenter = function(){//设置鼠标悬停事件
key = "stop";
}
content.onmouseleave = function(){//设置鼠标离开事件
key = "run";
}
slide();
function slide(){
var num = parseFloat(content.style.marginTop);
if(key == "run"){
if(dkey == "top"){
num-=0.5;
if(num<=-170*9){
num=0;
}
}else{
num+=0.5;
if(num>=0){
num=-170*9;
}
}
}
content.style.marginTop = num+"px";
setTimeout("slide()",13);//设置定时器使其运行
}
</script>
</body>
</html>效果同3
