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天

知道了
彩01彩票 www.028261.com-快彩在线是不是赌博| www.173985.com-全民快三app| www.332365.cc-快乐彩输的倾家荡产| www.411506.com-彩色纸箱加工厂价格| www.530553.com-彩票模板选号神器| www.658657.com-陕体彩11选五遗漏| www.751094.com-玩彩票玩的就是心态| www.825056.com-3d牛彩涂-| www.896307.com-9购彩下载-| www.971929.com-体育彩票手机app| www.cai2226.com河北快三套选玩法| www.pk14.com-福彩3d可信吗| www.16dx.com-万豪彩票客户端下载| www.582.cm-腾讯时时彩前走势图| www.5535.in-时时彩票违法吗| www.17325.cc-官方博彩首存送彩金| www.68484.com-料狗足彩分析| www.075980.com-达人彩票投资平台| www.155410.com-体育彩票玩法大全| www.268384.com-3d字谜多彩网| www.365787.com-彩铅阴影怎么画人物| www.476160.com-好彩票网站是哪个| www.567605.com-福彩折现图-| www.639264.com-上海福彩实体店| www.732572.com-彩乐汇娱乐-| www.806298.com-800万彩票app| www.879735.com-詹天佑福彩3d预测| www.960115.com-彩票送28元体验金| www.cai995.com-旺彩app下载| www.my19.com-掌上中彩靠谱吗| www.03ix.com-体彩开奖日期表| www.83cg.com-彩印中国移动| www.2776.bid-彩界之首双色球三胆| www.9132.biz-足彩胜负彩十四场| www.72257.com-福彩3d试机号总汇| www.044060.com-3d真山西彩民乐| www.136787.com-彩票投注站提成| www.220638.com-大奖彩票-| www.301899.com-旺彩官方下载苹果| www.372170.com-搭建一彩票网站费用| www.467890.com-大乐透探码图彩民乐| www.553450.com-足彩三串一-| www.619170.com-云南省她方彩票| www.688076.com-金利彩票-| www.765126.com-彩票平台排行榜黑彩| www.881008.com-博彩可靠的平台| www.950573.com-中中彩网-| 至尊彩www.c229.net| www.dy54.com-老快三游戏下载| www.xf14.com-七彩网络下载| www.25nt.com-北京华彩大厦| www.0813.org-体育足彩网上怎么买| www.7837.biz-芸彩数字八星口诀| www.30416.com-体彩p3双彩图| www.78102.com-彩票科学分析讲座| www.035312.com-彩票aqq哪个好| www.157342.com-91竞彩之家下载| www.252601.com-快三的代理的平台| www.332060.com-手机彩膜代理| www.397688.com-福彩谜语大全| www.527611.com-时时彩跨度图| www.592951.com-彩虹6号官网| www.670562.com-彩色照片是什么颜色| www.744360.com-福彩代购公司| www.811339.com-大发快三手机赌博| www.880818.com-淘宝能买彩票了吗| www.948657.com-手机没电了买彩票| www.997679.com-爱心彩app-| www.qj4.cc-快三走势图江苏快三| www.ru59.com-境外彩票平台安全吗| www.15mr.com-七乐彩杀号定胆2| www.023.pink-彩票75官方网址| www.3795.biz-双彩论坛字谜排列三| www.9635.cn-排列五走势图彩经网| www.66693.cc-丨中国彩吧-| www.027985.com-鸿彩网平台怎么样| www.107971.com-天吉双色球彩票论坛| www.180002.com-体彩大乐透走势| www.255533.com-锋彩直播苹果版下载| www.335332.com-福彩3d投注指南| www.399974.com-福星彩图库75| www.560913.com-七乐彩手机选号网| www.622602.com-福彩彩票软件下载| www.685897.com-官彩有哪些平台| www.756422.com-足彩竞彩胜平负| www.819659.com-体彩店每日额度| www.883447.com-彩票计划软件排名| www.949198.com-正版电脑彩八肖图报| www.994999.cc-北京快三哪里看开奖| www.ev5.cc-时时彩预测器| www.pp40.com-哈尔滨逸彩快三| www.09ix.com-首页—青蛙彩票导航| www.81ch.com-彩票大家乐-| www.1827.pro-吉祥彩在线登录| www.00169.com-彩钢瓦围墙制作安装| www.91204.com-日景彩烟什么价位| www.056783.com-天空彩兔费资科大全| www.150479.com-8828彩票下载| www.237527.com-福彩3b字迷-| www.315953.com-够力七星彩奖表规律| www.376608.com-腾讯时时彩群| www.501428.com-体彩十一选5走势| www.563392.com-2525彩票app| www.621547.com-福彩19025期| www.680804.com-彩美旬果论8链接| www.750062.com-福彩双色球助手软件| www.808696.com-中国彩票吧网站| www.873429.com-中彩网大乐透推荐| www.931709.com-彩票几个数字| www.985409.com-足彩半全场胜负规则| www.cp466.com-安徽快三开奖走势| www.lq81.com-微彩之家-| www.h58.club-五分彩开奖号码记录| www.36iy.com-试机号七星彩| www.0991.site-晨兴彩票登录| www.7267.cn-新浪爱彩高频走势图| www.23221.com-无彩色系-| www.63826.cc-足彩竞彩胜负平| www.037313.com-彩经网打不开| www.121284.com-彩票交流微信群名字| www.189535.com-时时彩老玩家的经验| www.258678.com-竞彩足球买量比| www.326726.com-乐彩网论坛静态版| www.383007.com-开户送28彩全| www.523524.com-时时彩开奖结96果| www.582206.com-金鹿彩票真的假的| www.638825.com-体育彩票游泳夺金| www.697882.com-彩报图库第一板| www.773225.com-彩票规律心得体会| www.832690.com-七彩轻云apk| www.887782.com-几个靠谱的彩票网站| www.948619.com-彩票公益金申请范本| www.987674.com-互联网购彩-| www.cai9244.com吉林省快三开结果| www.kj76.com-12彩票app-| www.b61.cn-福彩助手手机版| www.31pv.com-彩票开奖查询星期一| www.0541.com-专业玩彩福彩预测| www.6655.cm-天天分分彩计划| www.13934.com-彩票是私人的嘛| www.53420.com-彩虹画儿童画| www.93583.com-手机买快三能赢吗| www.050229.com-黑彩骗局-| www.168654.com-胆拖平台时时彩| www.249299.com-彩73资料平台| www.313925.com-彩吧彩报-| www.366997.com-六开彩票结果| www.436323.com-北京快3派彩助手| www.512795.com-三毛彩吧官网| www.567100.com-彩虹台手机直播在线| www.620161.com-釉上彩作品-| www.673733.com-古建筑彩绘枋心图片| www.731913.com-足彩19038佬牛| www.788385.com-大公鸡七星彩解梦| www.859028.com-彩专家网站去哪了| www.917277.com-河南信阳彩票大奖| www.965591.com-鸿彩票软件下载| 88彩票www.8839p.com| www.cb68.cc-河北11选5爱彩乐| www.692072.com-高频彩如何赚钱| www.828722.com-138cp彩票-| www.935641.com-大发彩票用户登录| 大赢家彩票www.536411.com| www.ni88.com-雪原园足彩比分直播|