淘寶店鋪的推廣中,如何讓你的圖片會說話?淘寶學堂和你來一起做淘寶滾動圖片的代碼。
<!------------------ 向左滾動代碼開始 -------------------------->
<div id=demo style="overflow:scroll;height:93;width:600;background:#214984;color:#ffffff" >
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=demo1 valign=top><img src="1-1.jpg" width="102" height="77" border="0" /><img src="2-1.jpg" width="102" height="77" border="0" /><img src="3-1.jpg" width="102" height="77"border="0" /><img src="4-1.jpg" width="102" height="77"border="0" /><img src="5-1.jpg" width="102" height="77"border="0" /><img src="6-1.jpg" width="102" height="77"border="0" /></td>
<td id=demo2 valign=top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=30 //速度(單位:毫秒,1秒=1000毫秒)
demo2.innerHTML=demo1.innerHTML //將第二個儲存格的空內容使用和第一格一樣的內容填充
function Marquee(){
if(demo1.offsetWidth-demo.scrollLeft<=0) //假如圖片走到第一個儲存格完
demo.scrollLeft-=demo2.offsetWidth // 這時候重新從第一格第一張圖片開始走動
else{ //否則
demo.scrollLeft++ // 滾動條一直向左滾動
}
}
var MyMar=setInterval(Marquee,speed) //以時間speed為間隔逐次調用滾動條函數
demo.onmouseover=function() {clearInterval(MyMar)} //鼠標放上的時候解除對滾動函數的調用
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//移開則重新調用滾動函數
</script>
<!------------------ 向右滾動代碼開始 -------------------------->
<div id=demoRight style="overflow:hidden;height:77;width:600;background:#000000;color:#ffffff;border:5px none #000000;">
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=demoRight1 valign=top><img src="1-1.jpg" width="102" height="77" border="0" /><img src="2-1.jpg" width="102" height="77" border="0" /><img src="3-1.jpg" width="102" height="77"border="0" /><img src="4-1.jpg" width="102" height="77"border="0" /><img src="5-1.jpg" width="102" height="77"border="0" /><img src="6-1.jpg" width="102" height="77"border="0" /><img src="7-1.jpg" width="102" height="77"border="0" /><img src="8-1.jpg" width="102" height="77" border="0" /></td>
<td id=demoRight2 valign=top></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed_Right=30
demoRight2.innerHTML=demoRight1.innerHTML
demoRight.scrollLeft = demoRight1.offsetWidth
function Marquee_Right(){
if(demoRight.scrollLeft<=0)
demoRight.scrollLeft+=demoRight1.offsetWidth
else{
demoRight.scrollLeft--
}
}
var MyMar_Right=setInterval(Marquee_Right,speed_Right)
demoRight.onmouseover=function(){clearInterval(MyMar_Right)}
demoRight.onmouseout=function() {MyMar_Right=setInterval(Marquee_Right,speed_Right)}
</script>
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 分享淘寶滾動圖片的代碼