Demo04.html
Copy codeThe Code is as follows: <! 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> manual image scrolling </title>
<Style type = "text/css">
Ul, li {margin: 0; padding: 0}
Img {border: 0px ;}
# Container {padding: 40px ;}
# ShowArea img {width: 700px ;}
A {text-decoration: none; border: 0px ;}
# ScrollDiv {border: # ccc 1px solid ;}
# ScrollDiv li {background: # A83 ;}
</Style>
<Script src = "../jquery-1.8.0.min.js" type = "text/javascript"> </script>
<Script src = "manualScroll-0.1.4.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$. ManualScroll ({
ObjId: "scrollDiv ",
ShowArea: "showArea ",
ShowTitle: true,
Height: 105,
Width: 140,
Line: 5,
Speed: 1000
});
});
</Script>
</Head>
<Body>
<Div id = "container">
<Div id = "showArea"> </div>
<Div id = "scrollDiv">
<Ul>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
</Div>
</Div>
</Body>
</Html>
ManualScroll-0.1.4.jsCopy codeThe Code is as follows :/**
* Manual image scrolling
*
**/
$. Extend ({
ManualScroll: function (opt, callback ){
// Alert ("suc ");
This. defaults = {
ObjId: "", // rolling area id
ShowArea: "", // Region id displayed in the larger image.
ShowWidth: 700, // large image width
ShowHeight: 525, // large Image Height
ShowTitle: false, // whether the title is displayed below the large image
Width: 300, // The width of each row
Height: 100, // div height
Line: 2, // The number of rows to be rolled each time
AutoLine: 1, // Number of automatically scrolling rows
Speed: 0, // action time
Interval: 3000, // scroll interval
ImgPath: "", // root directory of the image
DirectBtn: "img/direct_btn02.png", // point to image
PicTimer: 0, // interval handle, which is not required but used as the identifier
Opacity: 0.3 // button transparency
};
// Parameter initialization
Var opts = $. extend (this. defaults, opt );
// Define the outer element style
$ ("#" Export opts.objid).css ({
"Position": "relative ",
"Overflow": "hidden ",
"Width" :( opts. line * opts. width) + "px"
});
// Define ul Style
$ ("#" + Opts. objId + "ul" ).css ({
"Width": opts. width * $ ("#" + opts. objId + "ul"). find ("li"). size () + "px ",
"Height": opts. height + "px"
});
// Define the li style
$ ("#" + Opts. objId + "ul li" ).css ({
"Display": "block ",
"Float": "left ",
"Width": opts. width + "px ",
"Height": opts. height + "px"
});
// Add the scroll button to the left
$ ("#" + Opts. objId). append ("<div id = \" button_left \ "> </div> ");
// Define the position of the left button
$ ("# Button_left" detail .css ({
"Width": "40px ",
"Height": "40px ",
"Background": "url (" + opts. imgPath + opts. directBtn + ")",
"Background-position": "0px 0px ",
"Position": "absolute ",
"Left": "0px ",
"Top": (opts. height/2-20) + "px"
});
// Add the scroll button to the right
$ ("#" + Opts. objId). append ("<div id = \" button_right \ "> </div> ");
// Define the position of the right button
$ ("# Button_right" ).css ({
"Width": "40px ",
"Height": "40px ",
"Background": "url (" + opts. imgPath + opts. directBtn + ")",
"Background-position": "-40px 0px ",
"Position": "absolute ",
"Left" :( opts. line * opts. width-40) + "px ",
"Top": (opts. height/2-20) + "px"
});
// Add an action to the left button
$ ("# Button_left"). click (function (){
Var scrollWidth = 0-opts. line * opts. width-(0-$ ("#" + opts. objId ). find ("ul: first" ).css ("margin-left "). replace ("px ",""));
// Uninterrupted scrolling
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginLeft: scrollWidth
}, Opts. speed, function (){
For (I = 1; I <= opts. line; I ++ ){
$ ("#" + Opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first "));
}
$ ("#" + Opts. objId). find ("ul: first" ).css ({marginLeft: 0 });
ShowArea ();
});
});
// Add action to the right
$ ("# Button_right"). click (function (){
Var scrollWidth = (0-opts. line * opts. width + (0-$ ("#" + opts. objId ). find ("ul: first" ).css ("margin-left "). replace ("px ","")));
// Uninterrupted scrolling
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginLeft: scrollWidth
}, 0, function (){
For (I = 1; I <= opts. line; I ++ ){
$ ("#" + Opts. objId ). find ("li: last "). prependTo ($ ("#" + opts. objId ). find ("ul: first "));
}
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginLeft: 0
}, Opts. speed, function (){
$ ("#" + Opts. objId). find ("ul: first" ).css ({marginLeft: 0 });
ShowArea ();
});
});
});
/**
* Automatic horizontal scrolling
*/
Function scrollLeft (){
Var scrollWidth = 0-opts. autoLine * opts. width-(0-$ ("#" + opts. objId ). find ("ul: first" ).css ("margin-left "). replace ("px ",""));
$ ("#" + Opts. objId). find ("ul: first"). animate ({
MarginLeft: scrollWidth
}, Opts. speed, function (){
For (I = 1; I <= opts. autoLine; I ++ ){
$ ("#" + Opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first "));
}
$ ("#" + Opts. objId). find ("ul: first" ).css ({marginLeft: 0 });
ShowArea ();
});
};
/**
* The title is displayed below the big chart.
*/
If (opts. showTitle & $ ("#" + opts. showArea). size ()> 0 ){
$ ("#" Export opts.showarea#.css ({
"Width": opts. showWidth + "px ",
"Position": "relative ",
"Height": opts. showHeight + "px"
});
$ ("#" Export opts.showarea#.html (" ");
$ ("#" + Opts. showArea). append ("<div id = \" manualScroll_banner \ "> </div> ");
$ ("# ManualScroll_banner" ).css ({
"Width": opts. showWidth + "px ",
"Height": "20px ",
"Background": "#333 ",
"Position": "absolute ",
Opacity: 0.7,
"Text-align": "center ",
"Color": "# FFF ",
"Left": "0px ",
"Top" :( opts. showHeight-20) + "px"
});
}
/**
* Display a large image in a specified area
*/
Function showArea (){
If ($ ("#" + opts. showArea). size ()> 0 ){
// Display the location of the Master Chart
Var index = Math. floor (opts. line-1)/2 );
ShowIndexArea (index );
// Move the cursor over to display the large image
$ ("#" + Opts. objId + "ul li"). each (function (index ){
$ (This). mouseover (function (){
ShowIndexArea (index );
});
});
}
}
/**
* Display the large image of a specified Element
*/
Function showIndexArea (index ){
Var imgSrc = $ ("#" + opts. objId + "ul li: eq (" + index + ") img: first"). attr ("src ");
Var imgAlt = $ ("#" + opts. objId + "ul li: eq (" + index + ") img: first"). attr ("alt ");
// Fade the remaining Images
$ ("#" + Opts. objId + "ul li: lt (" + index + ")" ).css ({
Opacity: 0.5
});
$ ("#" + Opts. objId + "ul li: gt (" + index + ")" ).css ({
Opacity: 0.5
});
$ ("#" + Opts. objId + "ul li: eq (" + index + ")" ).css ({
Opacity: 1
});
// Display a large image
$ ("#" + Opts. showArea + "img: first"). attr ("src", imgSrc );
// Display the title
If (opts. showTitle ){
$ ("# ManualScroll_banner"). text (imgAlt );
}
}
/**
* Move the mouse over and show the button
*/
$ ("#" + Opts. objId). hover (function (){
$ ("# Button_left" detail .css ({
Opacity: 1
});
$ ("# Button_right" ).css ({
Opacity: 1
});
}, Function (){
$ ("# Button_left" detail .css ({
Opacity: opts. opacity
});
$ ("# Button_right" ).css ({
Opacity: opts. opacity
});
}). Trigger ("mouseleave ");
/**
* The first function to be executed
* When the mouse slides over the focus chart, automatic playback is stopped. When the mouse slides out, automatic playback starts.
*/
// Initialize the big image
ShowArea ();
$ ("#" + Opts. objId). hover (function (){
ClearInterval (opts. picTimer );
}, Function (){
Opts. picTimer = setInterval (function (){
ScrollLeft ();
}, Opts. interval); // automatic playback interval, in milliseconds
}). Trigger ("mouseleave ");
}
});