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.lm25.com-手机彩经网-| www.82gb.com-中国移动和彩印| www.4994.biz-双色球开奖福彩| www.45461.com-微彩排列5下载| www.4158.net-七彩网络查成绩注册| www.41551.com-阿彩凤凰错下载| www.004708.com-中国七乐彩开奖信息| www.78ar.com-足球彩票亏-| www.193198.com-韩国福彩-| www.427714.com-福彩3d八宝饭预测| www.865812.com-时时彩注册送彩金| www.984019.com-官方购彩平台下载| www.dl88.cc-代人玩快三是骗局吗| www.3gb.com-小伙彩票过期| www.692819.com-体彩3p图谜第一版| www.786823.com-极速秒秒彩平台网址| www.tg57.com-彩票和值怎么研究| www.551490.com-彩乐网香港骞马会| www.766496.com-上海快三三同号预选| www.4411.online福彩3d选号技巧| www.22528.com-彩票驿站有被骗的吗| www.86567.com-福彩绝杀和值尾| www.051237.com-足彩圈app-| www.302386.com-七星彩规律图今天| www.282366.cc-小鹿彩票app| www.390075.com-买彩票中几十万| www.522992.com-腾讯nba彩票分析| www.964187.com-网上购彩票平台| www.cai8599.com厦门快三开奖查询| www.wh24.com-91彩神福彩快三| www.30rq.com-周五开什么彩票| www.326711.com-古建彩绘图案| 发彩www.50732j.com| www.87eo.com-乐彩静态版手机| www.3358.tv-彩票排列5计算算法| www.22121.cc-名彩票-| www.746637.com-彩神江苏快三破解版| www.833198.com-口袋彩店如何下载| www.239511.com-江苏快三把我坑死啦| www.387405.com-日本时时彩太假| www.593291.com-口袋彩票下载安装| www.444484.com-福彩3d的规则| www.561331.com-彩票代理诈骗| www.lv69.com-竞彩258手机版| www.794.date-九宫飞星预测彩票| www.8528.bid-金龙彩报-| www.65558.cc-彩票下载什么软件好| www.026382.com-678彩票邀请码| www.xz44.com-k8彩票网-| www.76nx.com-七星彩截止购买时间| www.2610.cc-惠彩乐购彩票| www.9201.vip-福彩三d推荐号| www.47461.com-9811彩票下载| www.98238.com-三地福彩今天试机号| www.057653.com-福彩3d资料大全| www.02844.cc-ok彩票是黑平台吗| www.55067.com-恒彩彩票下载安装| www.000239.com-头条网上的彩票| www.183516.com-中国福彩种类及玩法| www.zb13.com-福彩3d四码等于1| www.46xi.com-彩票站布局效果图| www.151590.com-u9彩票网谁提过现| www.297872.com-人人都中彩-| www.5189.com-体育彩票35选七| www.41985.com-彩票害人不浅| www.022116.com-微彩票下载安装| www.781130.com-福彩十分钟规则| www.880214.com-佳木斯喜乐彩开奖号| www.800570.com-快钱彩票怎么玩法| www.902157.com-黑彩犯法不-| www.963864.com-在线买彩票的软件| 易彩网www.390675.com| www.24cp.com-彩带拉花-| www.2022.vip-丰大彩票-| www.9798.net-福彩3d什么时候开| www.37795.com-开个彩票网站多少钱| www.513116.com-爱购彩快三-| www.605873.com-吉林福彩中心电话| www.683780.com-有什么购彩平台| www.772990.com-鬼谷子六台彩宝典| www.854220.com-多彩网手机版下载| www.678192.com-福彩三d形态| www.784242.com-乐多彩票官网| www.873963.com-贵阳福彩网上申请| www.979084.com-好彩香烟哪个好抽| www.eu92.com-休育彩票开奖公告| www.2zp.com-上海福彩基诺| www.086298.com-分分彩五码简单技巧| www.192875.com-哪个彩票软件最好| www.269039.com-彩票里面的砍龙| www.80928.com-排列五彩票图片| www.024111.cc-彩迷什么意思| www.099572.com-快三开挂器下载软件| www.cc35.com-快三代理申请| www.615009.com-韩国彩票中奖者| www.700318.com-优信彩票在线登陆| www.796314.com-彩尊是不是黑平台| www.870063.com-江苏快三多少期| www.928797.com-七星彩奖图局王| www.984226.com-c58彩票安卓下载| www.cp1692.com-内蒙古福彩快三代购| www.lf20.com-彩19-| www.c23.club-网易彩票又可以买了| www.206563.com-体彩屋购彩大厅| www.340539.com-福彩4d开奖时间| www.328922.com-吉林快三一百期走势| www.364967.com-彩虹音谱周杰伦| www.485913.com-好运彩开奖结果| www.567995.com-七彩野山鸡养殖视频| www.306769.com-天津体彩中心| www.76uf.com-神彩网三中三| www.wk22.com-中彩在线手机版| www.799252.com-体彩打印纸-| www.874474.com-福彩快三官方网投诉| www.977236.com-濮阳县定亲彩礼| www.bd06.com-私彩平台万博| www.rz06.com-赌彩票输了50万| www.04.org-微信买体育彩票| www.62cl.com-今日足彩直播分析| www.625613.com-牛彩3d谜-| www.778945.com-3d银海彩报-| www.861342.com-体育彩票任三| www.10798.com-竞彩足球在线购买| www.975640.com-彩礼看出人品| www.cp9033.com-专业购彩彩票平台| www.09ve.com-爱购彩票安全吗| www.0023.com-买彩票一共多少数字| www.10122.com-腾讯5分彩免费计划| www.65gp.com-彩票预测微信公众号| www.712281.com-外国人结婚要彩礼吗| www.802575.com-甘肃福利彩票查询| www.872509.com-河北体彩大乐透| www.932355.com-输钱的快三-| www.974178.com-购彩票软件哪个好用| 彩票坊www.338218.com| 大赢家彩票网www.54400r.com| www.20188.com-竞彩兑奖规则容错| www.77392.cc-财政部彩票最新消息| www.633350.com-竞彩篮球2串1专家| www.5792.biz-竞彩过关方式2×1| www.654267.com-彩票要怎么买才能中| www.799320.com-大钱庄彩票下载| www.861697.com-赢彩助手-| www.906618.com-彩票平台送彩金39| www.956292.com-大旺彩票应用| 百姓彩票www.zuan333.com| www.518119.com-福彩如何算中奖| www.234371.com-互联网彩票倒计时| www.362886.com-体彩国庆放假| www.151688.com-彩乐汇注册-| www.252696.com-大中华彩票计划网| www.606211.com-全天重庆彩计划独胆| www.817168.com-比分开奖澳客彩票| www.913738.com-万彩网正规吗| www.988915.com-家彩网千禧开机号| www.33sw.com-七星彩昨晚出什么奖| www.1804.xyz-重庆快三玩法介绍| www.61nl.com-福彩3d杀跨走试| www.496675.com-彩站宝和彩店宝| www.44vr.com-uc彩票官方网| www.062038.com-彩票预测最精准公式| www.238535.com-彩票选号历史对比器| www.067959.com-辉煌彩票是什么| www.167906.com-彩票快三规则|