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.885162.com-第一彩票app下载| www.181878.com-彩中彩下载-| www.695683.com-足彩竞彩海外推| www.789619.com-98年福利彩票开奖| www.874917.com-有游彩票-| www.949437.com-大彩鲸时时彩助手| 500彩票www.26299e.com| www.07iw.com-c588彩票官网| www.5161.net-四川体彩金7乐下载| www.5720.cm-彩票可以自助买了| www.40rt.com-赢彩吧官方网站| www.0992.cn-哪些数字容易中彩票| www.7001.cm-体彩排五的走势图解| www.22793.cc-彩城优惠大厅| www.320143.com-乐彩神下载-| www.88201.cc-彩票app怎么举报| www.969249.com-公益团队彩票计划| www.4893.biz-利澳平台手彩票注册| www.129607.com-众彩网客户端app| www.113460.com-能买彩票的app| www.255789.com-彩票种类介绍大全| www.364693.com-彩是什么属性| www.855970.com-香港行政快三3| www.833277.com-e赢彩app下载| www.102041.com-快三打和值中奖金额| www.223516.com-快三大全第一门户| www.795756.com-一分彩被骗-| www.2775.xyz-腾讯时时彩开奖网址| www.451178.com-杏耀彩票app| www.197200.com-新加坡乐和彩| www.447270.com-乐和彩登录-| www.135709.com-竞彩胜平负比分直播| www.310044.com-延吉市体育彩票| www.38909.cc-快彩注册邀请码| www.001914.com-苏州体彩票店转让| www.102940.com-海南七彩开奖号码| www.818282.com-2013彩票平台| www.443918.com-意彩app官方下载| www.608600.com-足彩预测推荐号码| www.739321.com-竞彩网点-| www.885221.com-福彩唐龙-| www.637556.com-彩虹无人机东方魔鬼| www.763816.com-神计划彩票聊天室| www.896993.com-安卓购彩助手| 云博彩票www.01883.cc| www.901859.com-重庆时彩最快开奖| www.988568.com-安徽快三时时彩网站| www.fd55.com-河北快三统计| www.a43.pw-竞彩总进球数心得| www.29yq.com-全民彩票注册网| www.jp33.com-福彩3d专家推荐| www.394336.com-礼拜三彩票-| www.539908.com-彩票短期规律工具| www.624758.com-速八彩票是犯法的吗| www.119765.com-江苏快三倍投计划| www.ki9.com-彩票快三甘肃开奖| www.314341.com-手机时彩害人| www.cp807.com-网上玩快三违法么| www.288335.com-买彩票输钱了怎么办| www.j88.net-福彩3d今日藏机图| www.437038.com-星彩娱乐app下载| www.5720.cm-彩票可以自助买了| www.1909.org-东方亮彩招聘单| www.9533.online彩票有四个数字的没| www.uy68.com-福彩3d新彩吧字谜| www.yi0.com-三d乐彩网-| www.046670.com-济宁福彩县城开店| www.298519.com-腾讯彩票是真的吗| www.552735.com-玩大发快三的技巧| www.697588.com-体育彩票放假几天| www.3008.vip-好彩堂97383| www.395628.com-东方彩票客服qq| www.163029.com-大乐透走势图彩民村| www.336256.com-幸运星座彩票玩法| www.144833.com-竞彩足球交易量| www.630802.com-258竞彩官网首页| www.800173.com-网络福利彩票游戏| www.001577.com-贵州快三今日推荐号| www.548.net-手机版博悦分分彩| www.58005.com-彩99最新版-| www.43ml.com-挂彩的征兆-| www.6479.vip-彩108-| www.196482.com-中国体彩开奖查询| www.626945.com-万彩和彩票-| www.376131.com-彩届联盟-| www.231690.com-福彩3d选号王过滤| www.319704.com-快三江苏快三| www.77836.com-98彩网-| www.984229.com-58彩票旧版首页| www.dc78.com-彩票店怎么开| www.51023.com-海南私彩七星彩官网| www.39196.cc-6188彩票合法不| www.001794.com-七星彩复式计算| www.220068.com-彩票开奖双色球走势| www.375966.com-宁国彩票-| www.503035.com-投彩能赚-| www.02ls.com-世界杯微博彩票分析| www.120904.com-彩票双色球最近几期| www.019596.com-pc快三开奖查询| www.53378.cc-杭州彩虹冰淇淋机| www.un04.com-百姓百姓彩坛| www.02fn.com-分分彩k线图手机版| www.f88.cc-海南私彩规律走势图| www.2754.net-中福彩票下载地址| www.033861.com-凤凰彩世界贴吧| www.789712.com-三地彩涂-| www.866296.com-体彩481任选一| www.919629.com-靠谱的彩票销售平台| www.972955.com-彩库宝典怎么安装| 600万彩票www.389233.com| www.mo31.com-福彩网快三大小单双| www.zt56.com-竞彩篮球分析预测| www.07009.com-福彩专业版-| www.924500.com-彩票最高中奖多少亿| www.nm14.com-那个彩票软件最好用| www.29ef.com-体彩三串一什么意思| www.768486.com-天猫彩票-| www.885771.com-类似567的彩票| www.cp632.com-彩神网址是多少| www.73jl.com-炫彩油画怎么出售| www.4362.cc-福彩瑞是什么| www.65574.com-都有什么彩票软件| www.155259.com-老马足彩推荐| www.397409.com-网络私彩举报电话| www.276970.com-重庆时时彩调整通知| www.275311.com-北京单场彩开奖查询| www.751857.com-1号网彩票-| www.683116.com-大圣彩票app下载| www.832234.com-彩票伪随机数生成器| www.947256.com-北京福建快三助手| www.om.com-彩票兑奖流程| www.966017.com-福彩3d最新开奖| www.h58.club-五分彩开奖号码记录| www.05540.com-彩票号码过滤| www.0513.in-3d福彩开奖| www.9210.top-彩票返亏损的平台| www.085024.com-多彩彩票app| www.332679.com-京彩国际app| www.381336.com-七乐彩开奖直播今天| www.331925.com-中国体彩多少钱一注| www.rq43.com-彩票多少时间一期| www.645081.com-七乐彩五期选号技巧| www.810446.com-7乐彩开奖历史| www.919761.com-彩票打印机原理| YY彩票www.yy63.com| www.pd41.com-快三豹子通多少钱| www.21wy.com-彩票可以提现到微信| www.243216.com-中国体育彩票网官网| www.226726.com-88彩票官网登录| www.pf29.com-彩七七骗局-| www.135796.com-彩票打票员招聘信息| www.37832.com-6234彩票网-| www.021216.com-双色球彩票走势图| www.2049.vip-彩虹图画儿童画大全| www.881628.com-体彩兑奖-| www.45165.com-三d彩票开奖今天| www.071763.com-秒速快三交流| www.49278.com-傲赢彩票是哪个平台| www.514169.com-同乐手机彩票| www.939564.com-福彩门户惠泽资料| www.60404.com-彩票研究办法| www.019363.com-湖北体育彩票中奖| www.130198.com-彩票777app-| www.252776.com-彩微花-|