JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無縫滾動(dòng)效果
更新時(shí)間：2017年03月16日 10:14:44 作者：Tomener
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無縫滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)簡(jiǎn)單精致的圖片左右無縫滾動(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的圖片無縫滾動(dòng)插件
- js代碼實(shí)現(xiàn)無縫滾動(dòng)(文字和圖片)
- javascript實(shí)現(xiàn)多張圖片左右無縫滾動(dòng)效果
- 可自定義速度的js圖片無縫滾動(dòng)示例分享
- 使用Javascript簡(jiǎn)單實(shí)現(xiàn)圖片無縫滾動(dòng)
- 原生JS實(shí)現(xiàn)圖片無縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)
- JS簡(jiǎn)單封裝的圖片無縫滾動(dòng)效果示例【測(cè)試可用】
- JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無縫滾動(dòng)功能詳解
相關(guān)文章
所謂閉包，值得是詞法表示包括不必要計(jì)算的變量的函數(shù)，也就是說，該函數(shù)可以使用函數(shù)外定義的變量。2010-08-08
這篇文章主要介紹了JavaScript 中的 this 工作原理,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可愛的氣泡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
我們知道JScript中對(duì)象的prototype屬性，是用來返回對(duì)象類型原型的引用的。2010-04-04
JS實(shí)現(xiàn)簡(jiǎn)單打字測(cè)試
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單打字測(cè)試，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
但是最近由于開發(fā)人手不夠,一個(gè)人開啟全棧,一邊寫接口一邊寫頁面,剛好項(xiàng)目中有一個(gè)需求,所以嘗試使用自定義組件開發(fā)這塊,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之常用的視圖組件的相關(guān)資料,需要的朋友可以參考下2022-11-11
單個(gè)的加號(hào)作為運(yùn)算符在 JavaScript 中有三種作用。2013-03-03
JavaScript+canvas實(shí)現(xiàn)七色板效果實(shí)例
這篇文章主要介紹了JavaScript+canvas實(shí)現(xiàn)七色板效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)繪制七色板效果的相關(guān)技巧,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)web留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS字符串與二進(jìn)制的相互轉(zhuǎn)化實(shí)例代碼詳解
這篇文章主要介紹了JS字符串與二進(jìn)制的相互轉(zhuǎn)化 ,在文中給大家提到了Js之字符串和字節(jié)碼之間的相互轉(zhuǎn)換，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06