css样式
<style>
*{margin:0;padding:0;}
img{
width:300px;height:200px;
vertical-align:top;
float:left; //要加浮动！！！
}
#outer{
width:900px;height:200px; border:2px solid orange;
margin:50px auto; position:relative; overflow:hidden;
}
#inner{
width:900px; height:200px; position:absolute;left:0;top:0;
}
</style>
/* 内容 */
<body>
<div id="outer">
<div id="inner">
<img src = "image/1.jpg" alt=" ">
<img src = "image/2.jpg" alt=" ">
<img src = "image/3.jpg" alt=" ">
</div>
</div>
</body>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var imgs = inner.getElementsByTagName('img');
inner.innerHTML = inner.innerHTML + inner.innerHTML;
inner.style.width = inner.offsetWidth * 2 + "px";
var time1 = null , time2 = null;
function startMove( ){
clearInterval(time1);
time1 = setInterval(function() {
//每经过一张图片 关掉计时器
if(inner.offsetLeft % imgs[0].offsetWidth == 0){
clearInterval(time1);
//延迟多少时间后 重新调用函数 达到图片停留效果
time2 = setTimeout(function() {
startMove();
},500);
}
//当轮播一次后迅速返回再次轮播
if(inner.offsetLeft <= -inner.offsetWidth/2{
inner.style.left = 0;
}
inner.style.left = inner.offsetLeft - 1 + "px";
},20);
}
startMove();
outer.onmouseover = function(){
clearInterval(time1);
clearInterval(time2);
}
outer.onmouseout = function{
startMove();
}
可能放到编辑器上 格式会不对 需要修改。。
