DIV CSS 佈局教程網

以下是參數說明： 參數名稱 描述 delay 圖片切換速度，單位毫秒 maskOpacity 遮罩層透明度，1為不透明，0為全透明 numOpacity 數字按鈕透明度，1為不透明，0為全透明 maskBgColor 遮罩層背景色 textColor 標題字體顏色 numColor 數字按鈕字體顏色 numBgColor 數字按鈕背景色 alterColor 數字按鈕選中項字體顏色 alterBgColor 數字按鈕選中項背景顏色插件代碼及調用
- 插件名稱：ImageScroll
代碼如下:
(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":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>
<a href="http://www.poluoluo.com"><img src="images/2.jpg" alt="漂亮的風景圖片二" /></a>
<a href="http://www.codeplex.com"><img src="images/3.jpg" alt="漂亮的風景圖片三" /></a>
<a href="http://www.codeproject.com"><img src="images/4.jpg" alt="漂亮的風景圖片四" /></a>
<a href="http://sc.jb51.net"><img src="images/5.jpg" alt="漂亮的風景圖片五" /></a>
<a href="http://s.jb51.net"><img src="images/3.jpg" alt="漂亮的風景圖片六" /></a>
</div>
<script>
$("#scroll").ImageScroll();
</script>

- 運行結果

- 帶參數調用
代碼如下:
<script>
$("#scroll").ImageScroll({delay:500, maskBgColor:"#ff0000"});
</script>

- 運行結果

小結
　　只是個小插件，可定制性可能不是很好，大家隨便看看和修改好了，貌似IE8好像還有個小bug，一會修正了再上傳，大家有什麼bug發現，請回復告訴我，方便我及時修正，有代碼上的優化意見，也請告訴我，幫助我這個新人學習，=.=