js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止

更新時(shí)間：2014年06月26日 17:20:01 投稿：whsnow

這篇文章主要介紹了js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止，需要的朋友可以參考下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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=gb2312" />
<title>圖片滾動(dòng)</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 1000px;
}

#demo img {
border: 10px solid #F2F2F2;
}

#indemo {
float: left;
width: 800%;
}

#demo1 {
float: left;
}

#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/小美景1.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景2.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景3.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女2.jpg" border="0" />
</a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=50;
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>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

Javascript利用canvas繪制兩點(diǎn)間曲線和箭頭
這篇文章主要為大家詳細(xì)介紹了Javascript如何利用canvas實(shí)現(xiàn)在兩點(diǎn)間繪制曲線和矩形,并且在矩形中繪制文字,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片(23)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jsonp跨域獲取百度聯(lián)想詞的方法分析
這篇文章主要介紹了jsonp跨域獲取百度聯(lián)想詞的方法,結(jié)合實(shí)例形式分析了jsonp的原理及跨域獲取百度聯(lián)想詞的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js獲取Html元素的實(shí)際寬度高度的方法
下面小編就為大家?guī)?lái)一篇js獲取Html元素的實(shí)際寬度高度的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
.net JS模擬Repeater控件的實(shí)現(xiàn)代碼
一個(gè)模板控件規(guī)定了它的模板語(yǔ)法和js api，這是一個(gè)repeater控件的JS實(shí)現(xiàn):
2013-06-06
JS中進(jìn)行字符串替換的方法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下
2024-01-01
原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
微信小程序?qū)崿F(xiàn)拖拽功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
webpack5 聯(lián)邦模塊介紹詳解
這篇文章主要介紹了webpack 5 聯(lián)邦模塊介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
javascript禁用Tab鍵腳本實(shí)例
這篇文章主要介紹了javascript禁用Tab鍵的腳本實(shí)例，很實(shí)用，大家參考使用吧
2013-11-11