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.60wd.com-彩票充值送彩金| www.4957.biz-盈盈彩票首页| www.14055.com-霸主彩票咋样| www.63197.cc-亚博体育竞彩| www.089712.com-老时时采彩开奖记录| www.152056.com-500彩票股价| www.293366.com-智慧彩本地应用| www.371357.com-彩票追号攻略| www.474785.com-彩票现在还能相信吗| www.560975.com-南方双彩3d-| www.637891.com-竞彩公益金-| www.773428.com-金沙集团送45彩金| www.869251.com-七星彩走势大小图| www.947242.com-老时彩360走势图| 六福彩票www.66ffl.com| www.ei29.com-福建福彩官网| www.wm90.com-123彩彩票网站| www.18oq.com-第19010期体彩| www.984.me-下新浪彩票-| www.6666.in-好彩堂来料彩中心| www.21676.cc-彩民之家高手论坛| www.66877.com-双色球彩票扫码查奖| www.050074.com-黑彩奖金到底有多高| www.134979.com-注册送彩金的平台| www.215448.com-彩票数字达人| www.289528.com-快三是违法的吗| www.396783.com-58彩丨58彩开奖| www.520872.com-分分彩组三组六必中| www.595026.com-双彩论坛客户| www.671745.com-3d走势图一彩宝网| www.753098.com-甘肃体育彩11选五| www.871292.com-彩73官方-| www.945899.com-河南信阳彩礼多少| www.989489.com-明彩app-| www.cp8978.com-老快三爱彩乐| www.on10.com-福彩3d幸运之门| www.7sk.com-排列三彩民毒胆王| www.64zp.com-福彩演播室每期主题| www.0754.love-亿彩官方-| www.8628.in-雅彩视电视多少钱| www.39795.cc-彩票软件邀请码| www.87622.cc-体彩店内部装修图片| www.051764.com-北京快三遗漏查询表| www.158999.com-d8彩票分分快三| www.246605.com-福彩开奖时间每周几| www.322712.com-一网彩票安全吗| www.391704.com-tt快三注册-| www.530728.com-19019体彩-| www.611382.com-网吧怎么玩彩虹六号| www.680973.com-佳缘男七星彩骗局| www.761391.com-好彩妹口头语| www.913910.com-彩16官网手机登录| www.974958.com-体彩大乐透有规律吗| www.dl01.cc-彩票计划app| www.ux86.com-北京市快三-| www.08eg.com-好看的彩铅画风景| www.78mi.com-乐彩网摘一乐彩网| www.1473.net-彩铅画半开作品| www.9906.cm-中国竞彩网专家推荐| www.55428.cc-天津体育彩票网站| www.99135.com-重庆彩全天实时计划| www.064646.com-大平台彩票有哪些| www.167085.com-江苏快三能赚钱骗局| www.253389.com-好彩妹妹-| www.320375.com-百宝彩快三走势图| www.388443.com-摇骰子彩票天天乐| www.530276.com-福建省彩票中心主任| www.609284.com-4567彩票ios| www.678359.com-永辉彩票网站| www.752657.com-彩6在哪个平台直播| www.857358.com-体彩黑网站套路| www.918072.com-搭建私彩平台| www.974489.com-福彩开奖号码今天的| www.ho9.com-快三爱彩乐官网| www.op37.com-体彩87期开奖号码| www.9gs.com-福彩3d之家| www.65gr.com-竞彩公众号排行| www.0408.cn-国外有足球彩票吗| www.8241.tv-怎样网购福利彩票| www.27899.cc-足彩竟猜比分直播| www.68695.com-彩票预测选号神器| www.040056.com-永诚彩票网官方网址| www.122722.com-彩神网高手论坛| www.190652.com-彩票导师-| www.257843.com-彩票软件手机破解版| www.328411.com-乐彩论坛h5版| www.396406.com-彩虹头像女生| www.553652.com-比利时对突尼斯竞彩| www.616969.com-江苏体彩排列5跨度| www.682152.com-彩票店扫码出票软件| www.753775.com-电信手机余额买彩票| www.865182.com-人人买彩票竞彩足球| www.922935.com-福彩3d天牛图库j| www.976362.com-安阳农村彩礼| www.ki8.com-甘肃彩票快3玩法| www.nr12.com-尊彩安全吗-| www.x50.cn-周公解梦彩票解码器| www.47lx.com-网上如何买福彩| www.398.tv-神马彩票预测| www.3620.vip-彩票有哪些软件| www.8723.biz-2001年彩票-| www.61136.cc-欢腾彩票投注平台| www.014331.com-七星彩第六位杀号| www.076683.com-app彩票送彩金| www.135059.com-五彩缤纷香烟多少钱| www.201921.com-手机购买双色球彩票| www.266359.cc-四川福彩网-| www.381660.com-网上买私彩犯法不| www.548702.com-福彩门户精简| www.619248.com-云南省体彩兑奖中心| www.679386.com-痴迷买彩票的事例| www.750202.com-彩票客服微信号| www.811041.com-彩云易散-| www.876643.com-排列五开奖结果彩吧| www.977904.com-中国体育竞技彩票| www.cai1801.com彩票开奖查询| www.jg72.com-福利彩票下载安装| www.yp77.com-福彩快三玩法诀窍| www.18li.com-首存元送彩金平台| www.469.cc-青岛福彩郑庄养老院| www.3361.me-彩乐园app彩平台| www.8212.cc-奔腾彩票是什么| www.24834.com-体彩包括哪些| www.61918.com-中国福彩开奖几次| www.041562.com-混合过关竞彩篮球| www.119445.com-河北11选5彩票| www.180578.com-网上快三骗局| www.241818.cc-人人彩票下载| www.306602.com-所有彩票网上都停售| www.365956.cc-江苏快三走时图| www.443917.com-意彩彩票app| www.522573.com-腾讯分分彩龙虎规则| www.580856.com-强力球彩票玩法| www.640015.com-宏盛彩票软件下载| www.798333.com-8彩官方网站| www.863563.com-广西福彩官网手机版| www.919986.com-彩软之家-| www.970231.com-安卓彩神通app| www.sg.cc-500vip彩票-| www.kr82.com-新浪足彩胜负彩分析| www.yt58.com-3d彩票图解-| www.14cd.com-七星彩海直播| www.081.win-万城彩票合法吗| www.2509.me-福彩61生肖玩法| www.7227.win-彩虹6号围攻单机| www.13250.com-竞彩投注比例比例| www.50333.com-七星彩加急版下载| www.86358.com-陆慧明足彩-| www.027618.com-淘彩吧论坛金算盘| www.089692.com-体彩销售话术| www.140233.com-体育彩票兑奖中心| www.204499.com-福彩快3新规| www.263705.com-彩吧导航-| www.445625.com-福利彩票代销者| www.522860.com-分分彩个位判断大小| www.602081.com-游戏厅里的彩票| www.661408.com-廉江七星彩高手| www.744222.com-7星彩大公鸡下载| www.802168.com-福利彩票销售站号| www.864037.com-手机屏幕彩膜| www.915272.com-够力体彩排列五奖表| www.965704.com-福彩跟单兼职是什么| 大玩家彩票www.84499g.com| www.bn29.com-快三图标图片|