|
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>图片左右无缝滚动实例-JavaScript</title>
<style type="text/css">
#ImgList,#ImgList1,#ImgList2{/* 外面主框架的 宽 高值必须用户自己已定义 */
width:400px;
height:80px;
overflow:hidden;
margin-bottom:10px;
}
.ImgWH{
float:left;
width:80px;
height:80px;
text-align:center;
color:#F00;
font-weight:800;
line-height:80px;
}
.ImgButton{
float:left;
width:70px;
height:80px;
line-height:80px;
text-align:center;
cursor:pointer;
}
.ImgButton:hover{background:#e2e2e2;}
.Img1{background-color:#CCC;}
.Img2{background-color:#afafaf;}
.Img3{background-color:#a1a1a1;}
.Img4{background-color:#8c8c8c;}
.Img5{background-color:#787878;}
.Img6{background-color:#616161;}
.Img7{background-color:#4d4d4d;}
.Img8{background-color:#3e3e3e;}
</style>
<script type="text/javascript">
function ImgScroll(obj){
/************************************
插件信息:
Name : ImgScroll
Version : 13.09.09
Author : Lazy
E-mail : 25565308@qq.com
Blog : http://www.111cn.net
参数说明:
id: 需要滚动窗口的 ID 值
width: 窗口 宽度
height: 窗口 高度
dir: 图片滚动方向,默认向左滚动
speed: 滚动速度,值越小越快
EventBingLeft: 向左滚动按钮ID
EventBingRight: 向右滚动按钮ID
其它说明:
目前本插件由于时间原因只支持左右无缝滚动,也是作者第一次尝试封装插件,
如不能正常引用该插件 请QQ或者E-mail 通知作者,也可自行修复
本插件代码可以随意复制发布,但切勿用于商业用途
转载时请保留本插件信息,谢谢
From:Lazy
************************************/
this.prototype=obj;
this.obj={id:null,width:null,height:null,dir:"left",speed:30,EventBingLeft:null,EventBingRight:null};
this.extend(this.obj,obj);
try{this.Element=ImgGet(this.obj.id);}catch(err){}
if(this.obj.id==null|| !this.Element){alert("组件初始化失败,指定的ID值不存在!");return};
if(this.obj.width==null){this.obj.width=this.Element.offsetWidth;}
if(this.obj.height==null){this.obj.height=this.Element.offsetHeight;}
this.Initialization();//值 验证完成 初始化组件
this.Element.ImgScrollStatue=setInterval("StartScroll({id:'"+ this.obj.id +"',dir:'"+this.obj.dir+"'})",this.obj.speed);//启用滚动
this.EventBind(this.obj.EventBingName,this.obj.id,this.obj.speed);//绑定事件
}
ImgScroll.prototype.EventBind=function(oId,id,speed){
// 事件绑定
// if(oId==null){return}
this.Element.onmouseover=function(){
clearInterval(this.ImgScrollStatue);}// end onmouseover
this.Element.onmouseout=function(){
var o=this.ImgScrollProperty;
this.ImgScrollStatue=setInterval("StartScroll({id:'"+o.id+"',dir:'"+o.dir+"'})",o.speed);
}//end onmouseout
if(this.obj.EventBingLeft!=null && this.obj.EventBingLeft!=""){//绑定向左滑动代码
var Button=ImgGet(this.obj.EventBingLeft)
if(Button){
Button.onmouseover=function(){ ImgInterval(this);}//end Button.onmouseover
Button.onmousedown=function(){ ImgInterval(this);}//enf Button.onmousedown
Button.onmouseout=function(){ImgInterval(this);}//end Button.onmouseout
Button.onclick=function(){ImgInterval(this);}//end Button.onclick
}
}// end if
if(this.obj.EventBingRight!=null && this.obj.EventBingRight!=""){//绑定向左滑动代码
var Button=ImgGet(this.obj.EventBingRight)
if(Button){
Button.onmouseover=function(){ ImgInterval(this);}//end Button.onmouseover
Button.onmousedown=function(){ ImgInterval(this);}//enf Button.onmousedown
Button.onmouseout=function(){ImgInterval(this);}//end Button.onmouseout
Button.onclick=function(){ImgInterval(this);}//end Button.onclick
}
}// end if
}
ImgScroll.prototype.Initialization=function(){
// 初始化
var oDiv=document.createElement("div"),
oDiv1=document.createElement("div"),
oDiv2=document.createElement("div"),
oText=this.Element.innerHTML,
oDir=this.obj.dir=="left"||this.obj.dir=="right"?"float:left;":"clear:both;";
this.Element.innerHTML="";
oDiv.style.cssText="width:8000px;height:"+ this.obj.height +";margin:0;padding:0;";
oDiv1.style.cssText=oDir;oDiv2.style.cssText=oDir;
oDiv.appendChild(oDiv1);oDiv.appendChild(oDiv2);
oDiv1.innerHTML=oText;oDiv2.innerHTML=oText;
this.Element.appendChild(oDiv);
this.Element.ImgScrollProperty={id:this.obj.id,speed:this.obj.speed,dir:this.obj.dir};
//添加按钮事件属性
if(this.obj.EventBingLeft!=null && this.obj.EventBingLeft!=""){
ImgGet(this.obj.EventBingLeft).ImgScrollProperty={
id:this.obj.id,speed:this.obj.speed,dir:this.obj.dir=="left"||this.obj.dir=="right"?"left":"top"};}
if(this.obj.EventBingRight!=null && this.obj.EventBingRight!=""){
ImgGet(this.obj.EventBingRight).ImgScrollProperty={
id:this.obj.id,speed:this.obj.speed,dir:this.obj.dir=="left"||this.obj.dir=="right"?"right":"down"};}
}
ImgScroll.prototype.extend=function(oo,ot){
if(typeof(oo)!="object" || typeof(ot)!="object"){return}
for(var p in oo){
if(oo.hasOwnProperty(p) && ot.hasOwnProperty(p)){
oo[p]=ot[p];}
}
}
function StartScroll(oElement){
var oMain=ImgGet(oElement.id),oDiv;
if(oElement.dir=="left"||oElement.dir=="right"){
oDiv=oMain.getElementsByTagName("div")[0].getElementsByTagName("div")[0];}
else{oDiv=oMain.getElementsByTagName("div")[0];}
switch(oElement.dir){
case "right":
if(oMain.scrollLeft<=1){
oMain.scrollLeft=oDiv.offsetWidth}else{
oMain.scrollLeft--;}
break;//end right
default:
if(oMain.scrollLeft-oDiv.offsetWidth>=0){
oMain.scrollLeft=0;}else{
oMain.scrollLeft++;}//end defalut
}//end switch
}
function ImgInterval(oObj){
if(typeof oObj!="object"){return;}
var oId,oDir,oSpeed ,
e=event.type||window.event.type,
o=oObj.ImgScrollProperty,obj=ImgGet(o.id);
clearInterval(obj.ImgScrollStatue);
oId=o.id;oDir=o.dir;oSpeed=o.speed;
switch(e){
case "click":
oSpeed=oSpeed/2;
break;
case"mouseout":
oDir=obj.ImgScrollProperty.dir;
break;
case"mousedown":
oSpeed=oSpeed/4;
}
obj.ImgScrollStatue=setInterval("StartScroll({id:'"+oId+"',dir:'"+oDir+"'})",oSpeed)
}
function ImgGet(ObjId){
return document.getElementById(ObjId);}
</script>
</head>
<body>
<div id="leftbutton" class="ImgButton"><<左移</div>
<div id="ImgList" style="float:left;">
<div class="ImgWH Img1">Img 1</div>
<div class="ImgWH Img2">Img 2</div>
<div class="ImgWH Img3">Img 3</div>
<div class="ImgWH Img4">Img 4</div>
<div class="ImgWH Img5">Img 5</div>
<div class="ImgWH Img6">Img 6</div>
<div class="ImgWH Img7">Img 7</div>
<div class="ImgWH Img8">Img 8</div>
</div>
<div id="rightbutton" class="ImgButton">右移>></div>
<div id="ImgList1" style="clear:both;">
<div class="ImgWH Img1">Img 1</div>
<div class="ImgWH Img2">Img 2</div>
<div class="ImgWH Img3">Img 3</div>
<div class="ImgWH Img4">Img 4</div>
<div class="ImgWH Img5">Img 5</div>
<div class="ImgWH Img6">Img 6</div>
<div class="ImgWH Img7">Img 7</div>
<div class="ImgWH Img8">Img 8</div>
</div>
<div id="ImgList2">
<div class="ImgWH Img1">Img 1</div>
<div class="ImgWH Img2">Img 2</div>
<div class="ImgWH Img3">Img 3</div>
<div class="ImgWH Img4">Img 4</div>
<div class="ImgWH Img5">Img 5</div>
<div class="ImgWH Img6">Img 6</div>
<div class="ImgWH Img7">Img 7</div>
<div class="ImgWH Img8">Img 8</div>
</div>
<div id="Imgval"></div>
<script type="text/javascript">
var ImgListScroll,Img,Img2//变理必须 全局变量
window.onload=function(){
ImgListScroll=new ImgScroll({
id:"ImgList",
EventBingLeft:"leftbutton",
EventBingRight:"rightbutton"});
Img=new ImgScroll({
id:"ImgList1",
dir:"right",
speed:20});
Img2=new ImgScroll({
id:"ImgList2",
speed:10});
}
</script>
</body>
</html>
|
