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.060808.com-七乐彩推荐号码| www.530405.com-杏彩彩票-| www.411621.com-看看彩票的开奖情况| www.hp26.com-足彩单场猜比分奖金| www.402280.com-彩票摇奖机编程| www.46dx.com-经营彩票站利润分析| www.867125.com-周五是什么彩票开奖| www.964348.com-重庆体育彩票中心| www.cai2844.com内蒙古快三网站| www.673356.com-k彩平台登陆| www.79rd.com-竞彩推荐网站| www.611788.com-快乐双彩开奖公告| www.808554.com-体育彩票七星彩购买| www.950086.com-百乐彩客服-| www.xv3.cc-有靠玩彩票生活的么| www.d15.org-足球彩票第二期| www.621981.com-体育彩票合作app| www.737044.com-篮彩大小分稳赚技巧| www.836552.com-福彩3d体彩中奖号| www.920913.com-彩神登陆-| www.983243.com-众彩中彩-| www.ct44.com-优信彩票大发| www.yr36.com-竞彩5场3关-| www.29jw.com-新彩网三地字迷| www.008.la-至尊彩平台违法吗| www.059.online-三宝生活体彩真假| www.22600.cc-大学生玩彩票输钱| www.95967.cc-fbi足彩技术| www.088197.com-网上彩票压大小| www.183703.com-重庆快三是真的假的| www.115637.com-彩色水磨石地坪| www.095888.cc-竞彩彩票是官方网站| www.971049.com-幸运彩票官网下载| www.584005.com-彩票彩票预测| www.996982.com-乐盈彩票官网| www.45406.com-凤凰彩票平台找代理| www.970257.com-彩票单带带死了| www.396265.com-沂水彩虹小镇| www.234784.com-《中彩那天》课文| www.540472.com-千禧体彩试机号今天| www.178178.cc-三分快三是什么彩票| www.026844.com-八度彩票官方平台| www.50ss.com-3d彩票预测大师| www.262303.com-快三遗漏数据速查| www.976433.com-河南各地彩礼标准| www.7437.cc-手机快三软件下载| www.138502.com-时重庆时彩-| www.677100.com-河北体彩网大乐透| www.6662.biz-赢家彩票骗局| www.84507.com-十分彩网app| www.875383.com-神州彩票方下载| www.961904.com-彩乐乐p3走势图| 大赢家彩票www.602957.com| www.306960.com-贵州快三口预测软件| www.388940.com-贵州竞彩快3查询| www.510413.com-彩虹的约定歌词全词| www.49059.com-小捣蛋走势图时时彩| www.860155.com-怎样下载时时彩软件| www.943411.com-8号彩票属于正规| www.999656.com-网易彩票能用吗| www.en36.com-体育彩票购彩| www.ve13.com-江苏快三计划表| www.932205.com-大发快三哪个平台稳| www.038009.com-49am彩票平台| www.ql89.com-立彩下载链接| www.71194.com-怎么买足球彩票| 爱彩乐www.372918.com| www.330.cx-快三长龙是什么意思| www.3882.cm-生日号码彩票生成| www.827177.com-时时彩彩票宣判| www.32391.com-彩色压模地坪厂家| www.2144.me-全民彩票能提现吗| www.964190.com-十五选五预测彩乐乐| www.780081.com-福彩3d规律视频| www.931826.com-中彩网贺老师| www.753252.com-阿彩凤凰错下载| www.875024.cc-三地红五图库彩吧| www.xl76.com-甘肃体彩官网| www.79fm.com-500万网彩票| www.3019.vip-爱购彩票网官方端口| www.263290.com-发财彩票-| www.520397.com-富人买彩票-| www.943152.com-福利彩票领奖地址| www.68909.com-新浪竟技彩票频道| www.427116.com-安卓足彩软件哪个好| www.403558.com-xc6cc喜彩网| www.113580.com-成都市福彩中心官网| www.936057.com-四川乐山快三开奖图| www.995531.com-竞彩之家官网| www.gw02.com-093彩票开户| www.zz12.com-竞彩多久申请下来| www.110267.com-七星彩怎样包码| www.940700.com-飞鱼彩票-| www.442729.com-足彩蓬蓬i的微博| www.669623.com-海南七星彩投注网仔| www.845108.com-体彩足球竞猜胜负| www.967704.com-手机彩票输了3万| www.el99.com-百盈彩票邀请码| www.16dy.cc-山东体彩申请| www.11384.com-胜负彩14场直播| www.843061.com-现在福彩主任是谁| www.370758.com-宝钢彩钢瓦价格| www.692381.com-广东彩王准确资料| www.762000.com-足球竞彩258彩票| www.822029.com-中国福利彩票扫码| www.890177.com-大发时时彩下载| www.365939.cc-马可水溶彩铅怎么样| www.507758.com-中国移动短信买彩票| www.773532.com-彩票平台手机版| www.897357.com-外国有哪些彩票游戏| www.982531.com-市福彩中心在哪里| www.xq46.com-彩71彩票平台| www.300038.cc-七天彩是骗局| www.36395.cc-福利彩票有几个号码| www.92641.com-彩钢房多少钱一平方| www.34kv.com-七星彩都礼拜几开奖| www.3416.cm-天天买足彩容易| www.20942.com-彩票高手视频| www.966812.com-西安假彩票案| www.eo87.com-500万彩票网| www.t82.club-福彩3d字藏机图| www.76pw.com-黑龙江省福彩快乐| www.4466.me-彩薇花生产厂家| www.9636.biz-快乐彩任三预测号码| www.37587.cc-福彩开奖多少钱| www.73294.com-天涯明月共此时彩票| www.009064.com-瑞彩祥云注册邀请码| www.058626.com-高手彩坛一彩票大全| www.18538.cc-彩票最大奖是多少| www.832308.com-七彩云app-| www.859873.com-七星彩1000近| www.933967.com-福彩动物总动员诀窍| www.984371.com-3d开奖结果彩宝网| www.731194.com-意彩足球比分| www.650952.com-3d水彩画壁画| www.750481.com-uu彩票网app| www.800774.com-梧桐彩票网址| www.874552.com-大优彩票平台| www.941772.com-快三下级返点| www.988720.com-全民中彩票官方网站| www.co86.com-168彩票-| www.662258.com-南国七彩开什么奖| www.829711.com-官方认可的彩票软件| www.898115.cc-中国福利彩票报纸| 彩宝www.cb3988.com| www.zy75.com-彩票前景-| www.15668.cc-六给彩票香港走势图| www.0411.la-福彩中奖记录| www.b42.net-抚州市体彩中心| www.12528.com-彩票中奖哪里兑奖| www.668462.com-泰国博彩安全吗| www.569253.com-天天送彩票官网下载| www.726956.com-山东群英会彩票软件| www.816449.com-如何开一个私彩平台| www.874689.com-哪个博彩返水高| www.929882.com-七星彩还-| www.984189.com-福彩3d凤彩网| www.cv93.com-黑彩有哪些-| www.yn95.com-网上买彩票骗局| www.32cg.com-福彩星期日走势图| www.ru97.com-3分快三是官方的吗| www.748567.cc-黑彩娱乐平台| www.pb94.com-安徽快三输了| www.559007.com-11彩票app-|