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.213036.com-彩软网-| www.530898.com-彩票玩法大全| www.644771.com-体育彩票北海中奖| www.25gz.com-华彩注册-| www.16cx.com-体彩开奖公告详情| www.037.org-福利彩票3d2元网| www.4368.in-时时彩购买技巧| www.14755.com-福彩官网开奖结果| www.61551.cc-乐米彩票官方网站名| www.025417.com-时彩在线追号计划| www.854578.com-开门彩下载安装| www.969384.com-酷彩香港专卖店地址| www.cai0211.com安徽快三走势图| www.of43.com-福彩开奖双色球直播| www.21dp.com-彩金价格多少钱一克| www.96xf.com-福彩限号-| www.3426.cc-256彩票二维码| www.9358.vip-福彩事件如何爆发的| www.1730.com-腾讯分分彩五星复式| www.8106.tv-9928彩票注册| www.28911.cc-安微省快三结果| www.91618.cc-台湾好彩香烟| www.087664.com-17彩票app-| www.yc24.com-彩71彩票合法吗| www.60zw.cc-口袋彩店app官网| www.4481.cn-幻彩褪黑晚霜| www.12743.com-福彩3d之家论坛| www.76796.cc-中国官方足球竞彩网| www.686332.com-时时彩三期必中计划| www.797887.com-易彩补漆笔使用方法| www.876657.com-排三彩吧助手走势图| www.983039.com-共享彩票的邀请码| www.au84.com-快三投注平台有哪些| www.ta16.com-福利彩票有几位数| www.21qk.com-彩票合同性质| www.8638.wang-彩视为什么注册不了| www.853358.com-彩票资抖大全| www.950881.com-极速彩票app| 中国福利彩票www.6364q.com| www.883.red-彩铅画技巧-| www.02079.com-彩票输钱追回群| www.008420.com-智慧彩系列挂机| www.104733.com-中国竞彩比分| www.818784.com-菏泽福彩中心在哪里| www.932115.com-澳门快三网站| 中彩网www.71233k.com| www.if92.com-彩票店扫码出票| www.2os.com-买彩票中一注多少钱| www.987668.com-乐优炫彩百度百科| www.gl01.com-手机众彩网-| www.dy39.com-吉林快三盘有鬼吗| www.495733.com-四大博彩公司排名| www.522695.com-彩票代理返点| www.4363.org-彩博士杀码-| www.16835.cc-多彩网12选5| www.888589.com-网易彩票网址电脑版| www.980951.com-99彩票网页版| www.fw6.com-时时彩九码可以玩吗| www.006852.com-安徽体彩管理中心| www.567298.com-乐彩33软件下载| www.647910.com-四川福彩3d-| www.736391.com-好运彩网站合法吗| www.587811.com-竞彩足球官网新闻| www.668062.com-s55·cc彩票| www.383189.com-网络如何买彩票| www.587297.com-福彩七乐彩号码| www.678955.com-自学制作彩票app| www.758012.com-双龙彩票靠谱吗| www.883921.com-百姓彩票网的信息| www.962128.com-江西福彩助手ios| 500万彩票www.96386q.com| www.16219.cc-快三群有没有拖| www.et58.com-江苏快三外挂| www.12tv.com-伯乐彩票真假| www.4282.xyz-体彩五地走势图| www.433242.com-万家彩票下载安装| www.610160.com-为什么很多人买彩票| www.2957.biz-双色彩票怎么算中奖| www.514570.com-中国十大彩妆| www.588271.com-体彩排列3图谜| www.664801.com-花草彩铅画图片| www.330658.com-七天彩票网是真的吗| www.404338.com-河南彩陶王酒价格| www.521717.com-网上玩时时彩会抓不| www.597714.com-彩虹六号的高手视频| www.670376.com-百强彩票官网| www.75ql.com-算命测试彩票| www.895894.com-彩票跟单合买应用| www.980469.com-广西河池体彩中心| www.ac33.com-新疆体彩十一选五| www.f45.me-发达娱乐彩票真假| www.446687.com-彩票销售时间| www.543249.com-体彩排列三今晚预测| www.51493.cc-彩虹糖的美好寓意| www.009757.com-人人彩票官方信息| www.078818.com-七星彩单式怎么兑奖| www.65dz.com-老杨说彩字谜汇总| www.15vb.com-附近有体育彩票店| www.262.cc-体彩排三图谜总汇| www.9396.cc-新手玩哪种彩票| www.56586.com-天下彩免费资料彩| www.007166.com-腾讯分分彩走势图尾| www.081763.com-博发彩票下载| www.1689.com-百姓彩坛论-| www.594166.com-西安三彩家骗局| www.723337.com-天下彩天空彩免费资| www.872806.com-汕头彩票一等奖| www.455228.com-皇冠国际彩票赚钱| www.696.red-足球竞彩胜平360| www.683228.com-买了彩金该不该后悔| www.787667.com-彩票注册送18开户| www.870804.com-好彩l-| www.941320.com-大发彩票违法吗| www.989460.com-c乐彩-| www.ag36.cc-彩票福彩3d彩报纸| www.nr83.com-人人快三群-| www.35ml.com-最新七星彩开奖图纸| www.962046.com-福彩双色球手机摇号| 百姓彩票www.bxcp3.com| www.ji24.com-安徽快三规律破解| www.zd27.com-彩票33网址-| www.577616.com-彩虹糖颜色味道| www.197189.com-彩宝彩票下载| www.290024.com-内蒙古时时彩最新| www.359995.com-福彩快3压大小| www.31870.com-文山彩票店招人| www.86838.com-喜盈盈彩票-| www.507691.com-官方网站933彩票| www.870238.com-福彩3d胆组合| www.25339.cc-福彩3d小军第二版| www.80229.com-491彩票开奖结果| 众彩www.502892.com| www.62qp.com-彩票税率是多少| www.008679.com-中国福彩造假| www.442325.com-双色球购彩大厅机选| www.528742.com-众彩双色球专家预测| www.586182.com-天下彩票心水图图库| www.659854.com-彩票东方六加一开奖| www.754428.com-特彩4949-| www.866010.com-幸运彩票开奖查询| www.022484.com-彩票怎样看走势图| www.398747.com-福彩3d独胆高手| www.502890.com-京东快彩提现| www.915970.com-入侵私彩教程| www.974509.com-体彩大乐透最新规则| www.cai7966.com1分快三彩票走势图| www.wn79.com-甘肃快三今天开| www.97.me-博大彩票是骗局吗| www.70pw.com-芜湖福利彩票站点| www.523417.com-希腊五分彩开奖号码| www.727508.com-大福彩票算违法吗| www.783696.com-非法平台玩彩票| www.836039.com-彩票中奖了怎么办| www.889179.com-易彩苹果下载安装| www.961481.com-掌上彩49887| www.998417.com-北京彩票站怎么加盟| www.at08.com-精彩十分玩法图| www.518187.com-牛彩票网主页| www.575819.com-6288彩票网址| www.706302.com-8彩客站微信| www.765021.com-体彩竞彩结果查询| www.819193.com-彩票中奖之后上班| www.884299.com-福彩3d和值2元网| www.949074.com-抢红包彩票网站|