| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
<title> Picture Seamless Scrolling instance-javascript</title>
<style type= "Text/css" >
#ImgList, #ImgList1, #ImgList2 {/* The wide high value of the outside main frame must be defined by the user himself/
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) {
/************************************
Plug-in information:
Name:imgscroll
version:13.09.09
Author:lazy
E-mail:25565308@qq.com
Blog:http://www.111cn.net
Parameter description:
ID: The ID value required to scroll the window
Width: Window widths
Height: Window height
Dir: Picture scrolling direction, default to left scroll
Speed: Scrolling speed, the smaller the value the faster
Eventbingleft: Scroll button ID to the left
Eventbingright: Scroll button ID right Other Description: At present, this plugin only supports the right and left seamless scrolling because of the time reason, is also the author first attempts to encapsulate the plug-in,
If not normal reference to the plugin please QQ or e-mail notify the author, can also repair themselves
This plug-in code can be copied and published at will, but not for commercial use
Please keep this plugin information when reprint, thank you
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 ("Component initialization failed, the specified ID value does not exist!"); 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 ();//value validation completes initialization component
This. Element.imgscrollstatue=setinterval ("Startscroll ({id: '" + this.obj.id + "', dir: '" +this.obj.dir+ "})", This.obj.speed);/enable scrolling
This. Eventbind (this.obj.eventbingname,this.obj.id,this.obj.speed);//Binding Event
}
Imgscroll.prototype.eventbind=function (oid,id,speed) {
Event Bindings
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!= "") {//bind-oriented left sliding code
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!= "") {//bind-oriented left sliding code
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 () {
Class
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};
Add Button event property
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>
<body>
<div id= "LeftButton" class= "Imgbutton" ><< left-shift </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" > Right Shift >></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//variable must be global variable
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>
|
