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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

160 639 214



特效描述:基于jQuery实现 多屏幻灯片 滚动切换特效。基于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 -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到