jsスクロールピクチャソースコード

2096 ワード

<style>
#r_2 {width:500px; height:160px; overflow:hidden; padding-top:3px;display:inline; }
#r_2 a img {width:100px; height:160px; border:0px;padding-left:5px; padding-right:5px; }
#scroll_end {width:500px; height:160px; overflow:hidden; padding-top:3px;display:inline; }
#scroll_end a img {width:100px; height:160px; border:0px;padding-left:5px; padding-right:5px; }
#scroll_div{OVERFLOW: hidden;height:160px;WIDTH: 400px;white-space:nowrap;}
</style>

<div id="scroll_div">
	<div id="r_2">
		<img src="images/pro/3.jpg" />
		<img src="images/pro/6.jpg" />
		<img src="images/pro/7.jpg" />
		<img src="images/pro/8.jpg" />
		<img src="images/pro/21.jpg" />
		<img src="images/pro/22.jpg" />
		<img src="images/pro/23.jpg" />
		<img src="images/pro/24.jpg" />
		<img src="images/pro/25.jpg" />
		<img src="images/pro/h_15.jpg" />
		<img src="images/pro/h_2.jpg" />
		<img src="images/pro/h_8.jpg" />
		<img src="images/pro/h_7.jpg" />
	</div>
	<div id="scroll_end" style="display:inline;">
	</div>
</div>

<SCRIPT>
var speed=1
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
var r_2 = document.getElementById("r_2");
scroll_end.innerHTML=r_2.innerHTML
function Marquee(){
	if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
		scroll_div.scrollLeft-=r_2.offsetWidth
	else{
		scroll_div.scrollLeft++
	}
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>