/**
* Manual scrolling picture
*
**/
$.extend ({
Manualscroll:function (Opt,callback) {
Alert ("suc");
This.defaults = {
ObjID: "",//scrolling area ID
Showarea: "",//large image display area ID, not shown if not
showwidth:700,//Large image width
showheight:525,//Big picture height
Showtitle:false,//whether the caption appears below the larger image
width:300,//width of each line
height:100,//div height
Line:2,//number of rows per scroll
Autoline:1,//automatic scrolling number of lines
speed:0,//action time
interval:3000,//scrolling interval
Imgpath: "",//Picture root
DIRECTBTN: "Img/direct_btn02.png",//point to Picture
pictimer:0,//interval handle, no need to set, just use as identity
opacity:0.3//Button transparency
};
Parameter initialization
var opts = $.extend (this.defaults,opt);
Define the outer element style
$ ("#" +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 LI Style
$ ("#" +opts.objid + "ul li"). CSS ({
"Display": "Block",
"Float": "Left",
"width": opts.width + "px",
"Height": opts.height + "px"
});
Add left scroll button
$ ("#" +opts.objid). Append ("<div id=\" button_left\ "></div>");
Define the position of the left button
$ ("#button_left"). CSS ({
"width": "40px",
"Height": "40px",
"Background": "url (" + Opts.imgpath + opts.directbtn + ")",
"Background-position": "0px 0px",
"Position": "Absolute",
"Left": "0px",
"Top":(OPTS.HEIGHT/2 + "px"
});
Add right Scroll button
$ ("#" +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 + "px"
});
Add action to left button
$ ("#button_left"). Click (function () {
var scrollwidth = 0-opts.line * Opts.width-(0-$ ("#" +opts.objid). Find ("Ul:first"). ("Margin-left"). Replace ("px", "" " ));
Non-interrupted 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 right button
$ ("#button_right"). Click (function () {
var scrollwidth = (0-opts.line*opts.width + (0-$ ("#" +opts.objid). Find ("Ul:first"). CSS ("Margin-left"). Replace ("px", " ")));
Non-interrupted 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"). ("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 ();
});
};
/**
* Display the caption below the larger picture
*/
if (Opts.showtitle && $ ("#" +opts.showarea). Size () > 0) {
$ ("#" +opts.showarea). CSS ({
"width": opts.showwidth + "px",
"Position": "Relative",
"Height": opts.showheight + "px"
});
$ ("#" +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 large image in specified area
*/
function Showarea () {
if ($ ("#" +opts.showarea). Size () > 0) {
Show the location of the main diagram
var index = Math.floor ((opts.line-1)/2);
Showindexarea (index);
The big picture after the mouse is drawn
$ ("#" +opts.objid + "ul Li"). each (function (index) {
$ (this). MouseOver (function () {
Showindexarea (index);
});
});
}
}
/**
* Display a larger image of the 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 display of remaining pictures
$ ("#" +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
});
Show large image
$ ("#" +opts.showarea + "Img:first"). attr ("src", imgsrc);
Show title
if (opts.showtitle) {
$ ("#manualScroll_banner"). Text (Imgalt);
}
}
/**
* Mouse slide up and then show button
*/
$ ("#" +opts.objid). Hover (function () {
$ ("#button_left"). CSS ({
Opacity:1
});
$ ("#button_right"). CSS ({
Opacity:1
});
},function () {
$ ("#button_left"). CSS ({
Opacity:opts.opacity
});
$ ("#button_right"). CSS ({
Opacity:opts.opacity
});
}). Trigger ("MouseLeave");
/**
* First function to execute
* Stop AutoPlay when the mouse hovers over the focus chart, and start playing automatically when you slide out
*/
Initialize large image
Showarea ();
$ ("#" +opts.objid). Hover (function () {
Clearinterval (Opts.pictimer);
},function () {
Opts.pictimer = setinterval (function () {
ScrollLeft ();
},opts.interval); Auto playback interval, in units: milliseconds
}). Trigger ("MouseLeave");
}
});
