快捷導(dǎo)航

js實(shí)現(xiàn)網(wǎng)站首頁(yè)圖片滾動(dòng)顯示

更新時(shí)間：2013年02月04日 09:35:32 作者：

網(wǎng)站首頁(yè)圖片滾動(dòng)顯示對(duì)于很多朋友都有很大的吸引,因?yàn)樗梢詭?lái)意想不到視覺(jué)沖擊效果，接下來(lái)本文也實(shí)現(xiàn)一下，感興趣的朋友可以參考下，或許對(duì)你學(xué)習(xí)js知識(shí)有所幫助

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章:

相關(guān)文章

HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹(shù)
這篇文章介紹了HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
js中浮點(diǎn)型運(yùn)算BUG的解決方法說(shuō)明
本篇文章主要是對(duì)js中浮點(diǎn)型運(yùn)算BUG的解決方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
HTML+CSS+JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的井字游戲
使用javascript創(chuàng)建游戲是最有趣的學(xué)習(xí)方式。它會(huì)讓你保持動(dòng)力，這對(duì)于學(xué)習(xí)?Web?開(kāi)發(fā)等復(fù)雜技能至關(guān)重要。本文將使用HTML、CSS和?Javascript創(chuàng)建一個(gè)井字游戲。感興趣的童鞋可以關(guān)注一下
2021-11-11
微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下
2019-01-01
webpack配置sass模塊的加載的方法
本篇文章主要介紹了webpack加載sass配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
H5移動(dòng)端適配 Flexible方案
這篇文章主要為大家詳細(xì)介紹了H5移動(dòng)端適配，F(xiàn)lexible方案,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript中setInterval()和setTimeout()的用法及區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()和setTimeout()用法及區(qū)別的相關(guān)資料,Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來(lái)處理延時(shí)和定時(shí)任務(wù),需要的朋友可以參考下
2023-11-11
javascript中Function類型詳解
這篇文章主要介紹了javascript中Function類型詳解的相關(guān)資料,需要的朋友可以參考下
2015-04-04
js canvas實(shí)現(xiàn)隨機(jī)粒子特效
這篇文章主要為大家詳細(xì)介紹了js canvas隨機(jī)粒子特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
Javascript的嚴(yán)格模式strict mode詳細(xì)介紹
這篇文章主要介紹了Javascript的嚴(yán)格模式strict mode詳細(xì)介紹,重點(diǎn)介紹了嚴(yán)格模式的使用方法及使用strict mode后對(duì)javascript語(yǔ)法上帶來(lái)的改變,需要的朋友可以參考下
2014-06-06