写的比较简单，样式没有直接封装在脚本里面，那样会显得比较累赘。

简单的界面和样式 ：

Document

.fade_slider{width: 400px;height: 200px;position: relative;overflow: hidden;}

.fade_slider .slider,.fade_slider .slider img{width: 100%;height: 100%;}

.fade_slider .bar{position: absolute;height:20px;width: 100%;bottom: 10px;text-align:center;}

.fade_slider .bar a{width: 15px;height: 15px;display: inline-block;background: #fff;border-radius: 100%;cursor: pointer;margin:0 3px;}

.fade_slider .bar a.active{background:#f00;}

.arrow{position: absolute;font-size: 40px;width:40px;height: 40px;margin-top:-20px;color: #000;line-height: 40px;text-align:center;cursor: pointer;

top: 50%;}

$(function(){

$(".fade_slider").slider({

})

})

设置了四个默认参数。slow : 默认渐变的速度(ms)，time : 默认自动切换时间(ms)，bar : 是否显示左右箭头。默认不显示。可根据需要把左右箭头替换成自己需要的箭头图片，toorbar : 底部栏是否显示，默认显示。这里只是简单的封装了下实现方法，可根据实际需要改成自己需要的样式。

脚本如下

/*

* author bianlongting

* email 1137060420@qq.com

* date 2016/06/28 22:10

* describe 轮播渐变图

* [param] slow number

* [param] time number

* [param] bar boolean

* [param] toolbar boolean

*/

;(function(){

$.fn.extend({

slider : function(opts){

//默认值

var defaults = {

slow : 800,//默认渐变速度800

time : 4000,//默认切换时间4000

bar : false,//默认左右箭头不显示

toolbar : true,//默认显示底部栏

};

var opts = $.extend({}, defaults, opts);

return this.each(function(){

var o = opts;

var parent = $(this);

var timer = null;

var index = 0;

var oDiv = parent.find('.slider');

var imgs = oDiv.find('img');

var len = imgs.length;

//判断是否需要底部栏

if (o.toolbar) {

var html = "";

html += "

";

parent.append(html);

var bar = parent.find("a");

bar.first().addClass('active');

bar.on("mouseover",function(){

index = $(this).index();

changeImg(index);

}).eq(0).mouseover();

};

parent.hover(function(){

if (timer) {

clearInterval(timer);

};

},function(){

timer = setInterval(function(){

changeImg(index);

index++;

if (index == len) {

index = 0;

};

},o.time);

}).trigger('mouseleave');

//判断是否需要左右箭头

if (o.bar) {

parent.append("<\

>");

//前一个

$("#prev").on("click",function(){

if (index == 0) {

index = len - 1;

}else{

index --;

}

changeImg(index);

});

//下一个

$("#next").on("click",function(){

if (index == (len -1) ) {

index = 0;

}else{

index ++;

}

changeImg(index);

})

};

function changeImg(param){

oDiv.eq(param).stop(true,true).fadeIn(o.slow)

.siblings(".slider").fadeOut(o.slow);

if (o.toolbar) {

bar.eq(param).addClass('active')

.siblings().removeClass('active');

};

}

})

}

})

})(jQuery)