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.348080.com-江苏快三作弊软件| www.298966.com-体彩排列三开奖直播| www.598299.com-八马彩票极速赛车| www.815381.com-福彩机器键盘说明| www.cp133.com-体彩大乐透开奖结果| www.44oz.com-红树林彩票娱乐下载| www.37317.com-111cc彩票-| www.059548.com-k彩彩富民地| www.642059.com-网易彩票加拿大28| www.0340.xyz-内蒙快三客户端| www.662940.com-上海福彩天天选三| www.918455.com-2345彩票计划网| www.986536.com-彩票客户端下载| www.tz1.cc-安徽快三今日预测| www.670339.com-福利彩票3d太湖| www.x55.cc-快钱彩票网址入口| www.035325.com-湖北快三1000期| www.33496.com-体彩是什么意思| www.191629.com-福彩快3一天多少期| www.61801.com-彩票守号推荐| www.216135.com-大发快三怎么看豹子| www.986463.com-周五竞彩足球彩客网| www.89775.com-中彩票离婚要分钱吗| www.08wi.com-开彩吧一kc8hk| www.947749.com-浙江12选5爱乐彩| www.96.xyz-仿写彩色的梦二年| www.301072.com-福彩七-| www.581710.com-爱彩彩网官方| www.661201.com-彩票522计划| www.0304.me-彩票能伪造吗| www.08220.com-星彩网官网下载| www.616028.com-品彩旗舰店-| www.594175.com-七彩汇娱乐苹果| www.32203.com-体育彩票排列3开奖| www.012296.com-彩票助赢软件app| www.172375.com-今天喜乐彩中奖查询| www.645959.com-足彩经历-| www.381725.com-泰安福彩投注站| www.009734.com-新华彩票网-| www.088043.com-福彩3d南方双彩网| www.27pf.com-梦见老公彩票中奖| www.598.website刷彩赚钱靠谱吗| www.10233.com-2分时时彩全天计划| www.21775.cc-套彩-| www.69317.com-竞彩官方网站计算器| www.03ji.com-快乐彩票网址多少| www.16is.com-幸福彩手机报官网| www.224015.com-福彩快三中奖技巧| www.907855.com-合肥福利彩票| www.802688.com-长沙体彩中心在哪里| www.896897.com-周口彩票店转让信息| www.974327.com-北京福彩双色球规则| www.34xm.com-体育彩票开票几点| www.53538.cc-彩81彩票是真是假| www.176221.com-安徽福彩快三遗漏号| www.275758.com-北京彩票快三到几点| www.390309.com-向日葵团队彩票真的| www.187786.com-彩票规律破解图片| www.401856.com-昨天的开奖号码福彩| www.875844.com-吉林快三专家推荐号| www.972424.com-菠萝彩手机版| www.tn.com-福彩开奖号码| www.sq62.com-彩民之家-| www.19671.cc-一分时时彩规律| www.t39.net-昆明彩龙社区app| www.952274.com-分分中彩票安全吗| 华彩www.71399m.com| www.0177.in-国彩在线下载| www.237465.com-中国足彩网竞彩| www.341768.com-体彩规律-| www.488478.com-公益彩票网可靠吗| www.582178.com-178彩票网怎么样| www.704618.com-中彩网彩票官方网| www.877179.com-ios彩票软件下载| www.38151.cc-湖北福彩投注短信| www.005347.com-彩票砍龙概率| www.026927.com-01彩票是不是合法| www.962191.com-彩涂铝卷加工| 大赢家彩票www.399190.com| www.21828.com-彩票365安全吗| www.32rs.com-乐透彩票规则| www.7336.wang-鑫彩网彩票app| 天朝彩票www.71789.cc| www.040845.com-浅谈足球博彩对冲| 500彩票www.500907.com| www.657398.com-牛彩票双色球字谜| www.809009.com-微彩网怎么样| www.888870.com-中信积分换彩票| 华夏彩票www.hx1164.com| www.880485.com-75彩票合法吗| www.34528.com-2018玩彩平台| www.180190.com-彩票驿站大发快三| www.78771.cc-亮彩打印纸-| www.ue16.com-福建体彩即时彩| www.006.bid-鸿彩主播火火图片| www.10015.com-66彩票登录-| www.428567.com-胜负彩500app| www.608068.com-注册送彩金白菜网| www.680563.com-亚彩会平台怎么样| www.809735.com-今日体彩奖号| www.922999.com-银海彩票工作室| 500彩票www.50024z.com| www.01.hk-宁德体彩站点| www.125065.com-彩票能中五百万吗| www.hx67.com-快三平投技巧| www.025571.com-大发彩票是不是真的| www.bf6.com-中原彩票大厅app| www.365393.cc-福彩3d五码遗漏| www.715811.com-启航国际网赌彩票| www.863850.com-体彩排列3口诀| www.966357.com-福利彩票打票机教程| www.ts5.cc-福彩快三怎么能稳赚| www.815038.com-易迅彩票下载安装| www.886456.com-90彩票_主页| www.953427.com-中国第一彩票大王| 亚投彩票www.ya658.com| www.41xr.com-唯彩会大乐透杀号| www.733612.com-福彩农场走势图| www.780798.com-彩客网比分直播现场| www.930625.com-彩票税-| www.cp886.com-快三代理怎么拿工资| www.79fe.com-彩票性缘原作者| www.8510.in-长春体彩中心位置| www.131085.com-太康彩礼-| www.76922.cc-彩金神龙游戏机程序| www.913189.com-足球比分彩客网| www.972244.com-大众彩票靠谱吗| www.cai567.cc-福建今日快三| www.hm79.com-买彩票赚钱-| www.yk34.com-网购彩票快三| www.20mi.com-今天晚上福彩开奖| www.168897.com-福建快三一定牛| www.4230.biz-福彩3d直播开奖| www.573388.com-快乐彩票论坛| www.629098.com-手机分分彩app| www.14cy.com-福彩3d路数预测| www.1924.date-河南体彩下载| www.ou93.com-福彩3d规律技巧| www.43bp.com-彩钢岩棉板图片| www.to76.com-武汉福彩快三转让| www.445400.com-靠谱的彩票带玩平台| www.345798.com-福彩布衣图库| www.yv36.com-新2彩票论坛正版| www.507085.com-鸿彩主播火火下载| www.61636.cc-乐米炫彩下载安装| www.086617.com-上海彩票机器人代理| www.276156.com-中国体彩彩种| www.65655.com-快三黑彩怎么盈利| www.653032.com-8炫彩游戏规则| www.821565.com-佩奇彩票骗局| www.127365.com-彩客网比分直播版| www.mt44.cc-易盈彩票官网苹果| www.805891.com-体彩刮刮乐最新票种| www.894808.com-中国福利彩票交流群| www.23af.com-精彩音乐汇2018| www.373036.com-欢腾彩-| www.772914.com-彩票帮投是什么| www.629842.com-吉林快三遗漏软件| www.691508.com-中国体彩网四川| www.757525.com-高德彩票是合法的吗| www.815233.com-bb彩票骗局-| www.811241.com-彩票万能三码| www.874525.com-拉菲彩票是合法的吗| www.936391.com-福利彩票快三和值图|