滚动图片代码css+div 图片滚动代码

css+div 图片滚动代码

css部分：--------------------------------

#r_2 {width:768px; height:130px; padding-left:3px; padding-right:5px; background-color:#FFFFFF; overflow:hidden; :3px;display:inline; } #scroll_div{OVERFLOW: hidden;height:133px;WIDTH: 658px;white-space: nowrap;}

滚动区域：------------------------------

<DIV id="scroll_div"> <div id="r_2"> <img src="images/pro/3.jpg" width="120" height="133" border="0"/> <img src="images/pro/6.jpg" width="120" height="133" border="0"/> <img src="images/pro/7.jpg" width="120" height="133" border="0"/> <img src="images/pro/8.jpg" width="120" height="133" border="0"/> <img src="images/pro/21.jpg" width="120" height="133" border="0"/> <img src="images/pro/22.jpg" width="120" height="133" border="0"/> <img src="images/pro/23.jpg" width="120" height="133" border="0"/> <img src="images/pro/24.jpg" width="120" height="133" border="0"/> <img src="images/pro/25.jpg" width="120" height="133" border="0"/> <img src="images/pro/h_15.jpg" width="120" height="133" border="0"/> <img src="images/pro/h_2.jpg" width="120" height="133" border="0"/> <img src="images/pro/h_8.jpg" width="120" height="133" border="0"/> <img src="images/pro/h_7.jpg" width="120" height="133" border="0"/> </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");

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>

WIDTH: 658px;宽度调整一下，在你的基础上增加些代码即可。