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.m30.mobi-大发快三程序框架| www.1988.tv-慧金彩上市公司| www.947054.com-福利彩票高频彩输赢| www.rs6.cc-湖北快三规则玩法| www.r44.com-河北省福彩中心地图| www.91dx.com-华为娱乐彩票靠谱吗| www.cai4446.com快三河南走势图| www.266999.cc-8号彩票app-| www.ga62.com-凤凰彩票能放心玩吗| www.091049.com-百盛彩票网站| www.762201.com-奇门测港彩特肖秘诀| www.879093.com-福彩3d开奖视频| www.955920.com-今天足彩胜负对阵表| www.cp6955.com-河南快三彩票| www.928551.com-旺彩广东11选5| www.708031.com-幸运快三预测大小| www.88oc.com-开设私彩-| www.024902.com-澳门一分彩开奖结果| www.2904.vip-福彩倍投计算器| www.092152.com-乐发彩票注册手机版| www.183590.com-福彩快3玩法规则l| www.860697.com-高频彩票软件下载| www.923123.cc-108官网彩票平台| www.972883.com-凤彩网杀号-| www.df24.com-体彩十一夺金开奖| www.ps27.com-广州鸣彩艺术品拍卖| www.t34.vip-七乐彩免费预测| www.73zk.com-彩店宝停运-| www.2894.pw-酷彩吧中奖-| www.996775.com-陕西快三走势图| www.ht96.com-快三怎么追一个对子| www.176681.com-福彩快三投注平台| www.241838.com-七星彩奖金规则表图| www.26al.com-互联网销售彩票| www.05254.com-福彩3d图表下载| www.347891.com-内蒙古体彩赛马| www.027584.com-易彩彩票犯法吗| www.880226.com-七乐彩3加1有钱吗| www.056158.com-彩票黄金分割3中2| www.7247.cc-合装彩虹糖-| www.35ho.com-彩票分析家破解版| www.6069.biz-大数据计算彩票| www.6384.vip-财富网彩票-| www.058923.com-彩票中一等奖怎么领| www.48918.com-网站彩票做庄| www.116159.com-在线买彩票的软件| www.181518.com-快三app网址| www.262644.com-到底有没有天津快三| www.762591.com-世界最高彩票奖| www.884501.com-福彩三地走试图| 天天彩票www.626747.com| www.803.me-九天玄女测彩票三| www.365107.cc-风之彩app-| www.678429.com-吉林快三号码推荐| www.832223.com-高频彩伪随机数漏洞| www.944821.com-248彩票网手机版| www.vl2.com-澳洲5分彩开奖| www.00jh.com-福彩3d500资讯| www.816147.com-澳门博彩理财骗局| www.984830.com-彩票开奖幸运选号| www.wd85.com-彩票开奖号-| www.505195.com-哪个平台彩金多| www.637570.com-彩虹6下载-| www.896679.com-彩票对刷打偏骗局| www.f16.club-中国福彩双色球结果| www.19722.com-皇冠外围彩票网| www.019141.com-利彩首页-| www.138006.cc-彩票每等中奖率| www.254173.com-糖果彩彩票-| www.28jo.com-e彩乐彩票-| www.616013.com-深圳市福彩兑奖地址| www.711276.com-700彩票骗局揭秘| www.793062.com-绵阳市福彩中心| www.872550.com-体彩山西11选五| www.943363.com-微微彩票下载安装| www.993688.com-福利彩票分析中奖| www.gf49.com-快三在线玩-| www.05740.com-深圳假福彩快乐彩店| www.792078.com-德州快三提前预知| www.27798.com-3cp官方彩票| www.th53.com-时时彩一星倍投表| www.13401.cc-金誉彩票网登录不上| www.307660.com-河南派彩电子走势图| www.377250.com-结婚前因为彩礼分手| www.533875.com-杏彩网页登陆网址| www.739138.com-3d彩票模拟投注| www.882780.com-河南彩礼多少钱| www.75wc.com-青岛哪里做5d彩超| www.1166.pw-彩票条目-| www.139318.com-百福彩票黑我钱| www.792985.com-打击私彩赌博| www.979541.com-晚晚好彩今晚图片| www.x30.cn-78彩票推荐人id| www.4540.cn-彩票开奖查询新闻| www.65336.com-炫彩是什么意思| www.703966.cc-万人彩票可信吗| www.877639.com-买足彩是赌博吗| www.3809.vip-快三出豹子有规律| www.771312.com-微信投资福彩快三| www.368395.com-用彩铅画落日晚霞图| www.85583.com-彩票有规律可循| www.877228.com-时时彩3第-| www.997066.com-87彩店app-| www.fc23.com-手机彩票破解方法| www.352832.com-中乐彩v2116| www.423300.com-七星彩开奖走势| www.510368.com-时时彩怎样平投| www.578352.com-安阳体彩中心地址| www.21mt.com-安徽体彩徐启旺| www.7411.vip-上海竞彩网点| www.692279.com-彩票开奖直播大乐透| www.778808.cc-彩创-| www.878913.cc-下载彩之王app| www.946993.com-江苏快三手机平台网| www.984761.com-青海福彩中心电话| www.cp0996.com-最精准快三计划平台| www.ii64.com-乐彩3d论坛静态版| www.vu72.com-怎么看彩票走势图解| www.8ku.cc-大乐透彩票开奖等级| www.48in.com-福彩3d有多长时间| www.98vu.com-博彩技术论坛| www.4178.vip-七彩是什么平台| www.9386.biz-体育彩票买-| www.4672.vip-彩票最多买几期| www.12571.com-时时彩大小有规律吗| www.53562.cc-好彩网_app-| www.96754.com-彩票诈骗120万| www.039265.com-60彩票官网-| www.162938.com-天天好彩app| www.235237.com-凤凰微彩app下载| www.018656.com-福彩彩吧图迷第一版| www.33585.com-网络高频彩作弊| www.67722.com-网赌彩票输了几万| www.023470.com-美国彩票代购| www.490025.com-彩一票开奖查询结果| www.5218.pw-巴西三分彩开奖| www.j54.net-彩票正版藏机图| www.544985.com-精彩数学就在身边| www.789253.com-足彩妖刀博客| www.847809.com-彩票怎么挂机比较好| www.908876.com-福彩开机号码| www.666029.com-新加坡三福彩| www.9788.tv-多彩贵州评论| www.72314.com-精彩视频免费观看| www.925558.com-广西快三三胆定一| www.992259.com-包头市福彩中心| www.20738.com-以买彩票为由被骗| www.98800.com-福彩双色球100期| www.127365.com-彩客网比分直播版| www.26511.com-乐和彩走势图| www.730190.com-重庆实时彩技巧| www.828918.com-彩票站老板打错数字| www.915268.com-博盈彩票-| www.968196.com-快三福彩江苏| www.998395.com-北京彩票站转让个人| www.ab17.com-快三追号亏千万| www.83au.com-移动彩云官网| www.355351.com-彩票定胆位计算公式| www.98775.com-网络骰子快三| www.859358.com-体彩开机号家彩网| www.114943.com-宝鸡体彩-| www.6981.me-有个亲戚中彩票了| www.57677.com-英国5分彩开奖号码| www.001722.com-彩种齐全娱乐平台|