JS左右無(wú)縫滾動(dòng)(一般方法+面向?qū)ο蠓椒ǎ?/h1>
更新時(shí)間:2012年08月17日 20:57:47 作者:
其實(shí)不管是一般方法還是面向?qū)ο蟮姆椒ǘ歼€有很多可以改進(jìn)的地方,有需要的先將就著用吧
復(fù)制代碼 代碼如下:
<!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=GBK" />
<title>JS左右無(wú)縫滾動(dòng)(一般方法+面向?qū)ο蠓椒ǎ?lt;/title>
<style type="text/css">
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
body{background:gray;}
#wrap{width:810px; height:160px;
border:1px solid black;
position:relative;
left:50%;
top:50%;
margin-left:-410px;
margin-top:200px;
background:#fff;
overflow:hidden;}
#wrap ul{margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;}
#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;}
#wrap ul li img{ border:1px black solid; padding:10px;}
</style>
<!--script type="text/javascript">
window.onload=function(){ //一般方法
var wrap=document.getElementById("wrap");
var wrap_ul=wrap.getElementsByTagName("ul")[0];
var wrap_li=wrap.getElementsByTagName("li");
wrap_ul.innerHTML+=wrap_ul.innerHTML;
wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px";
Autoscroll=setInterval(scroll,100);
function scroll(){
wrap_ul.style.left=wrap_ul.offsetLeft-3+"px"; //這里因?yàn)閕e對(duì)offsetLeft的解析不一樣,所以ie下必須減大于等于3的數(shù)
if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){
wrap_ul.style.left="0px";
}else if(wrap_ul.offsetLeft>=0){
wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px";
}
}
wrap.onmouseover=function(){
clearInterval(Autoscroll);
}
wrap.onmouseout=function(){
Autoscroll=setInterval(scroll,100);
}
}
</script-->
<script type="text/javascript">
function Slide(obj,direction,speed){ //面向?qū)ο蟮姆椒?,可以自由控制方向,speed=>3 ie下可以
this.container=document.getElementById(obj);
this.content=this.container.getElementsByTagName("ul")[0];
this.lis=this.content.getElementsByTagName("li");
this.content.innerHTML+=this.content.innerHTML;
this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px";
var that=this
if(direction=="left"){
this.speed=-speed
}else if(direction=="right"){
this.speed=speed
}
Slide.prototype.scroll=function(){
this.content.style.left=this.content.offsetLeft+this.speed+"px";
if(this.content.offsetLeft <= -this.content.offsetWidth/2){
this.content.style.left ="0px";
}else if(this.content.offsetLeft >=0){
this.content.style.left = -this.content.offsetWidth/2 + "px";
}
}
this.time=setInterval(function(){that.scroll()},100);
this.container.onmouseover=function(){
clearInterval(that.time);
}
this.container.onmouseout=function(){
that.time=setInterval(function(){that.scroll()},100);
}
}
</script>
<script type="text/javascript">
window.onload=function(){new Slide("wrap","left",5)}
</script>
</head>
<body>
<div id="wrap">
<ul class="clearfix">
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:- 原生JavaScript實(shí)現(xiàn)的無(wú)縫滾動(dòng)功能詳解
- JS圖片無(wú)縫、平滑滾動(dòng)代碼
- 徹底搞懂JS無(wú)縫滾動(dòng)代碼
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- js向上無(wú)縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- javascript實(shí)現(xiàn)的左右無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)可控制左右方向的無(wú)縫滾動(dòng)效果
- 鏈接圖片無(wú)縫(無(wú)間斷)向左平滑滾動(dòng)Js版代碼
- js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
相關(guān)文章
-
JS加載iFrame出現(xiàn)空白問(wèn)題的解決辦法
在使用IE6瀏覽器開(kāi)發(fā)過(guò)程中出現(xiàn)各種奇葩問(wèn)題,非常棘手,費(fèi)勁腦汁終于問(wèn)題解決。小編把解決辦法分享到腳本之家平臺(tái),需要的朋友可以參考下 2016-05-05
-
javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘
本文給大家分享的是javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘,主要是對(duì)自己前段時(shí)間學(xué)習(xí)html5的canvas的一次小檢驗(yàn),這里推薦給小伙伴們,有需要的可以參考下。 2015-03-03
-
javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2021-02-02
-
javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2015-08-08
-
如何讓一個(gè)層關(guān)閉之后,就算刷新頁(yè)面了也不顯示。除非關(guān)閉頁(yè)面再次打開(kāi)
這個(gè)功能,一般可用于廣告的顯示,當(dāng)關(guān)閉后,就不顯示,除非重新關(guān)閉打開(kāi),增加用戶體驗(yàn) 2008-09-09
最新評(píng)論
復(fù)制代碼 代碼如下:
<!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=GBK" />
<title>JS左右無(wú)縫滾動(dòng)(一般方法+面向?qū)ο蠓椒ǎ?lt;/title>
<style type="text/css">
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
body{background:gray;}
#wrap{width:810px; height:160px;
border:1px solid black;
position:relative;
left:50%;
top:50%;
margin-left:-410px;
margin-top:200px;
background:#fff;
overflow:hidden;}
#wrap ul{margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;}
#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;}
#wrap ul li img{ border:1px black solid; padding:10px;}
</style>
<!--script type="text/javascript">
window.onload=function(){ //一般方法
var wrap=document.getElementById("wrap");
var wrap_ul=wrap.getElementsByTagName("ul")[0];
var wrap_li=wrap.getElementsByTagName("li");
wrap_ul.innerHTML+=wrap_ul.innerHTML;
wrap_ul.style.width=(wrap_li[0].offsetWidth+20)*wrap_li.length+"px";
Autoscroll=setInterval(scroll,100);
function scroll(){
wrap_ul.style.left=wrap_ul.offsetLeft-3+"px"; //這里因?yàn)閕e對(duì)offsetLeft的解析不一樣,所以ie下必須減大于等于3的數(shù)
if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){
wrap_ul.style.left="0px";
}else if(wrap_ul.offsetLeft>=0){
wrap_ul.style.left=-wrap_ul.offsetWidth/2+"px";
}
}
wrap.onmouseover=function(){
clearInterval(Autoscroll);
}
wrap.onmouseout=function(){
Autoscroll=setInterval(scroll,100);
}
}
</script-->
<script type="text/javascript">
function Slide(obj,direction,speed){ //面向?qū)ο蟮姆椒?,可以自由控制方向,speed=>3 ie下可以
this.container=document.getElementById(obj);
this.content=this.container.getElementsByTagName("ul")[0];
this.lis=this.content.getElementsByTagName("li");
this.content.innerHTML+=this.content.innerHTML;
this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px";
var that=this
if(direction=="left"){
this.speed=-speed
}else if(direction=="right"){
this.speed=speed
}
Slide.prototype.scroll=function(){
this.content.style.left=this.content.offsetLeft+this.speed+"px";
if(this.content.offsetLeft <= -this.content.offsetWidth/2){
this.content.style.left ="0px";
}else if(this.content.offsetLeft >=0){
this.content.style.left = -this.content.offsetWidth/2 + "px";
}
}
this.time=setInterval(function(){that.scroll()},100);
this.container.onmouseover=function(){
clearInterval(that.time);
}
this.container.onmouseout=function(){
that.time=setInterval(function(){that.scroll()},100);
}
}
</script>
<script type="text/javascript">
window.onload=function(){new Slide("wrap","left",5)}
</script>
</head>
<body>
<div id="wrap">
<ul class="clearfix">
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
<li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
- 原生JavaScript實(shí)現(xiàn)的無(wú)縫滾動(dòng)功能詳解
- JS圖片無(wú)縫、平滑滾動(dòng)代碼
- 徹底搞懂JS無(wú)縫滾動(dòng)代碼
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- js向上無(wú)縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- javascript實(shí)現(xiàn)的左右無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)可控制左右方向的無(wú)縫滾動(dòng)效果
- 鏈接圖片無(wú)縫(無(wú)間斷)向左平滑滾動(dòng)Js版代碼
- js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
相關(guān)文章
JS加載iFrame出現(xiàn)空白問(wèn)題的解決辦法
在使用IE6瀏覽器開(kāi)發(fā)過(guò)程中出現(xiàn)各種奇葩問(wèn)題,非常棘手,費(fèi)勁腦汁終于問(wèn)題解決。小編把解決辦法分享到腳本之家平臺(tái),需要的朋友可以參考下2016-05-05javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘
本文給大家分享的是javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘,主要是對(duì)自己前段時(shí)間學(xué)習(xí)html5的canvas的一次小檢驗(yàn),這里推薦給小伙伴們,有需要的可以參考下。2015-03-03javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08如何讓一個(gè)層關(guān)閉之后,就算刷新頁(yè)面了也不顯示。除非關(guān)閉頁(yè)面再次打開(kāi)
這個(gè)功能,一般可用于廣告的顯示,當(dāng)關(guān)閉后,就不顯示,除非重新關(guān)閉打開(kāi),增加用戶體驗(yàn)2008-09-09