<!DOCTYPE html>
<html><head>
<title>圖片滾動</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
#demo {
background: #FFF;
overflow:scroll;
width: 1500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
margin: 10px;
float: left;
width: 330%;
height: 200%;;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
</style>
<body>
<div id="bd">
<div id="demo" οnmοusemοve="ynL(event)">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
<a href="#"><img src="images/5.jpg"></a>
<a href="#"><img src="images/6.jpg"></a>
</div>
<div id="demo2">
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
<a href="#"><img src="images/5.jpg"></a>
<a href="#"><img src="images/6.jpg"></a>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function $e(id){
return document.getElementById(id);
}
var tab = $e('demo');
var tab1 = $e('demo1');
var tab2 = $e('demo2');
tab2.innerHTML = tab1.innerHTML;
var yn = 0;
var wd = document.documentElement.clientWidth;
function Marquee(){
if(x>wd/2){
if(tab.scrollLeft-tab2.offsetWidth<=-1500){
tab.scrollLeft +=tab1.offsetWidth;
}
else{
tab.scrollLeft--;
}
}else{
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
}
var MyMar = setInterval("Marquee()",1);
var x;
var y;
function ynL(event){
x = event.clientX;
y = event.clientY;
document.title =x+"--"+y;
}
</script>
</html>