用scoll实现的轮播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
border:0;
}
img{
vertical-align:middle;
margin:0 3px;
}
#demo{
width:1200px;
margin:200px auto;
overflow:hidden;
border:5px solid #005aa0;
padding:8px;
}
table{
border-collapse:collapse;
}
td{
display: table-cell;
vertical-align: inherit;
}
</style>
</head>
<body>
<div id="demo">
<table>
<tr>
<td id="demo1">
<table>
<tr>
<td><img src="1.jpg"></td>
<td><img src="2.jpg"></td>
<td><img src="3.jpg"></td>
<td><img src="4.jpg"></td>
<td><img src="5.jpg"></td>
<td><img src="6.jpg"></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<script>
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth;
else{
demo.scrollLeft++;
}
console.log(demo1.offsetWidth,demo2.offsetWidth,demo.scrollLeft);
}
var MyMar=setInterval(Marquee,15);
demo.onmouseenter=function(){
clearInterval(MyMar);
}
demo.onmouseleave=function(){
MyMar=setInterval(Marquee,15);
}
</script>
</body>
</html>
复制上面的代码，随意加6张图片就能实现滚动
