JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無(wú)縫滾動(dòng)效果
更新時(shí)間：2017年03月16日 10:14:44 作者：Tomener
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無(wú)縫滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無(wú)縫滾動(dòng)效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片滾動(dòng)</title>
</head>
<body>
<style type="text/css">
<!--
#picScroll {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 745px;}
#picScroll img {border: 3px solid #F2F2F2;}
#picSdiv {float: left;width: 800%;}
#picSdiv1 {float: left;}
#picSdiv2 {float: left;}
-->
</style>
<div id="picScroll">
<div id="picSdiv">
<div id="picSdiv1">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a1.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a2.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a3.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a4.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a5.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a6.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a7.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a8.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a9.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a10.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a11.jpg" border="0" width="185" height="240" /></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a12.jpg" border="0" width="185" height="240" /></a>
</div>
<div id="picSdiv2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var picS=document.getElementById("picScroll");
var picS1=document.getElementById("picSdiv1");
function Marquee(){
if(picS.scrollLeft >= picS1.offsetWidth)
picS.scrollLeft =0;
else{
picS.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
picS.onmouseover=function() {clearInterval(MyMar)};
picS.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- js代碼實(shí)現(xiàn)無(wú)縫滾動(dòng)(文字和圖片)
- javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果
- 可自定義速度的js圖片無(wú)縫滾動(dòng)示例分享
- 使用Javascript簡(jiǎn)單實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- 原生JS實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)
- JS簡(jiǎn)單封裝的圖片無(wú)縫滾動(dòng)效果示例【測(cè)試可用】
- JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)功能詳解
相關(guān)文章
js+CSS 圖片等比縮小并垂直居中實(shí)現(xiàn)代碼
本例子在在 ff 2.0/ ie6 / ie7 中測(cè)試通過(guò)。但在 opera 8.5 cn中沒(méi)有通過(guò)。希望大家測(cè)試。2008-12-12
JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點(diǎn)擊操作的方法
下面小編就為大家?guī)?lái)一篇JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點(diǎn)擊操作的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
js讀取被點(diǎn)擊次數(shù)的簡(jiǎn)單實(shí)例(從數(shù)據(jù)庫(kù)中讀取)
這篇文章主要介紹了js讀取被點(diǎn)擊次數(shù)的簡(jiǎn)單實(shí)例(從數(shù)據(jù)庫(kù)中讀取)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
DOM是Document Object Model文檔對(duì)象模型的縮寫；使用JavaScript操作DOM進(jìn)行DHTML開(kāi)發(fā)2011-12-12
layer實(shí)現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口的例子
今天小編就為大家分享一篇layer實(shí)現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了兩種方法在前端實(shí)現(xiàn)本地表格導(dǎo)出功能,分別是插件方式和本地直接導(dǎo)出,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
經(jīng)常使用其他腳本語(yǔ)言（ASP ASP.NET PHP等）獲取頁(yè)面的瀏覽來(lái)源，今天我們來(lái)研究下使用Javascript以及C#獲取頁(yè)面的referer。2014-11-11
這篇文章主要給大家介紹了關(guān)于typescript中正則表達(dá)式的常用使用方法,TypeScript是一種靜態(tài)類型的JavaScript超集,它提供了對(duì)正則表達(dá)式的全面支持,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互2006-10-10
純js實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06