1、先准备要制作成滚动效果的图片.我这里共有5张图片
2、这里只是实现滚动效果巳呀屋饔,因此对画面效果没有太多讲究,所以CSS样式比较简单,以下是显示这次效果的样式,这里所有的代码都是放在一个文件里.<style type="text/艘早祓胂css"><!--ul,li,div{margin:0;padding:0; font-size:16px;list-style:none;text-align:center;}#test {width:678px; float:left; overflow:hidden;height:144px; border:none;}#intest {float: left;width: 800%;}#test1,#test2{height:144px;float:left; display:inline-table;}#test1 li,#test2 li{ width:127px;height:144px;float:left; padding-left:8px; }#test1 li img,#test2 li img{ display:block;background:#ccc; padding:1px; border:1px solid #ccc;}#test1 li span,#test2 li span{ width:127px; height:30px; line-height:30px; text-align:center;overflow:hidden;}#test1 {float: left;}#test2 {float: left;}.lmboxb ul {margin-left:12px;margin-top:5px;}.lmboxb ul li {}.lmboxb ul li a { line-height:24px;}}--></style>
3、以下是实现效果的文字与图片设置的基本html代码:<div id="test"><div id=&qu泠贾高框ot;intest"><div class="lmboxb" id="test1"><ul><li><div><a href="#"><img src="images/1.jpg" width="140" height="106" alt="奶皇包" /></a></div><div><a href="#">̻奶皇包</a></div></li><li><div><a href="#"><img src="images/2.jpg" width="140" height="106" alt="糯米鸡" /></a></div><div><a href="#">糯米鸡</a></div></li><li><div><a href="#"><img src="images/3.jpg" width="140" height="106" alt="凤爪" /></a></div><div><a href="#">凤爪</a></div></li><li><div><a href="#"><img src="images/4.jpg" width="140" height="106" alt="牛肉丸" /></a></div><div><a href="#">牛肉丸</a></div></li><li><div><a href="#"><img src="images/5.jpg" width="140" height="106" alt="叉烧包" /></a></div><div><a href="#">叉烧包</a></div></li></ul></div><div id="test2"></div></div></div><div style="width:100%;"></div>
4、接着是最重要部分javascript代码,就是这个代码让图片与文字滚动起来的.<script><!--var speed=20; //数字越大速度越慢var tab=document.getElementById("test");var tab1=document.getElementById("test1");var tab2=document.getElementById("test2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script>
5、以下是实现后的效果,虽然页面不华丽,重在实现效果.
