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天

知道了
1分快三 www.cp5268.com-北京体育彩票| www.q67.com-福利彩票的购买玩法| www.60kr.com-福建体彩开奖直播网| www.1010.net-周四开啥彩票| www.36119.com-678彩票网跑路了| www.95456.com-体彩公益金提取比例| www.074771.com-c6.com彩票-| www.173752.com-彩票黑平台排名| www.349039.com-彩票复式价格| www.456148.com-网上玩彩票赚钱| www.604044.com-全民8彩票是什么| www.693193.com-福彩规律最准| www.789268.com-鸿发彩票官网| www.878121.com-福彩走势200期| www.cp9186.com-快三的奖号怎么推算| www.qr57.com-彩票隶属-| www.18pu.com-彩票传奇杨光华| www.0337.net-福州福彩领奖地址| www.8809.pw-泉州体彩直播聊天室| www.73655.cc-彩票77是合法的吗| www.062801.com-盈盈彩开户-| www.187198.com-3132分分时时彩| www.292001.com-上海福彩基诺走势| www.428159.com-足彩11转9-| www.527678.com-时时彩跨度和尾图| www.699653.com-五分时时彩万位计划| www.095552.com-爱彩乐是不是假的| www.736968.com-海沧福利彩票网点| www.826980.com-买彩票害害死我了| www.925111.cc-淘宝怎么购买彩票| www.991117.com-tt直播快三平台| www.lf1.cc-人人中彩票-| www.ti04.com-上海福彩快三走势| www.15oe.com-c27彩票登入| www.3190.cm-福彩往期回顾| www.8934.shop-中国福利彩票93期| www.78818.com-彩票书籍夏志强| www.077499.cc-破解福彩3d妙招| www.169880.com-甘肃快3彩经| www.296571.com-彩迷网东方6开奖| www.382051.com-点击进入精彩内容| www.602364.com-送体验金的彩票| www.681522.com-沈阳市福彩中心| www.770487.com-黑彩庄家赔还是搛| www.885116.com-全球彩票下载| www.976546.com-采彩票开-| www.io75.com-今日竞彩对阵| www.g58.club-万彩-| www.62ev.com-阿里彩票手机版| www.0664.xyz-app-5星彩-| www.13498.com-555彩票-| www.72414.com-易彩宝-| www.088944.com-体育彩票店铺转让| www.169676.com-安微快三走势图| www.290047.com-今天众彩网程远杀号| www.425021.com-体彩93多少钱| www.534040.com-南涧彩票店地图位置| www.652712.com-西安多彩批发市场| www.773094.com-微彩吧赚钱是真的吗| www.883453.com-彩票计划软件开发| www.980086.com-急招彩票销售一名| www.pp0.com-福彩快三3开奖规律| www.sx43.com-买彩票网名昵称大全| www.19ki.com-泰安彩票最高奖| www.0223.cc-掌上彩票pro安卓| www.9448.vip-彩票领奖吧-| www.56776.cc-火剪彩票下载| www.031386.com-迅盈彩票网-| www.106964.com-福彩3d规则说明| www.183691.com-网上能买快三吗| www.310153.com-体彩陕西11选5| www.402660.com-新浪爱彩怎么买| www.637342.com-七彩电量显示| www.781402.com-百彩钱包-| www.885290.com-今期七星彩开奖结果| www.986428.com-上海基诺彩票开奖| www.cp7466.com-湖北快三开奖及走势| www.si78.cc-重庆时时彩1999| www.05dn.com-儿童彩铅画教师范画| www.71ih.com-竟彩足球赛果开奖| www.1574.vip-文莱28彩票合法吗| www.11258.com-最新彩票预算| www.53523.com-时时彩安卓-| www.97185.com-古建寺院彩绘图片| www.059816.com-中国彩票直播频道| www.227734.com-体彩大乐透预测号码| www.300765.com-人人中彩票怎么样| www.368890.com-福彩内蒙古快3| www.460178.com-快三分分彩全天计划| www.550224.com-上海彩票机器人投放| www.670555.com-七星彩说奖-| www.744141.com-重庆福彩抽车查询| www.812365.com-上海快三俩个和值5| www.881562.com-柬埔寨波贝博彩公司| www.974764.com-彩票新闻双色球| www.np9.com-好彩36选7-| www.ph96.com-体育彩票走势| www.8jk.com-老时彩票-| www.62vl.com-晋城福彩转-| www.0149.net-彩色资料图库| www.7884.in-好彩运88hcy| www.24508.com-k8彩票网55kk| www.65975.cc-大乐透开奖彩宝网| www.036769.com-快三拖码全中| www.121145.com-快购彩票app| www.189036.com-内蒙快三中奖号码| www.257061.com-福彩三d视频新手| www.324678.com-福利彩票管理| www.390223.com-梦见老公彩票中奖| www.551958.com-信誉度好的网上彩票| www.630089.com-彩票65616-| www.698930.com-彩铅颜色搭配技巧| www.771993.com-东方彩app-| www.874619.com-腾讯彩票官方网站| www.951435.com-彩22平台安全吗| www.999984.com-体彩大乐透资讯| www.ex1.com-中国福彩快三玩法| www.nd18.com-卓易彩票-| www.w88.win-福彩3d杀跨高手| www.47yj.com-彩票投资方案| www.448.me-彩票预测专家可信吗| www.3640.vip-福利彩有多少个号| www.8783.xyz-五星竞彩靠谱吗| www.64368.com-官方竞彩app下载| www.019323.com-遵义市彩票中心电话| www.084111.com-彩票托的经历| www.138806.com-鴻彩网-| www.207119.com-双购买双色球彩票| www.271639.com-500彩票极速快3| www.388794.com-福彩3d天牛彩报| www.504689.com-什么叫彩排-| www.567333.cc-昆山福彩-| www.627368.com-中彩1分钟1期快3| www.688488.com-微信福利彩票怎么买| www.758797.com-怎么做彩票代理推广| www.7609.pw-爱彩网app靠谱吗| www.755275.com-豪门汇彩票平台咋样| www.808336.com-举报黑彩能追回| www.18247.com-彩票小狂人-| www.452811.com-米多竞彩-| www.534422.com-时时彩一分彩走势图| www.632543.com-吉林省快三彩经网| www.693331.com-爱乐透彩票网app| www.762039.com-竞彩足球最好的软件| www.853630.com-天津电脑福利彩票网| www.909418.com-中国福彩网积分查询| www.965253.com-乐彩网众家谈| 818合彩www.www.9889hc.com| www.ay21.com-彩迷是什么-| www.pu61.com-98198彩票网| www.00zy.com-福彩快三直选玩法| www.59rn.com-七星彩排序-| www.709.mobi-新快乐8时时彩| www.4198.biz-七彩网红桥-| www.9031.loan-百度号彩票登录网址| www.64537.com-体育彩票开奘| www.065229.com-乐迎彩票正规吗| www.133854.com-六开彩网上开奖结果| www.199407.com-河南福彩3d-| www.258217.com-999彩票下载软件| www.318619.com-福彩3d鬼六图库| www.375516.com-南国体彩4十1图规| www.525553.com-福彩3d五行技巧| www.596468.com-2017年福彩和值|