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

魔兽背景，大爱~

废话不多说，上代码，觉得好用喜欢的请关注收藏！

代码亲测：IE7、8、9、11，谷歌、FF均可用。

先来一张效果图~~~

<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>

好用请关注收藏噢~，欢迎大神指导。