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.596505.com-江苏省地方彩票开奖| www.rk53.com-北京快三跨度查询| www.19rh.com-五行预测彩票取数| www.95up.com-美金申请88彩金网| www.3497.org-彩票2等奖-| www.778574.com-8彩票网址-| www.875254.com-新彩票坊平台| www.964853.com-57555彩票网| www.cai1238.com江苏福彩快3走势图| www.mz19.com-爱彩乐11选5北京| www.ff3.cc-时时彩开彩结果查询| www.338167.com-牛彩网双色球专区| www.9242.biz-和乐彩票首页| www.188179.com-福彩3d预测金码| www.298765.com-幸运彩票3550| www.738028.com-中彩神被偷计算器| www.854481.com-一分快三太假了| www.946668.cc-福彩东方6十1预测| 众发彩票www.656zf.com| www.90578.com-时时彩专业版破解版| www.169576.com-内蒙古快三专家推号| www.556000.cc-通辽快三-| www.48572.com-福彩3d开机号| www.532962.com-365彩票网可信吗| www.710521.com-彩票套彩金资源| www.003729.com-手机里福彩端| www.29za.com-今天福彩什么好| www.781054.com-彩虹上衣女-| www.906925.com-河南省彩票品种| 金彩网www.jcai5.com| www.62rl.com-ff14彩票周六| www.v66.hk-多盈彩票平台怎么样| www.255073.com-时时彩人工计划51| www.yg29.com-派彩的钱是反水吗| www.l90.club-大彩网彩票走势图| www.700601.com-竞彩足球兑奖| www.802164.com-彩29网站-| www.887590.com-彩票中奖哪期兑奖| www.22310.com-万豪彩票客户端| www.46165.com-彩票手机端推广| www.1813.cn-福彩刮奖图案| www.985501.com-快三号码预测一定牛| www.545377.com-彩票投注站申请电话| www.699041.com-休彩现场直播| www.966285.com-快三直播开奖| www.pt3.com-派彩app-| www.42907.com-广东体育彩票十分钟| www.010109.com-福彩3d讨论qq群| www.130894.com-内蒙福彩大家乐| www.635231.com-八面通七彩影院影讯| www.275351.com-香港体彩号码| www.356437.com-智慧彩官网论坛| www.4401.cn-下载竞彩足球官方网| www.54622.com-白菜彩金论坛网| www.023601.com-r8国际彩票好不好| www.162066.com-彩乐汇官方下载| www.091733.com-下载环球彩票| www.139016.com-彩票免费资料共享| www.124500.com-平台彩票漏洞破解| www.215608.com-湖北快三好假| www.300111.com-彩票双色球购买| www.400710.com-七星彩本期局网图纸| www.515377.com-私人排五彩票| www.594978.com-京东彩票客户端| www.88xd.com-海南七星彩手机版| www.3788.net-彩先知欲钱料| www.8805.bid-六十一体彩开奖查询| www.37733.cc-彩虫安卓版-| www.91682.com-福彩3d双色球字迷| www.611271.com-真实的彩票程序开发| www.706298.com-快三杀码专家| www.803867.com-海南公布彩票新玩法| www.883968.com-大发快三是黑彩吗| www.03om.com-非凡彩票app官网| www.076050.com-全天时时彩计划| www.721848.com-百万彩票app苹果| www.802721.com-中彩网天津杀号| www.876504.com-真正的福彩3d高手| www.974376.com-极速3分彩票| 亿发彩票www.901327.com| www.kg45.com-快彩网是合法的吗| www.a66.net-北京彩票快三| www.18jk.cc-98彩票app1-| www.85pj.cc-西安福利彩票| www.69qd.com-彩票126官方端口| www.32mn.com-安徽快三万能码| www.1121.tv-竞彩半全场玩法| www.7500.org-中国体育彩票设备| www.18119.com-推广博彩话术| www.58672.com-新彩霸王报-| www.220895.com-彩票外挂手机版下载| www.620869.cc-彩票手机官方客户端| www.794499.com-非法互联网彩票举报| www.089076.com-吉林快三投注平台| www.455528.com-问题彩民求救机构| www.977476.com-哪种彩票app好| www.42688.com-华亿彩票aqq| www.196488.com-百宝彩上海快3| www.337057.com-下载买彩票软件| www.29916.cc-体彩大乐透尾号走势| www.087806.com-幸运快三谁被骗过| www.227283.com-一天快三秒-| www.399112.com-三d试机号彩神通| www.wc08.com-cm彩迷-| www.112375.com-微信pc28送彩金| www.325782.com-新浪体育彩票手机版| www.465779.com-福彩的开机号是多少| www.585969.com-七乐彩加减法杀号| www.158198.com-北京福彩pk拾玩法| www.04dp.com-6288彩票下载| www.528524.com-彩吧今天3d开机号| www.110749.com-吉林快三杀号| www.243229.com-买体彩的app| www.370013.com-福彩3d开奖| www.521811.com-新浪爱彩必发指数| www.645432.com-七乐彩玩法与奖金| www.754037.com-菠菜彩金-| www.865129.com-七星彩网址大全| 8816彩票www.8816p.com| www.898077.com-网络彩票害人| www.3572.xyz-南方双彩软件| www.30352.com-中国体彩七位数开奖| www.088393.com-大发金利彩票邀请码| www.176671.com-百盈快三怎么赚钱| www.254596.com-青海快三中奖查询| www.318499.com-重庆彩平刷-| www.377851.com-彩礼20万多吗| www.730960.com-足彩賠率分析| www.788197.com-全民彩彩票下载安装| www.853314.com-体彩排五走试图| www.900467.com-爱乐透手机购彩票| www.953125.com-中国足球竞猜竞彩网| www.990490.com-大型彩票游戏平台| www.vk6.com-彩经网排列三| www.298533.com-腾讯彩票幸运大转盘| www.369214.com-福彩三d蛋吗预测| www.445355.com-鸿大彩票-| www.538953.com-乐盈彩怎么下载| www.637902.com-七星彩排列五表| www.602152.com-金山彩票好用吗| www.754001.com-手机分分彩挂机软件| www.843208.com-彩票公益事业| www.891842.com-实时彩-| www.947661.com-i众彩网-| www.982648.com-江苏福利彩票玩法| www.ci3.com-吉林福彩快三开奖号| www.pr11.com-33彩票-| www.02zk.com-彩虹伴奏周杰伦女生| www.269851.com-下载彩九送19元| www.354023.com-德惠彩票站-| www.411324.com-小学生广播七彩阳光| www.502502.cc-刷彩票立返-| www.559696.com-最贵的彩票收藏| www.607635.com-一福彩开奖-| www.163417.com-彩民村大发时时彩| www.310939.com-甘肃福利彩票| 彩客博www.8667d.com| www.3ye.com-买彩票有破产的吗| www.55cr.com-彩票好不好-| www.0645.xyz-cc彩票平台官网| www.6873.com-好彩头是什么意思| www.51852.com-彩名堂苹果手机版| www.004712.com-福彩现场开奖直播| www.073133.com-1彩平台-|