兼容ie的轮播效果

一、flexslider

• 引入jquery和相关的js、css

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/flexslider.css" />
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

• 页面的html代码如下：

<div class="hg-meitii flexslider">
	<ul class="mt slides">
		<li class="">
			<a target="_blank" href="">
				<img src="Images/mtzs1.png" >
				<p>
					<span>标题1</span>
				</p>
			</a>
		</li>
		<li class="">
			<a target="_blank" href="">
				<img src="Images/mtzs1.png" >
				<p>
					<span>标题2</span>
				</p>
			</a>
		</li>
		<li class="">
			<a target="_blank" href="">
				<img src="Images/mtzs1.png" >
				<p>
					<span>标题3</span>
				</p>
			</a>
		</li>
	</ul>
</div>

• js如下：

<script type="text/javascript">
$(function() {
	$(".hg-meitii").flexslider({
		animation: "slide",
		slideDirection: "vertical",
		slideshowSpeed: 6000, //展示时间间隔ms
		animationSpeed: 1000, //滚动时间ms
		touch: true, //是否支持触屏滑动
		slideshow: true, //Boolean: Animate slider automatically 载入页面时，是否自动播放
		controlNav: true, //是否显示控制菜单,
		animationLoop: true,
	});
})
</script>

• 相关css：

.hg-meitii {
	width: 650px;
	height: 372px;
	margin-top: 10px !important;
	margin-left: 10px !important;
}

.hg-meitii ul li {
	position: relative;
}

.hg-meitii ul li img {
	height: 372px;
}

.hg-meitii ul li p {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	height: 40px;
	line-height: 40px;
	width: 100%;
	margin: 0;

}

.hg-meitii ul li p span {
	padding-left: 10px;
}

.hg-meitii .flex-control-nav {
	width: auto;
	line-height: 12px;
	right: 0;
	display: block;
	border: 1px solid  #000000;
}
.flex-control-paging li a{
	background-repeat: no-repeat;
}
.flex-control-paging li a.flex-active{
	width: 12px!important;
}

二、