<! 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 "/>
<title> Manual scrolling Picture </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= "Imgfocus-0.1.0.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$.imgfocus ({
ObjID: "Scrolldiv",
Showtitle:true,
height:210,
width:280,
speed:1000
});
});
</script>
<body>
<div id= "Container" >
<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>
/**
* Manual scrolling picture
*
**/
$.extend ({
Imgfocus:function (OPT, callback) {
Alert ("suc");
This.defaults = {
Scrolling Area ID
ObjID: "",
Whether to display the caption below the larger image
Showtitle:false,
width of each line
WIDTH:300,
The height of the div
HEIGHT:100,
Number of rows per scroll
Line:1,
Number of rows that are automatically scrolled
Autoline:1,
Action Time
speed:0,
Scrolling interval
interval:3000,
Picture root directory
Imgpath: "",
The interval handle, which does not need to be set, is used only as an identity
pictimer:0,
Button transparency
opacity:0.3
};
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"
});
Define an IMG style
$ ("#" + Opts.objid + "ul li Img:first"). CSS ({
"Display": "Block",
"Float": "Left",
"width": opts.width + "px",
"Height": opts.height + "px"
});
if (opts.showtitle) {
$ ("#" + Opts.objid). Append ("<div id=\" Imgfocus_banner\ "/>");
$ ("#imgfocus_banner"). CSS ({
"width": opts.width + "px",
"Height": "20px",
"Background": "#333",
"Position": "Absolute",
opacity:0.7,
"Text-align": "Center",
"Color": "#FFF",
"Left": "0px",
"Top": (opts.height-20) + "px"
});
$ ("#imgfocus_banner"). HTML ("<div id=\" imgfocus_banner_title\ "/>");
$ ("#imgfocus_banner_title"). Text ("text");
$ ("#imgfocus_banner_title"). CSS ({
"Display": "Block",
"Float": "Left",
"width": (OPTS.WIDTH-20 * $ ("#" + Opts.objid + "ul li"). Size () + "px",
"Height": "20px"
});
$ ("#" + Opts.objid + "ul Li"). each (function (index) {
$ (this). attr ("index", index);
$ ("#imgfocus_banner"). Append ("<div id=\" imgfocus_banner_squ "+ index +" \ "class=\" imgfocus_banner_squ\ ">" + ( Index + 1) + "</div>");
var bgcolor;
$ ("#imgfocus_banner_squ" + index). MouseOver (function () {
bgcolor = $ (this). CSS ("background");
$ (this). CSS ({
"Background": "#CC0"
});
}). MouseLeave (function () {
$ (this). CSS ({
"Background": bgcolor
});
});
Number Block Click event
$ ("#imgfocus_banner_squ" + index). Click (function () {
var length = $ ("#" + Opts.objid + "ul li[index=" + index + "]"). Prevall (). Size ();
var scrollwidth = 0-length * Opts.width-(0-$ ("#" + Opts.objid). Find ("Ul:first"). Replace ("px", "") );
$ ("#" + Opts.objid). Find ("Ul:first"). Animate ({
Marginleft:scrollwidth
},
6,
function () {
for (i = 1; I <= length; i++) {
$ ("#" + Opts.objid). Find ("Li:first"). Appendto ($ ("#" + Opts.objid). Find ("Ul:first");
}
$ ("#" + Opts.objid). Find ("Ul:first"). CSS ({
marginleft:0
});
var index = $ ("#" + Opts.objid). Find ("Li:first"). attr ("index");
The digital labels all turn gray
$ (". Imgfocus_banner_squ"). CSS ({
"Background": "#CCC"
});
The active digital label turns RED
$ ("#imgfocus_banner_squ" + index). css ({
"Background": "#C00"
});
bgcolor = "background: #C00";
Changetitle ();
});
});
});
Number Block Style
$ (". Imgfocus_banner_squ"). CSS ({
"Display": "Block",
"Float": "Left",
"Margin": "1px",
"width": "18px",
"Height": "18px",
"Color": "#000",
"Background": "#CCC"
});
First digit block style
$ (". Imgfocus_banner_squ:first"). CSS ({
"Background": "#C00"
});
}
/**
* Automatic Horizontal scrolling
*/
function ScrollLeft () {
var scrollwidth = 0-opts.autoline * Opts.width-(0-$ ("#" + Opts.objid). Find ("Ul:first"). CSS ("Margin-left"). Replace ("p X "," "));
$ ("#" + 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
});
var index = $ ("#" + Opts.objid). Find ("Li:first"). attr ("index");
Changetitle ();
The digital labels all turn gray
$ (". Imgfocus_banner_squ"). CSS ({
"Background": "#CCC"
});
The active digital label turns RED
$ ("#imgfocus_banner_squ" + index). css ({
"Background": "#C00"
});
});
};
/**
* Toggle Title
*/
function Changetitle () {
$ ("#imgfocus_banner_title"). Text ($ ("#" + Opts.objid). Find ("Li:first img:first"). attr ("alt");
}
/**
* 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 title
Changetitle ();
$ ("#" + Opts.objid). Hover (function () {
Clearinterval (Opts.pictimer);
},
function () {
Opts.pictimer = setinterval (function () {
ScrollLeft ();
},
Opts.interval); Auto playback interval, in units: milliseconds
}). Trigger ("MouseLeave");
}
});
