基于jQuery实现多屏幻灯片滚动切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>

3. HTML代码

<!-- Demo -->
<div id="owl-demo" class="owl-carousel">
	<div class="itme">
		<ul>
			<li class="li1">
				<a href="http://www.51qianduan.com/"><img src="img/a1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">阿根廷备战 队友倒地引梅西大笑</a></h3>
					<p>北京时间6月13日，阿根廷队训练备战，众将心情轻松，训练中，队友摔倒引梅西大笑。</p>
				</div>
			</li>
			<li class="li2">
				<a href="http://www.51qianduan.com/"><img src="img/b1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">葡萄牙备战 C罗情绪激动对队友指手画脚</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c1.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">鲁尼投入训练不敢怠慢</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">巴神备战炫酷墨镜拉风</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href="http://www.51qianduan.com/"><img src="img/a2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">荷兰5-1血洗西班牙 罗本范佩西梅开二度</a></h3>
					<p>6月14日凌晨，西班牙队迎战荷兰队，荷兰5-1逆转获胜。范佩西罗本梅开二度，德弗里头球破门。</p>
				</div>
			</li>
			<li class="li2">
				<a href="http://www.51qianduan.com/"><img src="img/b2.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">西荷大战 橙衣球迷＂巨胸＂造型抢镜</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">哈维重演卡纳瓦罗悲剧</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">科比观西荷战疑似爆粗</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href="http://www.51qianduan.com/"><img src="img/a3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">两度献唱世界杯的洛佩兹 身材惊呆小贝</a></h3>
					<p>1994年曾为美国世界杯献声，2014年以出位着装现场演唱巴西世界杯主题曲。</p>
				</div>
			</li>
			<li class="li2">
				<a href="http://www.51qianduan.com/"><img src="img/b3.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">世界杯女主播太太团 斯内德妻子小三逆袭</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">英格兰太太团声名狼藉</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c6.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">本田德罗巴领衔型男PK</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href="http://www.51qianduan.com/"><img src="img/a4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">日本混血名模私房写真助威蓝武士</a></h3>
					<p>日本-加拿大混血名模maggy为《GQ》杂志拍摄私房写真，爱好体育的她曾采访过香川真司。</p>
				</div>
			</li>
			<li class="li2">
				<a href="http://www.51qianduan.com/"><img src="img/b4.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">比利时小姐举行内衣足球赛 应景世界杯</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c7.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">GQ里约最性感海滩特辑</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c8.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">央五女主播扮足球宝贝</a></h3>
				</div>
			</li>
		</ul>
	</div>
	<div class="itme">
		<ul>
			<li class="li1">
				<a href="http://www.51qianduan.com/"><img src="img/a5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">空姐变身足球宝贝 万米高空造势世界杯</a></h3>
					<p>中国云南某航空公司航班上，空姐穿着巴西队服为旅客服务。</p>
				</div>
			</li>
			<li class="li2">
				<a href="http://www.51qianduan.com/"><img src="img/b5.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">孔卡美女翻译与乳神合影 气场丝毫不逊</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c9.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">泳装美女大玩水上足球</a></h3>
				</div>
			</li>
			<li class="li3">
				<a href="http://www.51qianduan.com/"><img src="img/c10.jpg" alt=""></a>
				<div class="txt">
					<h3><a href="http://www.51qianduan.com/">TVB美女主播看台抢镜</a></h3>
				</div>
			</li>
		</ul>
	</div>
</div>
<!-- Demo end -->