js实现网站首页图片滚动显示

162 阅读 0 评论 107 点赞

我是靠谱客的博主痴情冰棍，最近开发中收集的这篇文章主要介绍js实现网站首页图片滚动显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<asp:Repeater ID="Pro_List" runat="server"> 
<ItemTemplate> 
<a href="/Product/html/<%#Eval("id") %>/" title="<%#Eval("Title")%>"><img src='/<%#Eval("Pic") %>' width="130" height="97" /> 
<p><%#Eval("Title") %></p> 
</a> 
</ItemTemplate> 
</asp:Repeater> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script type="text/javascript"> 
var speed = 20; 
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> 