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天

知道了
102彩票 www.663135.com-3g彩票开奖-| www.811110.com-下载福彩选号技巧| www.895147.com-在爱投买彩票安全吗| www.972200.com-印尼五分彩开奖结果| www.cx53.com-河北快三豹子计划| www.570971.com-下载七彩阳光第三套| www.663829.com-时时彩平台源码出租| www.766378.com-乐猫彩票客户端下载| www.732123.com-政府会管结婚彩礼吗| www.824109.com-杭州市卓尚和三彩| www.921098.com-天才彩女专家专栏| www.987024.com-网络购彩app| www.oy2.com-甘肃福利彩票双色球| www.qb07.com-查彩票app-| www.821933.com-如何买彩票中五百万| www.911665.com-福彩三d怎么玩| www.988948.com-快三二不同号奖金| www.wp7.com-河北快三走势图下载| www.594500.com-多彩气泡链接| www.697232.com-海南七星彩怎么赔| www.798668.com-买竞彩怎么算税额| www.874330.com-开奖最快的彩票软件| www.978800.com-皮得欢好彩1预测| www.af7.cc-中国福彩3d走势图| www.630762.com-宝盈彩客服-| www.755812.com-汇旺彩票骗局揭秘| www.925963.com-深圳市福彩投注站| www.bm43.com-揭秘网赌重庆时时彩| www.5ma.cc-体彩排三钓翁三字诀| www.61024.com-福彩三地今天藏机图| www.069010.com-六会彩588-| www.877427.com-谜彩软件-| www.996840.com-新博瑞彩票下载| www.gc38.com-导师带你买彩票| www.zi46.com-中国快三福彩官网| www.28884.cc-中国福彩开结果| www.91879.com-中彩那天续写| www.394755.com-彩虹六号第三年季票| www.516730.com-玩两分快三技巧| www.rg11.cc-甘肃快三开奖爱彩乐| www.965108.com-福彩网是合法的吗| www.fo56.com-5oo万彩票网比分| www.7373.tv-体彩公益金使用公告| www.779749.com-七乐彩11中4十0| www.883602.com-奔驰彩票客户端| www.962119.com-下载中国体育彩票网| 幸运彩票www.689066.com| www.34247.com-彩客网安卓手机版| www.028354.com-博友彩正规吗| www.121482.com-银川到哪里对彩票| www.209032.com-快三什么平台好| www.337648.com-朋友叫我玩吉彩| www.62593.cc-盛兴彩票v1系统| www.057219.com-大发快三助手一分钟| www.155522.com-彩票最多能中多少钱| www.270675.com-7彩网官方下载| www.345233.com-体彩排列五怎样投注| www.416896.com-天下彩民彩图诗句| www.075195.com-中国体育彩票几种| www.83qr.com-大乐透彩票兑奖方法| www.2716.org-轩彩娱乐注册下载| www.11134.cc-足彩竞彩网资讯| 天朝彩票www.15855.cc| www.vm72.com-江苏快三金手指预测| www.931401.com-大乐透3亿彩票图片| www.cp3637.com-体彩大乐透走势图| www.vz11.com-吉林快三贴吧| www.786547.com-下载全民赢福彩| www.460419.com-上海米兜彩票| www.111573.com-时时彩对刷稳赚原理| www.000454.com-今天6合宝典彩| www.086013.com-凤凰彩票vlll| www.151120.com-中彩威视-| www.341624.com-江苏快三微信计划群| www.872333.com-江西福彩助手是什么| www.271639.com-500彩票极速快3| www.428567.com-胜负彩500app| www.13946.com-竞彩网是不是合法的| www.69541.com-c99彩票怎么退钱| www.111073.com-福彩机过户-| www.181561.com-福彩内蒙古快三开奖| www.089667.com-时时彩如何加盟| www.295338.com-快三看走势技巧稳重| www.465486.com-清代旋子彩画图案| www.588274.com-福彩3d大盘走势图| www.zx94.com-彩虹7什么游戏| www.748208.com-中彩是黑平台| www.893114.com-时时彩什么叫屠龙| www.128942.com-福利彩票开奖直播台| www.281956.com-大乐透新浪彩票预测| www.567586.com-七乐彩玩法介绍大全| www.743738.com-福彩摇奖机工作原理| www.876546.com-体育彩票排列三玩| www.cb25.com-快三代理怎么提成| www.685827.com-银彩通工行-| www.215631.com-内蒙快三初几开奖| www.037113.com-彩票缩水软件怎么用| www.238210.com-个人玩网上私彩犯法| www.421192.com-鸿博股份彩票网站| www.732953.com-7星彩开奖历史查询| www.890684.com-青岛快三开奖| www.988526.com-幸运天天中彩票| www.oc82.com-有谁知道福彩网站投| www.32if.com-私彩举报-| www.29208.com-五星彩历史开奖号码| www.003490.com-网上买体彩行吗| www.150458.com-爱乐彩票快三| www.8882.in-体彩的什么限制了| www.71709.com-精英彩票高手网| www.108161.com-彩票可以破解吗| www.163019.com-广东福彩好彩一预测| www.14443.com-彩界过客胆组推荐| www.827611.com-什么平台买彩票安全| www.958290.com-彩票三d和值怎么买| www.cp7966.com-福彩网快三下载| www.954351.com-家彩网排三胆码预测| www.pt9.cc-派彩网怎么安装| www.365638.cc-竞彩中奖规则和奖金| www.493248.com-福利彩票天中图库| www.561908.com-山东在线彩票| www.612623.com-马来彩开奖记录| www.704411.com-足彩胜平负竞猜对阵| www.776924.com-彩宝宝iosapp| www.836650.com-vv500彩票快3| www.896557.com-博彩套利大神| www.951047.com-正彩官网-| www.996947.com-乐盈彩票登入| www.gf49.com-快三在线玩-| www.vd86.com-大发快三彩票邀请码| www.42id.com-富彩彩票手机版| www.010.host-e乐彩专业版| www.2414.xyz-福彩通图标-| www.7669.org-彩票500万真假| www.975724.com-驻马店上蔡县彩礼| www.cm66.com-双色球快三玩法| www.873455.com-体彩限量销售| www.9670.vip-全国农村彩礼法| www.nm.com-中国竞彩网官官网| www.78bf.com-境外博彩工作犯法吗| www.246680.com-重庆竞彩快三| www.494808.com-浙江快乐彩票12先| www.733854.com-九亿九彩票-| www.850470.com-足彩计算器手机版| www.271791.com-至尊彩江苏快3| www.778787.com-安彩高科最新公告| www.935729.com-彩名堂是骗局| www.027091.com-三分时时彩软件下载| www.127014.com-江苏南京快三查询| www.ex50.com-快三追号软件| www.zw33.com-八面通七彩国际影城| www.45pe.com-苹果版彩票16| www.581117.com-大发快三买豹子方法| www.807195.com-足彩倍投十连黑概率| www.980042.com-彩票店布置图片| www.gw03.com-093彩票app-| www.50cb.com-投资时时彩靠谱吗| www.0326.cn-时时彩七码稳赚方法| www.01164.com-下载彩之网首页| www.021720.com-福彩20选8走势图| www.92kk.com-分分彩挂机安卓版| www.2735.pw-分分快三贴吧| www.015007.com-七星彩选号超准方法| www.8346.cn-有没有彩票软件| www.215346.com-530快三彩票|