DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS面向對象方法:圖片不間斷向左滾動代碼
JS面向對象方法:圖片不間斷向左滾動代碼
編輯:關於JavaScript     

圖片無縫向左滾動的JAVASCRIPT代碼,本文是一個實例,poluoluo網友可以把圖片地址改為自己的圖片地址在本地浏覽測試。

<!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>圖片無縫向左滾動的JAVASCRIPT代碼- 網頁教學網poluoluo.com</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">

function Slide(obj,direction,speed){

this.container=document.getElementById(obj);

this.content=this.container.getElementsByTagName("ul")[0];

this.lis=this.content.getElementsByTagName("li");

this.imgs=this.content.getElementsByTagName("img");

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

}

this.time=setInterval(function(){

that.content.style.left=that.content.offsetLeft+that.speed+"px";

if(that.content.offsetLeft <= -that.content.offsetWidth/2){

that.content.style.left ="0px";

}else if(that.content.offsetLeft >=0){

that.content.style.left = -that.content.offsetWidth/2 + "px";

}

},30)

for(var i=0;i<this.imgs.length;i++){


that.imgs[i].onmouseover = function(){

clearInterval(that.time)

}

that.imgs[i].onmouseout=function(){

that.time=setInterval(function(){

that.content.style.left=that.content.offsetLeft+that.speed+"px";

if(that.content.offsetLeft <= -that.content.offsetWidth/2){

that.content.style.left ="0px";

}else if(that.content.offsetLeft >=0){

that.content.style.left = -that.content.offsetWidth/2 + "px";

}

},30)

}

}

}

</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="圖片地址" /></a></li>

<li><a href="#"><img src="圖片地址" /></a></li>

<li><a href="#"><img src="圖片地址" /></a></li>

<li><a href="#"><img src="圖片地址" /></a></li>

<li><a href="#"><img src="圖片地址" /></a></li>

</ul>

</div>

</body>

</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved