之前看了很多百度搜索出的东西，十个有九个是不能实用的，个个讲的都不详细，今天详细给大家讲解下关于这个图片“跑马灯”滚动效果，源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
<style>
*{margin: ;padding: ;}
#div1{
position: relative;border: 1px solid gray;
width: %;
margin: 20px auto;
height: 500px;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: ;
}
#div1 a{
position: absolute;
z-index: ;
text-decoration: none;
top: %;
display: none;
}
#div1 ul li{
padding: 5px;
list-style: none;
width: 400px;
height: 500px;
float: left;
}
#div1 ul li img{
width: %;
height: %;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[];
var aLi = oUl.getElementsByTagName('li');
var aA = oDiv.getElementsByTagName('a');
var iSpeed = ;
var timer = null;
//计算ul的宽为所有li的宽的和;
oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;
oUl.style.width = aLi[].offsetWidth*aLi.length+'px';
function Slider(){
if (oUl.offsetLeft<-oUl.offsetWidth/) {
oUl.style.left = ;
}else if(oUl.offsetLeft>){
oUl.style.left =-oUl.offsetWidth/+'px';
}
oUl.style.left = oUl.offsetLeft-iSpeed+'px';
}
timer =setInterval(Slider,);
aA[].onclick = function(){
iSpeed = ;
}
aA[].onclick = function(){
iSpeed = -;
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer =setInterval(Slider,);
}
};
</script>
<div id="div1">
<ul>
<li><img src="../JPG/01.jpg"></li>
<li><img src="../JPG/02.jpg"></li>
<li><img src="../JPG/03.jpg"></li>
<li><img src="../JPG/04.jpg"></li>
</ul>
<a href="javascript:;" style="left:10px;"><</a>
<a href="javascript:;" style="right:10px;">></a>
</div>
</body>
</html>
标注：头部说明
1、头部；<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />这条可以在博客园搜索下，里面讲的很详细；
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">：这句话的意思是强制IE浏览器使用谷歌框架进行渲染，简单的说这跟浏览器的兼容性有关；
3、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>：这一条有兴趣的话可以到CSDN上查找相关说明，非常详细；
代码块详解一：怎样改变图片滚动的方向
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[];
var aLi = oUl.getElementsByTagName('li');
var aA = oDiv.getElementsByTagName('a');
var iSpeed = ;//正左负右（改为-1从左到右滚动、1为从右往左滚动）
代码块详解二：怎样修改图片滚动时间快慢
timer =setInterval(Slider,);
aA[].onclick = function(){
iSpeed = ; //控制速度的正负
}
aA[].onclick = function(){
iSpeed = -;
}
oDiv.onmouseover = function(){
clearInterval(timer);
}
oDiv.onmouseout = function(){
timer =setInterval(Slider,);
}
代码块详解三：哪里替换图片，图片是怎么来的
<li><img src="../JPG/01.jpg"></li>
<li><img src="../JPG/02.jpg"></li>
<li><img src="../JPG/03.jpg"></li>
<li><img src="../JPG/04.jpg"></li>
图片路径根据个人web中存放的图片路径进行修改，放多少都没问题；
代码块详解四：修改图片大小，控制图片的高宽，找到对应修改即可
*{margin: ;padding: ;}
#div1{
position: relative;border: 1px solid gray;
width: %;
margin: 20px auto;
height: 500px;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: ;
}
#div1 a{
position: absolute;
z-index: ;
text-decoration: none;
top: %;
display: none;
}
#div1 ul li{
padding: 5px;
list-style: none;
width: 400px;
height: 500px;
float: left;
}
#div1 ul li img{
width: %;
height: %;
}
