js圖片滾動效果時間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時停止
更新時間：2014年06月26日 17:20:01 投稿：whsnow
這篇文章主要介紹了js圖片滾動效果時間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時停止，需要的朋友可以參考下
<%@ 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>圖片滾動</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)文章
這篇文章主要為大家詳細(xì)介紹了Javascript如何利用canvas實現(xiàn)在兩點間繪制曲線和矩形,并且在矩形中繪制文字,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片(23)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之輪播幻燈片的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jsonp跨域獲取百度聯(lián)想詞的方法,結(jié)合實例形式分析了jsonp的原理及跨域獲取百度聯(lián)想詞的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家?guī)硪黄猨s獲取Html元素的實際寬度高度的方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
.net JS模擬Repeater控件的實現(xiàn)代碼
一個模板控件規(guī)定了它的模板語法和js api，這是一個repeater控件的JS實現(xiàn):2013-06-06
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下2024-01-01
下面小編就為大家?guī)硪黄鷍s實現(xiàn)ajax方法(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了webpack 5 聯(lián)邦模塊介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了javascript禁用Tab鍵的腳本實例，很實用，大家參考使用吧2013-11-11