QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery css3响应式图文卡片滚动轮播特效

jQuery css3响应式图文卡片滚动轮播特效

这是一款jquery和css3响应式卡片图文列表轮播布局。基于owl-carousel图片滚动插件,通过bootstrap制作响应式卡片布局,组成炫酷的图文卡片轮播特效。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<!--响应式框架-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

<!--图标样式-->
<link rel="stylesheet" >

<!--滚动样式-->
<link rel="stylesheet" href="css/owl.carousel.min.css">

<!--核心样式-->
<link rel="stylesheet" href="css/style.css">

2、head引入js文件

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

3、body引入HTML代码

<div class="container">

	<div class="row">
		<div class="col-md-12">
			<div id="news-slider" class="owl-carousel">
				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-1.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 5, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-2.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 7, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-3.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 9, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>

				<div class="post-slide">
					<div class="post-img">
						<a href="#"><img src="images/img-4.jpg" alt=""></a>
					</div>
					<div class="post-content">
						<h3 class="post-title"><a href="#">Latest News Post</a></h3>
						<p class="post-description">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
						</p>
						<ul class="post-bar">
							<li><i class="fa fa-calendar"></i> June 11, 2016</li>
							<li>
								<i class="fa fa-folder"></i>
								<a href="#">Mockup</a>
								<a href="#">Graphics</a>
								<a href="#">Flayers</a>
							</li>
						</ul>
						<a href="#" class="read-more">read more</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
	$(document).ready(function() {
		$("#news-slider").owlCarousel({
			items:3,
			itemsDesktop:[1199,2],
			itemsDesktopSmall:[980,2],
			itemsMobile:[600,1],
			pagination:false,
			navigationText:false,
			autoPlay:true
		});
	});
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩乐分析 www.830640.com-广州彩色打印机租赁| www.954555.com-足彩有哪些玩法| 大赢家彩票网www.178593.com| www.nx16.com-广西快三计划网| www.x68.biz-大发彩票破解版| www.75ky.com-三十六计赢足彩文库| www.2901.pw-彩票报纸种类很多| www.9299.bid-分分彩后二个人经验| www.066130.com-小鸡彩虹图片| www.144736.com-淘宝快三基本走势图| www.259888.com-福利彩票随机选号码| www.344268.com-超神快三平刷破解版| www.444683.com-体彩助手客户端下载| www.552073.com-爱彩乐官方是真的吗| www.669915.com-彩色水泥地面做法| www.748422.com-977彩票是真的吗| www.819124.com-0投资彩票赚钱| www.888080.com-福彩三d彩报| www.dk79.com-全民彩票玩法技巧| www.xk87.com-鑫彩彩票平台| www.26ci.com-加盟彩票站最便宜| www.0702.wang-福彩站点申请| www.8155.tv-必发彩票提现不了| www.37832.cc-234彩票网下载| www.89594.com-好彩连连-| www.059419.com-尼彩手机报价| www.189869.com-江苏福彩快3遗漏号| www.273112.com-彩票店5元刮刮卡| www.379655.com-欠债中彩票-| www.511106.com-什么彩虹歌曲| www.590697.com-中彩堂原創料| www.673068.com-七星彩中奖兑| www.761250.com-好彩妹好彩自然来| www.885090.com-家彩网3d胆码预测| www.964623.com-博通彩票官网| 大赢家彩票网www.178532.com| www.io53.com-手机投注彩票| www.f82.cn-吉隆坡博彩中国人| www.44rs.com-分分彩网站网站| www.963.net-彩云追月祥瑞| www.9077.me-七彩乐什么时候开奖| www.51984.com-旺彩网合法吗| www.000315.com-体彩网点怎么验真假| www.077762.com-局王七星彩奖表| www.150912.com-彩宝贝短信点播| www.279215.com-快频彩票官网下载| www.371187.com-彩中彩网投网站| www.481638.com-幸运彩票平台正规吗| www.566441.com-北京和彩日本料理| www.645561.com-女人梦见买彩票中奖| www.773149.com-售后好的彩票app| www.871053.com-关于福利彩票的书| www.948611.com-彩票排列五开奖时间| www.996441.com-黑龙江体彩领奖地点| www.nq4.cc-内蒙快三走势图连线| www.rk59.com-北京快三公交车路线| www.15aw.com-因为彩礼钱而分手| www.209.tv-8亿彩手机版网页版| www.4282.vip-河南乐彩uv卷材机| www.00199.com-8k彩票平台-| www.69900.cc-鼎盛彩票app| www.033110.com-88678彩票网| www.112652.com-福利彩票快3多少钱| www.187601.com-在线下载时时彩| www.263325.com-极速时时采彩官方| www.385636.com-新世纪lld8彩票| www.510469.com-彩中奖规则图片| www.586110.com-谦喜彩票提现不到账| www.664055.com-今晚七星彩出什么码| www.745636.com-c彩61彩票官网| www.819882.com-福利彩票兑换地点| www.892579.com-彩票近500期开奖| www.955496.com-福利彩票出什么事了| 五星彩票www.5xcv.com| www.dw61.com-乐福彩票官方网| www.wd11.com-彩票往期开奖结果| www.15lr.com-聚福彩快三计划软件| www.3622.net-132彩票在线登入| www.9197.online七星彩4字万字表| www.55226.cc-彩票新用户送彩金的| www.000848.com-彩票缴款通福彩| www.069916.com-彩神争霸团队| www.137073.com-七彩图片-| www.216858.com-网上快三可以玩吗| www.291832.com-重庆大快三下载| www.365820.cc-分分时时彩单双技巧| www.462143.com-两个合法网购彩票| www.555261.com-华彩v2.1.15| www.625595.com-大豪客彩票网址| www.700903.com-彩票开票-| www.781507.com-校长预测福彩胆码| www.863827.com-下载彩票开奖工具| www.937386.com-彩福大厦最高是几楼| www.994102.com-竞彩足球计算器i| www.gd.cc-那个快三平台稳定| www.ne86.com-极速快三历史开奖| www.6no.cc-体彩竞猜官网| www.64qh.com-足彩投资宝典txt| www.0695.vip-彩票站能转让吗| www.8645.vip-彩票app不能购买| www.34544.cc-玩彩平台信誉好排行| www.79178.cc-网易彩票直播首页| www.029641.com-利赢国际彩票平台| www.108035.com-足彩比分预测软件| www.176552.com-百盈快三怎么买稳赢| www.251913.com-cp12彩票-| www.324428.com-福彩开奖造假| www.395501.com-晚上福利彩票开什么| www.654234.com-福利彩票时间| www.793888.cc-28彩票是真的吗| www.857262.com-微微彩票骗局| www.907232.com-六位数的彩票| www.961252.com-靠谱的彩票软件下载| 彩票坊www.022nx.cc| www.dd07.com-人人竞彩app下载| www.sy91.com-彩票有几个数字组成| www.27la.com-彩票中奖必须被公开| www.719.xyz-彩票坐庄是什么意思| www.4639.vip-一般彩票买什么好| www.9823.pw-体彩开奖排列三| www.63873.cc-网络彩票模拟| www.020265.com-彩票计算器双色球| www.088688.com-福彩快三计划网站| www.150072.com-甘肃快三开奖规则| www.254807.com-山东省体彩扑克三| www.956024.com-福彩近十期开奖号| www.989949.com-彩漂泡一晚上没事吧| www.cp696.com-青海快三平台| www.93308.com-足彩什么叫下盘打出| www.636366.com-彩虹棋牌比鸡挂| www.736297.com-彩票私带回血上岸| www.792882.com-福彩可以全省通兑吗| www.855218.com-极速彩平台-| www.901806.com-福利彩票游戏机论坛| www.954816.com-上海快三大小玩法| www.994158.com-炫彩油画-| www.cp1086.com-快三计划网址| www.im38.cc-105彩票官网下载| www.139350.com-好彩堂玄机网马会| www.213457.com-全部彩神软件大全| www.280599.com-时时彩网上不更新| www.397013.com-体彩排列三万能六码| www.513882.com-双彩球下期蓝球预测| www.579548.com-手机彩票网高手论坛| www.647794.com-霍金留下的彩票公式| www.738807.com-彩神争霸1下载| www.796018.com-天津市体彩11选5| www.854001.com-熊猫彩电-| www.899524.com-新澳国际彩票平台| www.952320.com-和值怎么看快三| www.988214.com-玩掌中彩怎么样| www.cai0606.com中国福彩官方app| www.ix94.com-浙江体彩网官网| www.yh16.cc-分分彩4星稳赚套路| www.13sp.com-广东省福彩26选5| www.444.net-福利彩票最早的大奖| www.3518.cc-全民汇彩票骗局| www.8421.wang-彩票网工具下载| www.46552.com-好彩36选3开奖号| www.87952.com-三分彩下载-| www.033526.com-王者彩票主页| www.186086.com-极速快三插件| www.248187.com-福彩贵州快三走势图| www.312190.com-体育彩票一定牛安卓|