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.c13.com-网易彩票是合法的吗| www.92if.com-彩票店店员工资| www.046903.com-福建省体肓彩票| www.839121.com-七乐彩有什么秘诀| www.76xj.com-百胜彩票49-| www.3393.in-中国推荐的彩票软件| www.901018.com-3d天天彩图报纸| www.997715.com-体彩快中彩中奖结果| www.cp82.com-福利彩票十一选五| www.we88.com-甘肃福彩领奖| www.2gc.com-安徽体彩排烈三派送| www.80ro.com-头奖彩票下载安装| www.2907.org-买彩票动图-| www.88117.cc-彩票跟单员兼职| www.058829.com-利民彩票下载| www.139207.com-共享彩票下载| www.557850.com-彩宝怎么下载| www.643897.com-好彩票977-| www.723520.com-极速3d彩票计划| www.823978.com-搜索双彩论论坛| www.911171.com-彩域传奇专栏| www.990875.com-竞彩足球百家欧赔| www.ej58.com-3彩彩票官网| www.070358.com-大发快三时时分分彩| www.fk2.cc-查看时时彩开奖号| www.qr14.com-远洋竞猜型理财彩票| www.948069.com-众彩网排列三杀码| www.70fm.com-关于彩票的诗词| www.8275.org-中国彩票销量下滑| www.498813.com-彩票近期中奖人苏州| www.611760.com-体彩机怎么充值| www.878393.com-时时彩任四技巧| www.979641.com-七天彩票真的假的| www.fi78.com-765彩票-| www.12xw.com-王者彩票网地址| www.394321.com-足彩计算器竞彩网| www.551012.com-足球彩票合买合卖| www.028184.com-奔驰彩票网址下载| www.691308.com-竞彩牛庄-| www.828726.com-彩票808-| 金冠彩票www.49956d.com| www.g87.club-彩宝网是真的假的| www.587.win-500万竞彩投注| www.08969.cc-微信能购买福利彩票| www.96ul.com-高频彩票改-| www.321217.com-彩票开奖上期| www.71494.com-中国体彩怎么玩法| www.777651.com-大地合买彩票源码| www.25359.cc-彩铅人物笔法| www.675532.com-希望彩票app下载| www.876265.com-正规的彩票销售平台| 500彩票www.50024k.com| www.4093.org-鸿博彩票海南公司| www.gf13.com-怀表每天快三秒| www.43dm.com-彩色地坪施工| www.183979.com-快三app推荐| www.258061.com-3d彩票大赢家| www.323659.com-七乐彩历史同期| www.393324.com-多肉初级彩铅画教程| www.506677.cc-乐彩网双色球遗漏号| www.572510.com-彩票扫描对奖| www.651160.com-陈流水彩价格| www.714946.com-大发彩神争霸| www.782963.com-甘肃福彩最近中大奖| www.851308.com-收365账号足彩吧| www.907978.com-七星彩好中吗| www.966730.com-如何购买3d彩票| www.cai3666.com湖北快三今日开奖| www.44722.com-东方彩票-| www.463468.com-福彩3d形态a| www.752638.com-最新彩票平台排行榜| www.905711.com-快三高频彩网址| www.cg63.com-什么叫官方彩种| www.5gp.com-福利彩赔法-| www.037452.com-彩票行家com香港| www.06.cn-分解断组乐彩排列三| www.757.red-加拿大基诺彩谁开奖| www.8320.in-福彩佣金怎么算的| www.52213.cc-爱彩乐邀请码| www.461044.com-360黑彩平台| www.807299.com-澳门福乐彩开奖结果| www.900169.com-福建省体肓彩票| www.962903.com-澳客网竞彩比分直播| 彩票大家乐www.21202m.com| www.128041.com-最美的彩虹图片| www.741062.com-125彩票-| www.818250.com-足彩第19041期| www.903830.com-988彩票安卓版| www.962043.com-山东手机体彩| 天天彩票www.7782i.com| www.663277.com-3g彩票门户-| www.736555.com-石家庄市彩票中奖者| www.612517.com-1516彩票网下载| www.69qd.com-彩票126官方端口| www.3eu.com-两分彩计划-| www.337.pw-老彩民论坛1| www.160318.com-keno彩票-| www.251330.com-中彩彩票快3| www.365638.com-彩铅简笔画图片大全| www.471010.com-国内买境外足彩| www.552876.com-彩名堂类似分析软件| www.611447.com-长春彩吧-| www.668885.com-六彩宝典-| www.921903.com-91彩神网页-| www.980642.com-彩77app-| www.bq13.com-官方至尊彩app| www.yk67.com-吉吉林快三开奖| www.804276.com-可以买世界杯的彩票| www.908955.com-玩快彩怎样才能赚钱| www.990612.com-267彩票-| www.52oe.com-南京结婚彩礼| www.0913.vip-福利彩票杀号方法| www.966275.com-双数开彩是什么数字| 彩71www.797884.com| www.868420.com-海南至尊七星彩图纸| www.922690.com-彩客竞彩app下载| www.970257.com-彩票单带带死了| www.we0.com-排三彩宝网试机号| www.mx37.com-下载时时中彩| www.1xi.com-彩色笔芯-| www.jx13.com-吉林福利彩票快三| www.n72.com-送彩票活动-| www.49zw.cc-质量可靠的足球彩票| www.910.la-素描彩铅画图片风景| www.3814.vip-澳门六星彩资讯网| www.60wy.com-网易彩票赚钱| www.1722.vip-彩票怎么手机买彩票| www.56vr.com-遵义彩票店-| www.qw13.com-全天重庆彩计| www.120577.com-谁有博彩qq群| www.225865.com-求时时彩qq群| www.289386.com-凤凰私彩平台网址| www.359616.com-分解断组乐彩排列三| www.435094.com-3d福彩南方双彩网| www.520640.com-快三15点号码| 大赢家彩票网www.339219.com| www.og36.com-快三快赚是真的吗| www.12rm.com-福彩彩吧图库第五版| www.661793.com-全民手游彩票| www.tv0.com-彩票快三分析软件| www.41vs.com-体彩开奖排三贴吧| www.123032.com-福彩3d中奖计巧| www.4727.com-火车站买彩票| www.183785.com-全国快三形态走势图| www.250075.com-中彩高倍邀请码| www.659844.com-远途国际彩票app| www.727524.com-体彩大乐透图谜语| www.338131.com-下载超级彩票| www.865308.com-淘宝网购彩票合法吗| www.973313.com-彩虹吉他谱女生版| www.cp698.com-内蒙快三快开| www.uk88.com-彩库宝典手机版| www.22zf.com-体彩开什么号码今天| www.973715.com-500万彩软件| www.wk1.com-体育彩票开奖号码| www.uy10.com-青海福彩下载安装| www.191579.com-内蒙古快三规则| www.278781.com-优信彩票官网下载| www.0816.bid-时时彩宝宝计划下载| www.6378.cm-有没有人中过彩票| www.04062.com-全中彩票真的假的| www.59455.cc-彩铅手绘花朵| www.010616.com-熊猫彩票是什么| www.14wq.com-博牛彩票怎么提钱|