标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#demo img{vertical-align: top;}
#nav img{float: left;}
</style>
<script type="text/javascript">
$(function(){
//向上滚动
$("#demo2").html($("#demo1").html());
var a = 0;
function long_up(){
if(($("#demo1").height() - $("#demo").scrollTop()) <= 0){
a = 0;
$("#demo").scrollTop(0);
}else{
$("#demo").scrollTop(a++);
}
}
var vv = setInterval(long_up,10);
$("#demo").hover(function(){
clearInterval(vv);
},function(){
vv = setInterval(long_up,10);
});
//向左滚动
$("#nav1").width($("#nav1").children("img").width()*$("#nav1").children("img").length*2);
$("#nav1").html($("#nav1").html()+$("#nav1").html());
var b = 0;
function long_left(){
if($("#nav1").width()/2-$("#nav").scrollLeft() <= 0){
b = 0;
$(‘#nav‘).scrollLeft(0);
}else{
$("#nav").scrollLeft(b++);
}
}
var ww = setInterval(long_left,10);
$("#nav").hover(function(){
clearInterval(ww);
},function(){
ww = setInterval(long_left,10);
});
})
</script>
</head>
<body style="">
<div id="demo" style="overflow:hidden;height:139px;width:232px; background:#f4f4f4;color:#ffffff; margin: 0 auto; margin-top: 10px;">
<div id="demo1">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
<div id="demo2"></div>
</div>
<div id="nav" style="width:300px;overflow: hidden; height:139px; margin: 0 auto; margin-top: 50px;">
<div id="nav1" style="float: left;">
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
</div>
</div>
<script>
// var speed=50
// demo2.innerHTML=demo1.innerHTML
// function Marquee(){
// if(demo2.offsetTop-demo.scrollTop<=0)
// demo.scrollTop-=demo1.offsetHeight
// else{
// demo.scrollTop++
// }
// }
// var MyMar=setInterval(Marquee,speed)
// demo.onmouseover=function() {clearInterval(MyMar)}
// demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/zjblogs/p/4276355.html
