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.9053.biz-优彩网官网登录苹果| www.0mc.cc-天天竞彩安卓版| www.330658.com-七天彩票网是真的吗| www.537.red-腾讯时时彩网址| www.17990.com-六爻测彩票秘法| www.011056.com-3d彩网-| www.15ht.com-彩票咋看中奖| www.65vd.com-完美彩票网站是什么| www.23fx.com-福彩乐彩论谈| www.0345.pw-最近福彩站-| www.7863.shop-机选胜负彩-| www.37991.cc-棒棒彩票注册| www.929661.com-七星彩杀头杀尾| www.64ej.com-仆先生全彩-| www.li26.com-今日彩票apk| www.410342.com-彩票大蠃家官网| www.828227.com-吉彩宝下载中心| www.14uo.com-福彩3d彩票过客| www.604436.com-买网络彩票一直输| www.28tv.cc-网彩何时开售| www.064926.com-彩铅画简单卡通人物| www.247838.com-顶尖彩票-| www.907833.com-高频彩票投注平台| www.ur95.com-玩快三赢钱了| www.630.in-时时彩奖金调节| www.786959.com-盛兴彩票v1登陆| www.340005.com-彩票中大奖人的生活| www.912391.com-可靠的购彩app| www.01nb.com-羽泉《彩虹》吉他谱| www.026875.com-辉煌彩票下载| www.on73.com-七乐彩中奖号码表1| www.18ye.com-7乐彩开奖出球顺序| www.071.win-宝利彩票网址| www.3814.vip-澳门六星彩资讯网| www.ni80.com-中国足彩网官方网址| www.322759.com-国彩网是骗局吗| www.773954.com-英国分分彩-| www.1818.live-优博时时彩平台登录| www.9647.xyz-查全国彩票开奖查询| www.539103.com-旺彩平台注册吧| www.589620.com-17146期足彩| www.990830.com-彩票1分快3公式| www.070084.com-快彩3江苏-| www.383551.com-黄家彩世界下载| www.567286.com-江苏体彩网app| www.69371.com-大乐透彩票多久过期| www.385753.com-166彩票网下载| www.20620.com-大发快三大神带回血| www.12gb.com-七彩色染发图片| www.855073.com-中奖彩票故事| www.957030.com-有没有彩票挂机软件| 500彩票www.50052v.com| www.ie27.com-江苏快三投注计划群| www.f12.in-乐彩彩票app| www.692677.com-如何开网络彩票平台| www.487746.com-彩托是怎么回事| www.591062.com-竞彩购买网站| www.666718.com-乐彩客怎么样| www.734434.com-3d杀号定胆凤彩网| www.777365.com-e球彩助手-| www.972232.com-大众彩票合法吗| www.3303.vip-体彩排列三有规律吗| www.0979.cc-优彩网买大买小| www.339749.com-彩吧库图55125| www.67667.com-党员中彩票怎么办| www.8581.me-彩票网易专家杀号| www.09847.com-体彩七位数今晚开奖| www.86833.com-广州鸣彩官方网站| www.ha5.com-玩彩胆神-| www.932691.com-正规快三app| www.061235.com-浙江福彩官方网站| www.599757.com-彩票650-| www.92bq.com-刷竞猜赚彩金| www.62710.com-彩票网站提款手续费| www.16217.com-福彩双色球开奖规则| www.37400.com-随便买彩票能中吗| www.076721.com-福利彩票三d是机号| www.206936.com-152彩票是否正规| www.350595.com-欢乐快三开奖| www.452586.com-体育彩票一年销售额| www.560073.com-澳门快三规律| www.629796.com-三位数字彩票怎么买| www.713377.com-手机购大乐透彩票| www.799967.com-33cc彩票网站| www.881647.com-网易彩票走势图表| www.663926.com-7星彩开奖app| www.758617.com-电玩挣钱软件送彩金| www.844813.com-发福利彩票的意义| www.0660.loan-福彩三十五选七中奖| www.258052.com-福利彩票北京快三| www.444100.cc-福彩3d和跨-| www.121165.com-微信彩票群揭秘| www.284065.com-有彩色系-| 顶级娱乐www.047788.com| www.fj65.com-福彩3d跨度表| www.029710.com-内蒙古体彩中心主任| www.212689.com-88彩票骗局-| www.368796.com-728彩票是骗局| www.539031.com-众乐彩提现多久到账| www.686696.com-建设银行中彩啦| www.oq83.com-热购彩票网手机版| www.nw8.com-一定牛彩票走势图| www.368952.com-彩神网是骗人的吗| www.527393.com-中彩网双色球讨论区| www.663447.com-智胜彩票软件下载| www.860979.com-好彩1开奖时间| www.984396.com-安徵快三时时彩技巧| www.76cy.com-竞彩单票限额| www.wu56.com-天天爱彩票升级维护| www.122956.com-挪用福彩公益金| www.978679.com-天天福彩重听在线| www.45nj.com-鼎盛买彩票正规吗| www.21361.com-网上玩彩票的靠谱吗| www.42399.cc-下载k彩游戏2.0| www.04hr.com-手机玩快三的网址| www.0772.in-送彩金70-| www.130818.com-七星彩最精准预测| www.502132.com-能投注的网上彩票| www.616229.com-体彩11选5乐玩法| www.363588.cc-彩虹的颜色有顺序吗| www.12nc.com-富彩彩票是合法的吗| www.79wi.com-分分彩挂机方案制作| www.1231.date-彩票计划软件网| www.8050.vip-云南时彩开奖记录| www.23238.cc-国彩合买是骗局吗| www.xm71.com-正规竞彩-| www.14jd.com-怎么算3d彩票和值| www.419448.com-m彩色香烟图片| www.712952.com-cpcp彩票平台| www.785786.com-七星彩预测最准专家| www.851250.com-时时彩投注单笔3万| www.898539.com-3d彩吧彩民乐| www.951312.com-玩分分彩心得| www.986478.com-一号彩票提款安全吗| www.gp3.com-网络平台彩票快三| www.ks23.com-快乐彩一定牛| www.xq14.com-附近彩票投注站| www.580712.com-中午买彩票的人多吗| www.673996.com-古建彩绘颜料| www.739977.com-福彩3d今天什么号| www.803330.com-五彩戏娃全集20| www.865346.com-大奖网彩票020| www.922832.com-福彩代销证变更| www.970480.com-分分彩胆码技巧| www.111811.com-五亿彩下载-| www.52jr.com-一分彩彩票网| www.051080.com-真实有效的彩票网站| www.814808.com-安徽中彩网-| www.892741.com-成化薄胎珐琅彩| www.nu95.com-吉林快三走势图今天| www.023667.com-七乐彩在线直播| www.101826.com-彩票合买骗局| www.34ow.com-彩运来官网登录下载| www.672115.com-三d风云彩票| www.730709.com-足球彩票2串1技巧| www.785692.com-华彩彩票官方网站| www.837961.com-105彩票平台下载| www.882434.com-易彩网代玩有啥风险| www.737791.com-彩吧走势图-| www.798078.com-辽宁彩票11选5| www.324258.com-乐彩充值到个人| www.937901.com-云彩店下载-| www.787877.com-01彩票如何提现| www.77506.com-必赢彩票还能用吗|