jQuery 一个图片切换的插件

2020-05-19 07:42:10易采站长站整理

var _num = $(“<div/>”).attr(“style”,”opacity:”+options.numOpacity)
.css({“position”:”absolute”, “right”:”0px”, “bottom”:”0px”, “z-index”:”5″, “width”:_numColumn*22, “opacity”:options.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”:options.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);

– 调用代码

<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”><img src=”images/1.jpg” alt=”漂亮的风景图片一” /></a>