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.123106.com-福彩3d囚氏杀号法| www.965579.com-网络彩票不给提款| www.208869.com-5分快三害死人| www.16215.cc-中国竞彩网中国警察| www.990227.com-77彩票骗局-| www.681794.com-909彩票-| www.776885.com-快三拉花教学视频| www.899266.com-彩票中奖恶搞神器| www.971233.com-彩c16app-| www.zj19.cc-鑫彩网是黑平台吗| www.601568.com-怎么买彩票赚钱| www.724738.com-真有中彩票的人吗| www.801036.com-银海彩票图1234| www.876426.com-五百万彩票开奖结果| www.952531.com-k彩登陆联系客服| 淘彩赢www.80779.com| www.365184.cc-红中彩票会员登录| www.141939.com-3d开奖结果彩宝网| www.268929.com-5分彩怎么看号码| www.57853.com-破解彩票漏洞软件| www.55092.com-晶彩靓研美白祛斑霜| www.3859.biz-苏宁彩票门店| www.05505.cc-天天快三彩票网51| www.593808.com-七彩云怎么投屏| www.483678.com-掌上购彩怎么提款| www.qb28.com-顶级彩票app| www.18rr.com-泰安体彩大乐透3亿| www.556477.com-彩票491cc-| www.641421.com-台湾五分彩开奖记录| www.8435.cm-体彩排列三3码遗漏| www.73sf.com-福彩三的试机号今天| www.01062.com-湖北快三是什么样的| www.834909.com-炫彩油画骗局兼职| www.891900.com-每日彩票app| 众乐彩票www.587244.com| www.066596.com-福体彩开奖直播话题| 中国福利彩票www.08588w.com| www.dp75.com-玩快三会不会有影响| www.q95.cc-体育彩票如何看| www.44qd.com-福彩3d魔图分布图| www.pa77.com-彩票竟技风暴| www.536126.com-美国乐透彩票中奖| www.358411.com-生肖彩一分钟一期| www.083018.com-快三的秘密-| www.987698.com-106彩票最新版本| www.vw65.com-福彩三码遗漏| www.586786.com-微彩吧计划-| www.666425.com-乐彩站是什么网站| www.741706.com-2019快三交流群| www.811157.com-彩票的中奖概率是| www.947483.com-福彩双采图双彩论坛| 幸运彩票www.5095r.com| www.305088.com-福彩3d35期-| www.636644.com-妖刀姬43内彩| www.751441.com-淘之家彩票-| www.873363.com-大乐透彩票方法| www.73oi.com-彩票3大推荐| www.4413.cn-福利彩票倍数怎么打| www.88581.com-永信218彩票下载| www.5658.pw-体彩排三今曰中奖号| www.06759.com-彩票软件pk10| www.180225.com-大发快3彩票| www.274621.com-你们玩快三玩什么| www.345014.com-下载彩票行家com| www.429362.com-彩鹰马桶结构| www.535573.com-彩票中奖的人多吗| www.607650.com-cp彩票apk-| www.676839.com-彩色包装盒印刷价格| www.761344.com-好彩香烟1871红| www.893332.com-彩票筛选安卓| www.970494.com-福彩排列期开奖号码| 中华彩票www.897957.com| www.oq82.com-彩票众众-| www.x73.club-彩票投诉平台| www.904158.com-彩票合买怎么分钱| www.974886.com-海南体彩app坑人| www.cp9122.com-天天中彩票app| www.mt26.com-中彩网历史开奖软件| www.938969.com-网络足彩单场在哪买| www.988656.com-下载期期彩-| www.277772.com-国外高频彩-| www.691370.com-2019足彩软件| www.636926.com-彩虹旗表情-| www.739379.com-山东体彩站点查询| www.828697.com-彩票站兑奖会被骗吗| www.447964.com-澳洲3分彩开奖计划| www.544859.com-长沙市彩票店转上| www.795.me-买彩票用加倍法能赢| www.96318.cc-民政部中国福利彩票| www.25vc.com-体彩彩票大管家官方| www.835.xyz-东方彩票网网址多少| www.766187.com-柒鑫彩票骗局| www.843159.com-足彩大赢家微博| www.937552.com-辽宁福彩禁止充值| 七星彩票www.66qxc.com| www.502111.cc-093彩票安全吗| www.700080.cc-五百彩票网雪球| www.782901.com-福运彩官网-| www.34hh.com-足彩奥克网-| www.1303.me-体育博彩app下载| www.91dd.com-网上彩票提现骗局| www.154110.com-博雅彩票手机版| www.290358.com-內蒙体彩-| www.55069.com-恒彩彩票软件下载| www.3295.biz-彩经网排三走势| www.036355.com-九七年彩银熊猫银币| www.845466.com-体育彩票发行成本| www.983231.com-网络彩票是赌博吗| www.695014.com-竞彩篮球开奖查询| www.820069.com-福彩票8676-| www.947615.com-彩票投注方式| www.cp3811.com-快三中奖助手app| www.846677.com-彩票中奖真假| www.954570.com-61彩票开奖结果| www.ey17.com-重庆时时彩苹果版本| www.549717.com-胜负彩网上哪里买| www.678259.com-万彩吧双色球玄机图| www.804033.com-福彩字谜总汇正版| www.1494.pw-雨后彩虹的头像图片| www.8059.loan-福彩28日开奖结果| www.633077.com-网上怎么买篮球彩票| www.cai5944.com甘肃快三今日走势| www.44679.com-福建体彩论坛2中1| www.008110.com-彩票挂机软件教程| www.92473.com-竞彩比分奖金上限| www.129750.com-彩票41期-| www.106617.com-w上海快三-| www.597284.com-四海乐购彩票官网| www.328760.com-免费申请领取彩金| www.747187.com-天天爱彩票安装| www.877863.com-福彩20选5开奖| www.965045.com-彩七七安卓-| www.cai638.com-快三助手北京快三| www.024043.com-台湾五分彩官方网站| www.403383.com-星座彩票幸运号| www.cv87.com-自学入侵私彩网| www.302721.com-湖北快三天天彩经网| www.390838.com-全彩漫画母系怀孕| www.e33.com-七乐彩票开奖结果| www.350448.com-陕西福彩十分开奖| www.497900.com-珍爱网博彩-| www.749609.com-罗彩-| www.212879.com-好的私彩平台| www.128133.com-手机福彩客户端| www.221111.com-安徽快三形态走势牛| www.305569.com-实体店买彩票| www.381035.com-彩票开奖票开奖| www.497678.com-怎么买大发快三和值| www.576905.com-鸿运彩票苹果版下载| www.653281.com-福彩8炫彩奖金| www.740572.com-澳门彩票手机投注网| www.812628.cc-分分快三福利彩票| www.886586.com-微信女骗买彩票| www.959521.com-易彩大小技巧| 500彩票网www.607663.com| www.pl86.com-时时彩一期必中计划| www.57sc.com-花呗可不可以买彩票| www.2381.in-七彩西游记在线豆丁| www.8815.xyz-福利彩票七乐彩机选| www.44599.com-福彩6加1走势坉| www.006124.com-江苏体彩前三直| www.639754.com-泰国的彩票传销| 易彩集团www.25688l.com| www.141939.com-3d开奖结果彩宝网|