<! 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> seamless image scroll instance-JavaScript </title>
<Style type = "text/css">
# ImgList, # ImgList1, # ImgList2 {/* the width and height of the external main framework must be defined by the user */
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: # afaf ;}
. 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.bKjia. c0m
Parameter description:
Id: ID value of the window to be rolled
Width: The window width.
Height: window height
Dir: Specifies the image scroll direction. By default, the image scroll to the left.
Speed: the scrolling speed. The smaller the value, the faster it is.
EventBingLeft: ID of the scroll button to the left
EventBingRight: ID of the scroll button to the right Other Instructions: Currently, this plug-in only supports seamless scrolling between the left and right due to time reasons. This is also the first time that the author tries to encapsulate the plug-in,
If the plug-in cannot be normally referenced, please notify the author via QQ or email, or you can fix it yourself
This plug-in code can be copied and released at will, but cannot be used for commercial purposes.
Please keep this plug-in information when reprinting. 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 verification completes Initialization component
This. element. imgScrollStatue = setInterval ("StartScroll ({id: '" + this. obj. id + "', dir:'" + this. obj. dir + "'})", this. obj. speed); // enables scrolling.
This. EventBind (this. obj. EventBingName, this. obj. id, this. obj. speed); // bind the event
}
ImgScroll. prototype. EventBind = function (oId, id, speed ){
// Event binding
// 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 the sliding code to the left
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 the sliding code to the left
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 (){
// Initialization
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.css Text = "width: 8000px; height:" + this. obj. height + "; margin: 0; padding: 0 ;";
Odiv1.style.csstext?odir=odiv2.style.css Text = 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 attributes
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"> & lt; move left </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 & gt; </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 // The global variable must be modified.
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> |
