一个js轮播的例子
<html><head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 640px;
height: 200px;
margin: 100px auto;
background-color: #646464;
position: relative;
overflow: hidden;
}
.div1 ul{
position:absolute;
left:0;
top:0;
overflow: hidden;
background-color: #3b7796;
}
.div1 ul li{
float: left;
width: 170px;
height: auto;
list-style: none;
}
.div1 ul li img{
width:100%
}
</style>
</head>
<body>
<input id=0 type="button" value="向左">
<input id=1 type="button" value="向右">
<div id=9 class="div1">
<ul id=8>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895242&di=58ca6967583e8e56e0d73979462a166c&imgtype=0&src=http%3A%2F%2Fpic6.nipic.com%2F20100420%2F3017209_010600298768_2.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895241&di=0b507b9d5289d64827734090fcff4338&imgtype=0&src=http%3A%2F%2Fpic10.photophoto.cn%2F20090310%2F0036036851540683_b.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895240&di=0c8610361dee9e06e0183b4b64834419&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2015%2F215%2F26%2F99ZQY3O34346.jpg"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518356895238&di=6f5f04fe7cd1c5b85947d8a2ab32cd4b&imgtype=0&src=http%3A%2F%2Fpic16.photophoto.cn%2F20100910%2F0036036351061656_b.jpg"></li>
</ul>
</div>
</body>
<script>
$=function(a){return document.getElementById(a)};
window.onload = function(){
var 画轴 = $(8);
var 速度 = 2;//初始化速度
画轴.innerHTML += 画轴.innerHTML;//图片内容*2-----参考图（2）
var oLi= document.getElementsByTagName('li');
画轴.style.width = oLi.length*170+'px';//设置ul的宽度使图片可以放下
$(0).onclick=function(){速度 = -2;}
$(1).onclick=function(){速度 = 2;}
function move(){
if(画轴.offsetLeft<-(画轴.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
画轴.style.left = 0;
}
if(画轴.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
画轴.style.left = -(画轴.offsetWidth/2)+'px';
}
画轴.style.left = 画轴.offsetLeft + 速度 + 'px';
}
var timer = setInterval(move,30);//全局变量 ，保存返回的定时器
$(9).onmouseout=function(){timer = setInterval(move,30);}
$(9).onmousemove=function(){clearInterval(timer);}
}
</script>
</html>
