| (function ($) {
$.fn. Imagescroll = function (options) {
var defaults = {
delay:2000,
maskopacity:0.6,
numopacity:0.6,
Maskbgcolor: "#000",
TextColor: "#fff",
Numcolor: "#fff",
Numbgcolor: "#000",
Altercolor: "#fff",
Alterbgcolor: "#999"
};
options = $.extend (defaults, options);
var _this = $ (this). CSS ("display", "none");
var _links = [], _texts = [], _urls = [];
var _list = _this.find ("a");
var _timer;
var _index = 0;
_list.each (function (index) {
var temp = $ (this). Find ("Img:eq (0)");
_links.push ($ (this). attr ("href"));
_texts.push (Temp.attr ("alt"));
_urls.push (temp.attr ("src"));
});
if (_list.length <= 0) {
Return
}
else {
_this.html ("");
}
var _width = _this.width ();
var _height = _this.height ();
var _numcount = _list.length;
var _numcolumn = Math.ceil (_NUMCOUNT/2);
var _img = $ ("<a/>"). CSS ({"Display": "Block", "position": "Absolute", "top": "0px", "left": "0px", "Z-index": "2", " Width ": _width+" px "," height ": _height+" px "," Background ":" url ("+_urls[0]+") "}). Appendto (_this);
var _mask = $ ("<div/>"). attr ("style", "opacity:" +options.maskopacity)
. css ({"position": "Absolute", "left": "0px", "bottom": "0px", "Z-index": "3", "width": _width+ "px", "height": "46px", " Opacity ": options.maskopacity," Background-color ": Options.maskbgcolor}). Appendto (_this);
var _num = $ ("<div/>"). attr ("style", "opacity:" +options.numopacity)
. css ({"position": "Absolute", "right": "0px", "bottom": "0px", "Z-index": "5", "width": _numcolumn*22, "opacity": O ptions.numopacity, "height": "44px"}). Appendto (_this);
var _text = $ ("<div/>"). css ({"position": "Absolute", "left": "0px", "bottom": "0px", "Z-index": "4", "Padding-left" : "10px", "height": "44px", "Line-height": "44px", "Color": Options.textcolor}). html (_texts[0]). Appendto (_this);
for (var i = 0; i < _numcount; i++)
{
$ ("<a/>"). HTML (i+1)
. css ({"float": "Left", "width": "20px", "height": "20px", "Text-align": "Center", "Background-color": O Ptions.numbgcolor, "margin": "0px 2px 2px 0px", "cursor": "Pointer", "Line-height": "20px", "Color": Options.numcolor})
. MouseOver (function () {
if (_timer) {
Clearinterval (_timer);
}
}). mouseout (function () {
_timer = SetInterval (alter, options.delay);
). Click (function () {
Numclick ($ (this));
}). Appendto (_num);
}
var _templist = _num.find ("a");
function Alter () {
if (_index > _numcount-1) {
_index = 0;
}
_templist.eq (_index). Click ();
}
function Numclick (obj) {
var i = _templist.index (obj);
_templist.css ({"Background-color": Options.numbgcolor, "Color": Options.numcolor});
Obj.css ({"Background-color": Options.alterbgcolor, "Color": Options.altercolor});
_img.attr ({"href": _links[i], "target": "_blank"})
. css ({"opacity": "0", "Background": "url (" +_urls[i]+ ")"})
. Animate ({"Opacity": "1"}, 500);
_text.html (_texts[i]);
_index = i + 1;
}
SetTimeout (Alter, 10);
_timer = SetInterval (alter, options.delay);
_THIS.CSS ("Display", "block");
};
}) (JQuery); Calling code <script src= "Js/jquery-1.4.2.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery. Imagescroll.js "type=" Text/javascript "></script>
<style type= "Text/css" >
<!--
Body {
Font-family:verdana, Arial, Helvetica, Sans-serif;
font-size:12px;
}
#scroll {position:relative; width:450px; height:300px;}
-->
</style>
<div id= "Scroll" >
<a href= "http://www.baidu.com" ></a>
<a href= "http://www.111cn.net" ></a>
<a href= "http://www.codeplex.com" ></a>
<a href= "http://www.codeproject.com" ></a>
<a href= "http://sc.111cn.net" ></a>
<a href= "http://s.111cn.net" ></a>
</div>
<script>
$ ("#scroll"). Imagescroll ();
</script> |
