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.888008.com-百乐彩骗局揭秘| www.727151.com-08号彩票论坛| www.25105.com-福彩群英会走势图| www.1956.top-台北彩票快三| www.19098.com-彩票外省能兑奖吗| www.222207.cc-够力七星彩解梦| www.fk85.com-免费彩票全天计划| www.76il.com-新加坡金都快三查询| www.jr63.com-购彩3-| www.20vl.com-怎样自选彩票号码| www.078906.com-彩16app-| www.177333.com-大发快三是什么东西| www.364006.com-江苏快三百家号| www.490958.com-七星彩四码取数法| www.568364.com-d8彩票平台官网| www.647625.com-爱彩乐广西快三| www.930307.com-91彩票-| www.sn13.com-买私彩怎么判刑| www.24rm.com-华彩艺术教育| www.66927.com-民政部彩票中心冯| www.055351.com-江西快三网投| www.3089.vip-海南七星彩私彩梦册| 500彩票www.348077.com| www.3088.me-七乐彩晚上几点开奖| www.11282.com-烟台福彩官网| www.74949.com-统一彩票是真是假| www.643133.com-304彩票-| www.570482.com-七彩蛋糕店真的假的| www.655836.com-做时彩网站违法吗| www.735373.com-703彩票网注册| www.803918.com-网上体育彩票app| www.883916.com-名人彩票手机登录| www.953104.com-手机福利彩票下载| www.cp2203.com-快三吵群技巧| www.813663.com-宁夏彩票最大奖| www.789639.com-京彩生活-| www.999182.com-下彩铃-| www.07rq.com-不喜欢刚力彩芽| www.441.live-红牛彩是真的吗| www.172078.com-快三开奖助手安卓版| www.706270.com-发彩网邀请码| www.wx03.com-彩票开奖排列五开奖| www.8929.cc-彩票七星彩几点开奖| www.058345.com-昆明味彩业务| www.57270.cc-锋彩直播老版| www.073163.com-全民彩票怎么玩法| www.107016.com-福彩中奖怎么领奖| www.690976.com-九州彩票是否合法| www.433904.com-投注福利彩票技巧| www.625393.com-七乐彩预测牛材网| www.195078.com-快乐彩走势图今天| www.8885.live-江苏体育彩票网站| www.356625.com-买彩票如何入账| www.525679.com-新重庆时时彩开奖| www.631244.com-南阳中大奖彩票网站| www.711902.com-万豪彩票客户端| www.807073.com-足彩二串一盈利计划| www.502991.com-万富彩票app| www.964128.com-甘肃快三追号推荐| www.bc3.cc-湖北快三结果查询| www.vd48.com-智慧彩票预测官网| www.83683.cc-彩票的好处与坏处| www.38125.cc-福彩开奖前多久停售| www.796947.com-916彩票专业| www.893542.com-彩票号码组合软件| www.971505.com-众购彩票网pk10| www.zg.com-燕赵福利彩票网首页| www.l44.net-福利彩票如何选号| www.44ed.com-七彩教育是什么| www.459.bid-财神彩下载-| www.05018.com-彩500大发快三| www.58768.com-六台彩迷宫机关算尽| www.009054.com-广西福彩官网手机版| www.143355.com-易经测彩票-| www.22444.cc-天天中彩票安卓| www.59926.cc-竞彩足球串关玩法| www.005164.com-今天福彩体彩开机号| www.m46.org-福彩十分开奖| www.62155.cc-福彩网站网址| www.024459.com-内蒙福利彩快3| www.471477.com-竞彩管方欧赔| www.660932.com-老徐说彩今天| www.196263.com-北京5分彩开奖号码| www.388664.cc-重庆市彩时彩app| www.519790.com-怎么戒了买彩票| www.628834.com-六福彩票是真的吗| www.52679.cc-好彩店官网首页| www.690793.com-澳客胜负彩-| www.96844.com-李永志彩票案视频| www.596752.com-新加坡天天彩8点| www.692873.com-乐乐彩票真假| www.cc06.com-高频彩-| www.5347.cm-微信买彩票中大奖| www.357544.com-彩神通免费版下载| www.yq30.com-今日说法网络彩票| www.fn9.com-天津时时彩app| www.155642.com-制作网络彩票平台| www.612850.com-重庆时时彩票真的吗| www.687965.com-福彩快3预测| www.758289.com-代理福利彩票赚钱吗| www.820848.com-七星彩新浪爱彩| www.883430.com-信博彩票app| www.949163.com-福彩3d和值图表| www.994512.com-福彩谜一分彩| www.bl23.com-彩票两元3d走势图| www.844047.com-体彩专管员工资| www.478261.com-足彩880中五千万| www.567573.com-彩票驿站官网下载| www.775332.com-环彩彩票app| www.869948.com-彩票计划员是拖么| www.944499.com-彩票248所有版本| www.999987.com-快三是啥玩意| www.gd67.com-浙江福彩三地走势图| www.073872.com-拓彩真瓷美缝剂| www.1503.vip-夸爱豆彩虹屁| www.812835.com-988线上彩票| www.880185.com-福彩专家杀号360| www.968722.com-怎么加时时彩群| 博友彩www.979673.com| www.jv66.com-彩神大发网址| www.yq44.com-体彩七位数怎么选号| www.73ho.com-耽美巨肉3d彩漫| www.0956.cc-cp544快三计划| www.61612.cc-七星彩开奖决果| www.69715.com-彩票半全场什么意思| www.144278.com-搜索新浪竞彩足彩| www.668366.com-体彩图迷字谜总汇| www.507047.com-体彩二元网走势图| www.087905.com-临海彩票案-| www.807072.com-彩票纸回收价值| www.080633.com-马来西亚乐和彩官网| www.761211.com-彩礼地图-| www.829079.com-彩管家苹果版| www.890747.com-彩27-| www.961497.com-彩票中奖绝招| 奔驰彩票www.www.uucp300.com| www.816217.com-昨天的彩票中奖号码| www.979641.com-七天彩票真的假的| www.wk76.com-qq彩票竞猜维护| www.134965.com-高频彩票直播| www.57in.com-彩市英雄专家专栏| www.253177.com-时时彩8码滚雪球| www.327379.com-快三倍投计算公式| www.623965.com-91彩网福彩快三| www.700052.cc-重庆时时彩冷热| www.792411.com-在外地中彩票| www.861901.com-qq彩票竞猜没了| www.911784.com-彩客站快三网址| www.965510.com-楚天福彩精彩十分| 500彩票www.50024y.com| www.rh39.com-365彩票买不了吗| www.9333.live-福彩是假的-| www.207021.com-易彩彩票app下载| www.361896.com-彩虹秒赞美化| www.443554.com-青蛙彩票四不像图| www.080838.com-中彩网快3开奖结果| www.167934.com-中国福彩快3江苏| www.254587.com-福彩快三赔法| www.378040.com-蒙自体彩竞彩转让| www.482368.com-金彩贷app-| www.566375.com-渔阳饭店和彩| www.629257.com-彩票咨询服务| www.687458.com-鸿彩灯光官网| www.778929.com-彩票电玩机-|