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天

知道了
大发PK10 www.92iv.com-代打彩票的的制度| www.7550.vip-中国竞彩网怎样注册| www.24349.com-超级彩票软件| www.72366.cc-福彩双色球投注手机| www.wl37.com-中彩啦app安卓版| www.22jc.cc-天空彩禁肖| www.548.me-现在手机能买彩票吗| www.5431.top-彩票领奖作假| www.494434.com-赢钱彩软件是真的吗| www.599029.com-彩票必须去店里买吗| www.798883.com-彩8彩票下官网| www.788410.com-19042足彩分析| www.9360.pw-彩票官员全部都要抓| www.199985.com-体彩十一选五任选三| www.919.xyz-7星彩号码机选| www.6980.vip-彩票不好中奖| www.ah31.com-延边快三动态走势图| www.172956.com-1分快三开奖记录| www.0500.cn-福彩大家乐游戏规则| www.8989.mobi-牛彩一句定三码9| www.259731.com-模拟彩票的软件| www.370151.com-排列五走彩宝贝| www.71992.cc-世界杯足球竞猜彩票| www.028824.com-彩神钱提现不了| www.123710.com-七彩乐近期开奖| www.290602.com-赤峰快三开奖走势图| www.369705.com-彩票中五位数有奖吗| www.466658.com-洛杉矶国际快三网址| www.551380.com-唐龙今日说彩| www.681804.com-黑龙江体彩22选5| www.762648.com-爱乐彩湖北十一选五| www.854231.com-时时彩8码复式倍投| www.310302.com-新浪彩票大乐透| www.425400.cc-彩经网遗漏数据查询| www.558398.com-彩铅画卡通小动物| www.637204.com-彩虹民用无人机| www.728271.com-财神彩票登陆| www.805760.com-9号彩票下载| www.881549.com-辉煌彩票h-| www.975034.com-七乐彩杀号定胆专家| www.bb7.com-彩票投注倍数技巧| www.994748.com-好彩客app苹果版| www.qk52.com-中原彩票合法吗| www.583901.com-送彩金平台大全| www.492081.com-广东体彩ⅱ选5| www.587013.com-鸿运来彩票官网| www.661719.com-旺彩可以买彩票| www.776074.com-在时时彩输了怎么办| www.913161.com-彩票2元网杀号定胆| www.985122.com-人福利彩票-| www.cp9393.cc-750彩票-| www.2346.pw-福彩体彩今开奖号码| www.015681.com-七星彩中二等奖领奖| www.156995.com-彩票兑换期限| www.963519.com-彩库宝典图库大全| www.cp6266.com-体育彩票36选7| www.2286.vip-哪些平台上能买体彩| www.635265.com-飞鱼彩票算法公式| www.1297.vip-哪个彩票app靠谱| www.215911.com-湖北百宝彩-| www.241168.com-彩客网下载-| www.359889.com-三亚打击私彩| www.6231.biz-福彩欢乐十选五| www.874254.com-彩票程序搭建| www.967296.com-福彩双胆2天计划| www.gs4.com-体彩481走势图| www.365640.cc-竞彩足球投注网赠送| www.81482.com-红旗彩票平台怎么样| www.075224.com-福建省体彩31选7| www.16259.cc-彩民村心水论| www.94158.com-福利彩票店宣传语| www.103624.com-用手机买彩票安全吗| www.197412.com-马来西亚彩票可靠吗| www.438159.com-哪里可以网上购彩| www.553040.com-福彩3d高手论坛| www.975154.com-网上快三的套路| www.12xr.com-体育彩票纸的大小| www.028.in-芽彩彩票-| www.8778.top-福彩中心主任贪污| www.211480.com-职业玩福彩快3| www.759195.com-微彩吧是做什么的| www.837440.com-今天竞彩单关| www.901859.com-重庆时彩最快开奖| www.995871.com-80彩票是骗人的吗| www.br59.com-内蒙体彩快三| www.si02.com-竞彩足球比分真播| www.cp0027.com-快三开挂软件免费版| www.3mr.com-彩八彩票哪的平台了| www.81ft.com-综艺福彩合法吗| www.25919.cc-gay彩色旗-| www.82904.com-福彩体彩开桨| www.053876.com-yy彩票登录线路| www.42.cx-怎么注册87彩票店| www.89ab.com-凤凰彩票私彩平台| www.3105.vip-太原彩票站转让信息| www.02ay.com-彩虹的颜色七种| www.68yu.com-华彩生活app下载| www.1216.xyz-华彩控股股价| www.7862.com-足彩全包过滤条件| www.23944.com-怎么戒彩票网| www.65685.com-彩票双色球模拟开奖| www.046977.com-粤淘彩票是真的吗| www.120200.com-雪缘园足彩比分雪| www.240003.com-彩神8下载手机版| www.383088.com-县城体彩刮奖| www.40ko.com-体育足球竞彩网站| www.5203.top-赵立群彩票-| www.7629.biz-体彩图标大全| www.793030.com-彩票九合法吗| www.45858.cc-190彩票-| www.57585.cc-ag彩票骗人吗| www.826033.com-超级彩票专业户| www.134.date-本子漫画全彩图片| www.535208.com-vr彩开奖号-| www.628944.com-彩票开奘查-| www.b98.club-七星彩大奖软件| www.565103.com-500万彩票怎么样| www.662032.com-熊猫彩票能赚钱吗| www.800809.com-3d就业时报彩图版| www.869051.com-百福彩票是什么| www.945843.com-乐米彩票注册| www.987388.com-七星彩怎么手机投注| www.cp9596.com-快三中奖金额是多少| www.856078.com-苏州体彩苏州| www.922396.com-国家竞彩培训师考试| www.991966.cc-福利彩票如何购买| www.ck5.com-分分时时彩计划| www.551326.com-竞彩4场进球| www.682517.com-体彩中心官方网站| www.384242.com-体彩竞彩宣传标语| www.678131.com-福盈门彩票网| www.540024.com-七星彩几点不能买了| www.798862.com-下截一个体彩福彩网| www.866548.com-周日哪些彩票开奖| www.958406.com-中彩手彩票客服电话| www.52579.cc-福彩江苏快3一定| www.84334.com-今天福彩3d布衣图| www.665133.com-七星彩那几天开奖| www.738100.cc-好运快三下载app| www.822771.com-手机上怎买福彩| www.914211.com-体彩大乐透11选五| www.981515.cc-全民乐彩票app| www.sk2.com-快三开奖河南结果| www.pn53.com-乐彩网摘-| www.02225.com-老公爱买彩票怎么办| www.6ue.com-和彩这个词对吗| www.49128.com-旭彩美缝剂电话号码| www.87785.cc-七星彩被骗了怎么办| www.08421.com-陕西福彩网开奖结果| www.62873.cc-彩经网排三胆码预测| www.509165.com-广发彩票_主页| www.968.cm-七乐彩摇奖出球顺序| www.761706.com-七乐彩胆拖投注玩法| 发彩www.50732g.com| www.566741.com-博彩买单双技巧| www.655613.com-五福彩彩票软件下载| www.741255.com-577彩票平台好吗| www.798298.com-海南福彩额度| www.871170.com-天际彩票是不是骗局| www.920467.com-双彩网论-| www.964706.com-怎么看彩票中奖| 购彩之家www.gczj6.com| www.mb2.cc-体育彩票快三玩法| www.04ye.com-七乐彩开奖顺序出球|