JQuery自动轮播效果，带字幕说明，带底部滚动圈圈，兼容IE7以上所有主流浏览器。（魔兽背景哟亲）

<style type="text/css">
/*自动轮播*/
.a_slide{position: relative;height: 100%;width: 440px;overflow: hidden;float: left;margin: 20px 16px 0 -20px;}
.a_slide li{list-style: none;}
.a_slide .slides li{position: relative;display: none;-webkit-animation-name: fadeIn;/*动画名称*/-webkit-animation-duration: 1s;/*动画持续时间*/-webkit-animation-iteration-count: 1;/*动画次数*/-webkit-animation-delay: 0s;/*延迟时间*/}
.a_slide .slides li.active{display: block;}
.a_slide .slides li img{width: 400px;height: 250px;}
.a_slide .slides .caption{position: absolute;bottom: 5px;width: 100%;left: 0;height: 40px;line-height: 40px;color: #fff;background: rgba(0, 0, 0, .5);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);}
.a_slide .slides .caption p{margin-left: 1em;margin-right: 100px;font-size: 16px;font-weight: bold;text-align: left;overflow: hidden;word-wrap: normal;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;margin-top: 0;}
.a_slide .navigations{position: absolute;right: 10px;bottom: 15px;overflow: hidden;}
.a_slide .navigations li{float: left;margin-left: 10px;height: 10px;width: 10px;border-radius: 10px;background: #c3bebf;cursor: pointer;}
.a_slide .navigations li.active{background: #FFDE00;}
</style>
<div class="a_slide j-tab">
<ul class="slides">
<li class="j-tabpane active">
<a href="" target="_blank"> <img src="http://y0.ifengimg.com/dbcc8e45854c158f/2014/0915/ori_54167948a7daf.jpeg">
<div class="caption">
<p>魔兽001</p>
</div>
</a>
</li>
<li class="j-tabpane">
<a href="" target="_blank"> <img src="http://img.52miji.com/52miji/allimg/071025/1924554.jpg">
<div class="caption">
<p>魔兽002</p>
</div>
</a>
</li>
<li class="j-tabpane">
<a href="" target="_blank"> <img src="http://img1.ph.126.net/sJFkQnlJAmgkznfYSaz4ug==/2099240376408189472.jpg">
<div class="caption">
<p>魔兽003</p>
</div>
</a>
</li>
<li class="j-tabpane">
<a href="" target="_blank"> <img src="http://wow.tgbus.com/UploadFiles_2396/201012/20101209144257556.jpg">
<div class="caption">
<p>魔兽004</p>
</div>
</a>
</li>
</ul>
<ul class="navigations">
<li class="j-tabctrl active"></li>
<li class="j-tabctrl"></li>
<li class="j-tabctrl"></li>
<li class="j-tabctrl"></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
! function(a) {
var b = {
eventType: "click",
tabctrlClass: "j-tabctrl",
tabpaneClass: "j-tabpane",
activeClass: "z-active",
initialTab: 0,
autoplay: !1,
interval: 3e3,
callback: a.noop
},
c = function(c, d) {
return this.el = c, this.jqel = a(c), this.timer = null, this.options = a.extend({}, b, d), this.current = this.options.initialTab, this.tabctrlClass = "." + this.options.tabctrlClass, this.tabpaneClass = "." + this.options.tabpaneClass, this.jqtabctrls = this.jqel.find(this.tabctrlClass), this.jqtabpanes = this.jqel.find(this.tabpaneClass), this.length = this.jqtabctrls.length, this.init()
};
c.prototype = {
constructor: c,
init: function() {
var b = this,
c = this.options.activeClass,
d = "hover" === this.options.eventType ? "mouseenter" : this.options.eventType;
this.jqtabctrls.removeClass(c).eq(this.current).addClass(c), this.jqtabpanes.removeClass(c).eq(this.current).addClass(c), this.jqel.on(d, this.tabctrlClass, function() {
b.current = b.jqtabctrls.index(a(this)), b.move(b.current), b.timer && clearTimeout(b.timer)
}), this.jqel.on("mouseenter", this.tabpaneClass, function() {
clearTimeout(b.timer)
}), this.jqel.on("mouseleave", this.tabpaneClass, function() {
b.autoplay()
}), b.autoplay()
},
move: function(a) {
var b = this.options.activeClass;
this.jqtabctrls.removeClass(b).eq(a).addClass(b), this.jqtabpanes.removeClass(b).eq(a).addClass(b), this.options.callback(a)
},
autoplay: function() {
if (this.options.autoplay) {
var a = this;
! function b() {
a.timer = setTimeout(function() {
a.current < a.length - 1 ? a.current++ : a.current = 0, a.move(a.current), b()
}, a.options.interval)
}()
}
}
}, a.fn.tab = function(a) {
return this.each(function() {
new c(this, a)
})
}
}(jQuery);
! function($) {
/*自动轮播效果*/
$(function() {
$('.a_slide').tab({
activeClass: 'active',
eventType: 'hover',
autoplay: true,
interval: 2000
});
});
}(jQuery);
</script>