從來沒寫過插件，自己隨便寫的一個，可能不太規範，僅供參考
CSS：
@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, table, th, td, tr,a
{
margin: 0;
padding: 0;
}
.top { width:100%; height:60px; background-color:#FFF; }
.content { width:100%; height:600px; position:relative; overflow:hidden;}
.ban_z { width:100%; height:600px; overflow:hidden; position:relative; }
.ban_z li { width:100%; height:600px; float:left; text-align:center; line-height:600px; font-size:96px; list-style:none;}
.bg_01 { background:#8B3F5D; background-position:center; background-repeat:no-repeat; }
.bg_02 { background:#5F3E8D; background-position:center; background-repeat:no-repeat; }
.bg_03 { background:#43C6E2; background-position:center; background-repeat:no-repeat; }
.bg_04 { background:#BFB62B; background-position:center; background-repeat:no-repeat; }
.bg_05 { background:#4D7E2C; background-position:center; background-repeat:no-repeat; }
.prev { position: absolute; left: 100px; top: 50%; cursor: pointer; }
.next { position: absolute; right: 100px; top: 50%; cursor: pointer; }
HTML：
<body>
<!--top-->
<div class="top">
</div>
<!--banner-->
<div class="content">
<ul class="ban_z">
<li class="bg_01">1</li>
<li class="bg_02">2</li>
<li class="bg_03">3</li>
<li class="bg_04">4</li>
<li class="bg_05">5</li>
</ul>
<img src="image/arrow2.png" class="prev" alt="上一頁" />
<img src="image/arrow1.png" class="next" alt="下一頁" />
</div>
</body>
JS:
(function ($) {
$.fn.defaultOptions = {
"mode": "scroll",
"isAutomaticSwitching": true,
"intervalTime": 3000,
"animateSpeed": 400,
"prevClass": "prev",
"nextClass": "next"
};
$.fn.controlsMove = function (options) {
var opts = $.extend({}, $.fn.defaultOptions, options);
opts.intervalTime = opts.intervalTime || $.fn.defaultOptions.intervalTime; //爲空取默認值
opts.animateSpeed = opts.animateSpeed || $.fn.defaultOptions.animateSpeed;
opts.prevClass = opts.prevClass || $.fn.defaultOptions.prevClass;
opts.nextClass = opts.nextClass || $.fn.defaultOptions.nextClass;
_index = 0;
var _this = this;
var $ul = $(_this).find("ul:first"); //ul對象
var $li = $ul.find("li"); //li對象
var _li_count = $li.size(); //獲取li的數量
var $prev = $("." + opts.prevClass);
var $next = $("." + opts.nextClass);
var _setIntervalObj; //計時器對象
setWidth();
jQuery(window).resize(setWidth); //窗體大小改變 重新設置寬度和ul左偏移的座標
//設置箭頭的位置
setArrow();
_setIntervalObj = setInterval(Rotation, opts.intervalTime);
function setWidth() {
var _nav_width = $(_this).width(); //獲取顯示部分的寬度
$li.css({ "width": _nav_width }); //設置li寬度
_li_width = $li.outerWidth(true); //獲取li的最終寬度 包括margin、邊框等
$ul.css({ "width": _li_width * _li_count, "left": -(_li_width * _index) }); //重新計算並設置ul的寬度
}
//設置箭頭位置
function setArrow() {
var _arrowTop = ($li.height() - $prev.height()) / 2;
$prev.css({ "top": _arrowTop }).hide();
$next.css({ "top": _arrowTop }).hide();
}
//設置箭頭淡入淡出
$(this).hover(function () {
clearInterval(_setIntervalObj);
$prev.stop(false, true).fadeIn(300); $next.stop(false, true).fadeIn(300);
}, function () {
$prev.stop(false, true).fadeOut(300); $next.stop(false, true).fadeOut(300);
_setIntervalObj = setInterval(Rotation, opts.intervalTime);
});
//單擊箭頭切換
$prev.click(function () {
if (_index > 0 && _index <= _li_count && !$ul.is(":animated")) {
$ul.animate({ "left": $ul.position().left + _li_width }, opts.animateSpeed);
_index -= 1;
} else if (_index <= 0 && !$ul.is(":animated")) {
_index = _li_count - 1;
$ul.animate({ "left": -(_li_width * (_li_count - 1)) }, opts.animateSpeed);
}
});
$next.click(function () {
if (_index >= 0 && _index < _li_count - 1 && !$ul.is(":animated")) {
$ul.animate({ "left": $ul.position().left - _li_width }, opts.animateSpeed);
_index += 1;
} else if (_index == _li_count - 1 && !$ul.is(":animated")) {
_index = 0;
$ul.animate({ "left": 0 }, opts.animateSpeed);
}
});
//自動切換
function Rotation() {
if (opts.isAutomaticSwitching) {
$next.click()
}
}
};
})(jQuery);
調用：
$(document).ready(function () {
$(".content").controlsMove({
"mode": "scoll", //切換模式 scoll/fadeIn （暫時無效）
"isAutomaticSwitching": true, //是否自動切換
"intervalTime": 3000, //間隔時間
"animateSpeed": 600, //切換速度
"prevClass": "prev", //上一頁按鈕名稱
"nextClass": "next" //下一頁按鈕名稱
});
});
源碼下載地址：點擊打開鏈接
還有許多東西可以擴展的，比如顯示當前是第幾張、每次單擊切換的幾張圖片等等。
鄙人就只拋磚引玉下了