http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%B3%CC%D0%F2%D4%B1&in=4641&cl=2&cm=1&sc=0&lm=-1&pn=0&rn=1&di=773815124&ln=2000&fr=如上面连接的左侧功能。
上下各有按钮,点击的时候图片滚动一下。一下。
麻烦告诉下一如何实现,源码~万分感激~
一张张出来的图片。并不是走马灯的~
上下各有按钮,点击的时候图片滚动一下。一下。
麻烦告诉下一如何实现,源码~万分感激~
一张张出来的图片。并不是走马灯的~
<head>
<title>move</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul,ol {
margin:0;
padding:0;
}
td div{
width:150px;
height:170px;
border:solid 1px #060;
}
</style>
</head>
<body>
<div style="border:solid 1px #06c;height:200px;width:90%;overflow:hidden" id="inner">
<table onmouseover="right()" onmouseout="out()">
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
<td><div>c</div></td>
<td><div>d</div></td>
<td><div>e</div></td>
<td><div>f</div></td>
<td><div>g</div></td>
<td><div>h</div></td>
<td><div>i</div></td>
<td><div>j</div></td>
<td><div>k</div></td>
<td><div>l</div></td>
<td><div>m</div></td>
<td><div>n</div></td>
<td><div>o</div></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript"> var d=document.getElementById("inner");
var left=function(obj) {
//alert(d.scrollLeft);
d.scrollLeft-=156;
leftrun()
}
var e=0;
var lefttm;
var righttm;
var right=function(obj) {
// d.scrollLeft+=156;
e=d.scrollLeft+d.style.width
rightrun()
}var rightrun = function(){
clearTimeout(lefttm);
if(d.scrollLeft>=e){d.scrollLeft=e;return;}
d.scrollLeft+=2;
righttm=setTimeout(rightrun,10);
}
var leftrun = function(){
clearTimeout(righttm);
if(d.scrollLeft<=0){d.scrollLeft=0;return;}
d.scrollLeft-=2;
lefttm=setTimeout(leftrun,10);
}
function out(){
if(lefttm) clearTimeout(lefttm);
if(righttm) clearTimeout(righttm);
}
</script>
</html>