一款非常美观的缩略图片向左滚动html源码

<style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 299px; } #demo img { border: 1px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } --> </style> <div align=center><div id="demo"> <div id="indemo"> <div id="demo1"> <a href="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg"><img src="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg" border="0" width="100" height="125" /></a> <a href="www.aouchina.com/...p?id=8" target="_blank"><img src="www.aouchina.com/files/article/image/0/8/8s.jpg" border="0" width="100" height="125"/></a><a href="www.aouchina.com/...id=300" target="_blank"><img src="www.aouchina.com/...0s.jpg" border="0" width="100" height="125"/></a><a href="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg"><img src="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg" border="0" width="100" height="125"/></a><a href="www.aouchina.com/...id=359" target="_blank"><img src="www.aouchina.com/...9s.jpg" border="0" width="100" height="125"/></a><a href="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg"><img src="www.aouchina.com/...8s.jpg" border="0" width="100" height="125"/></a><a href="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg"><img src="http://digg.chinaxy.org/attachments/3/da7a285a970a867a52ecaca1f8feaf8d.jpg" border="0" width="100" height="125"/></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=8; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script></div>
点击上面选择框全选代码
原代码来自互联网，本人做了一些修改使得比较完美的将效果呈现在手机端，自行参考我代码中定义的图片地址替换自己想替换的图片，有一定基础的还可以自行修改边框
-以下为代码演示