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天

知道了
新2彩是不是黑网址 www.494503.com-博彩公司利记| www.828297.com-春天彩票下载| www.917758.com-七星彩内部打击私彩| www.664534.com-油性彩铅风景效果图| www.789533.com-竞彩对冲赚佣金| www.875970.com-新淘彩-| www.35132.com-数字型彩票追踪大小| www.90935.com-香港商报晚晚好彩| www.994422.cc-非法经营彩票网站罪| www.fg16.com-快三对子投注技巧| www.t59.club-武汉市彩票兑奖中心| www.ot13.com-用手机买彩票合法吗| www.901776.com-休彩排到五开奖结果| www.989121.com-打击黑彩福彩3d| www.as26.com-彩票走势规律讲解| www.t51.cn-武汉市福彩中心地址| www.83bf.com-移动和彩印怎么设置| www.pw34.com-71彩票app-| www.62hq.com-名人彩票app下载| www.4255.cn-优乐彩会不会踢人| www.284107.com-沉迷彩票的下场| www.395938.com-周六什么彩票| www.75jv.com-河南体彩481彩友| www.2262.cn-彩票赛车技巧| www.841054.com-彩妆图片-| www.924713.com-中国彩票第一大奖| 彩神购彩www.csgc6.com| www.744998.com-大赢家彩票网站首页| www.840403.com-竞彩足球平均优化| www.785096.com-福彩官员贪污| www.169049.com-福彩3d预测-| 凤凰彩票www.452816.com| www.100170.com-懂彩帝改名了| www.205586.com-甘肃快三遗漏一定牛| www.q20.net-lg传统彩票网站| www.984196.com-今日太湖字谜多彩网| www.5585.pw-套彩什么意思| www.124292.com-河北快三开奖时间表| www.58589.cc-玩彩网真假-| www.246988.com-中国福彩快三网| www.r45.biz-福彩3d彩500| www.935292.com-彩票软件苹果版| www.099511.com-彩票摇奖机苹果| www.5xq.cc-美国劲球彩票号码| www.892531.com-彩票榜网站-| www.738628.com-58.cc赢彩网| www.97ra.com-9万彩票官网苹果版| www.11649.com-大发快三注册| www.062824.com-福彩3b天齐网字谜| www.180389.com-幸福快三是合法的吗| www.ks01.cc-彩票快3群-| www.078831.com-牛彩票是什么意思| www.348005.com-西安彩票机转让| www.933606.com-哪里可以买电竞彩票| www.147899.com-163彩票正规吗| www.ki77.com-辽宁体彩网官网| www.090578.com-体彩排列5走势图表| www.vb46.com-青岛福利彩票兑奖处| www.346441.com-李彩桦图片-| www.528590.com-福建31体彩走势图| www.cp5022.com-福彩快三怎么玩的| www.356474.com-淘宝可以送彩票吗| www.65150.com-西宁福利彩票领奖处| www.34894.com-福彩3d开奖结果| www.105038.com-709彩票平台安卓| www.2723.win-上饶市福彩兑奖中心| www.32897.cc-中国体彩江苏官网| www.5966.cm-著名彩票网站| www.252013.com-送彩金32元可提款| www.468566.com-2元彩票刮刮乐| www.389713.cc-天天中彩票竞彩足球| www.133151.com-宝马彩票手机版下载| www.161586.com-竞彩足球可以买哪些| www.353642.com-福利彩票谁发明的| www.534448.com-五行绝算彩票电子版| www.661365.cc-哪个大学有彩票专业| www.788438.com-七星彩专家推荐号| www.919562.com-网上买彩票有赢的吗| www.448342.com-重庆国彩网-| www.817642.com-足彩19021任九| www.959204.com-福利彩票站出租| www.93722.cc-9亿彩票软件| www.105599.com-晚晚好彩今期买什么| www.234955.com-下载福彩软件| www.352762.com-七彩乐今日开奖号码| www.456039.com-手机玩福彩-| www.683365.com-天天快三彩票网51| www.153109.com-时时彩四胆10中九| www.584285.com-人人中彩票客服| www.698250.com-温州体彩阳光征召| www.818164.com-19041期足彩| www.935352.com-苹果彩票网~手机版| 彩吧www.586960.com| www.un22.com-福彩3d3天计划| www.2086.wang-苏宁体育彩票加盟| www.31935.cc-金誉彩票app| www.066132.com-统一彩票兼职| www.198784.com-福彩快乐十分玩法| www.331478.com-高手网免费港彩资料| www.zq30.com-彩报网图库| www.647039.com-竞彩必杀组合| www.833357.com-口袋彩店店铺二维码| www.95500.cc-足彩直播胜负直播| www.188597.com-爱彩乐上海-| www.333101.com-怎样查福彩中奖号码| www.z33.top-彩票站前景-| www.2064.shop-赛车彩票真的假的| www.647769.com-95快彩app软件| www.766186.com-甘肃酒泉福彩快三| www.68117.com-买足彩和赌博的区别| www.118060.com-电脑福利彩票查询| www.250357.com-中彩zc38-| www.406380.com-描写彩虹美的的词语| www.571579.com-87彩店手机客户端| www.cai9399.com贵州体育彩票官网| www.325193.com-云购彩票主页| www.958046.com-3d福彩网上购买| www.32429.com-国家关于彩礼钱政策| www.182317.com-中国竞彩网竞彩| www.530364.com-时时彩七码选号技巧| www.712108.com-结婚彩礼和嫁妆| www.838315.com-专业玩彩双色球| www.952564.com-福彩短信投注指令| www.cp822.cc-福彩快三苹果版软件| www.230544.com-福利彩8输了| www.b25.club-江西快3爱彩乐| www.7584.biz-新浪爱彩安卓| www.098399.com-福彩王云戈判刑了吗| www.083511.com-彩票可以网上兑奖吗| www.243216.com-中国体育彩票网官网| www.489100.com-四川福彩招聘岗位| www.611973.com-青岛莱西体彩转让| www.710334.com-加微信玩彩票| www.805738.com-彩98下载-| www.ol92.com-中彩网双色球走势表| www.387521.com-手机膜有彩色| www.887744.com-靠谱彩票平台| www.240773.com-老版彩库2015| www.334579.com-彩票网提现不了| www.421977.com-广西福彩网快乐十分| www.552005.com-福彩快开多期| www.751423.com-2元彩票邀请码| www.861974.com-福彩出奖号-| www.957822.com-一分快三预测器| www.tb17.com-买哪种彩票好| www.907.tv-彩票速赚攻-| www.8127.top-体彩末位淘汰办法| www.64458.com-竞彩篮球软件哪个好| www.ed0.com-彩票20分钟一期| www.x01.com-能试玩的彩票网| www.948.cc-七星彩中奖最高纪录| www.406644.com-济南结婚彩礼| www.590217.com-竞彩足球买法| www.710557.com-最新彩票套利项目| www.16316.cc-网易彩票安全可靠吗| www.353519.com-福彩专家杀号2元网| www.583029.com-3d福彩彩宝网| www.756375.com-7星彩直播开奖| www.2318.com-好彩2复式-| www.075565.com-吉祥彩最新登录地址| www.304018.com-甘肃福彩中心官网| www.441794.com-彩票开奖结一果| www.533290.com-彩票均衡原理实战| www.876696.com-体彩p3开奖视频|