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.592096.com-天天娱乐彩票app| www.738832.com-开彩宝典-| www.832080.com-中国体彩网竞猜| www.919270.com-时时彩个人平台搭建| www.988335.com-彩娃彩票下载| www.kn7.com-吉林快三半顺是指| www.sv09.com-彩票七星彩预测| 计划稳定版-dd彩靠谱不-| www.0298.net-彩票店开在哪里好| www.9013.cm-乐彩论坛天气网| www.67726.com-彩票网上犯法吗| www.035126.com-求个彩票交流群| www.132332.com-高价彩礼国家不管吗| www.220012.com-快购彩票网-| www.303061.com-七星彩连线走势图表| www.383682.com-今晚彩票中奖号多少| www.552199.com-火剪彩票apd| www.644199.com-时时彩暂停-| www.754602.com-天津七星彩开奖结果| www.866051.com-幸运五星彩-| www.941133.com-中国体彩票图片| www.992316.com-中彩国际-| www.kp9.cc-彩票开奖大全| www.qv85.com-湖北福利彩票快三| www.14zt.com-幸运彩平台出不了款| www.262.in-彩票榜是真的吗| www.4442.wang-吉林快三形势走势图| www.03190.com-35彩票平台怎么样| www.76978.com-地方彩票查询结果| www.033289.com-中信积分换彩| www.116353.com-彩虹的象征意义| www.196201.com-彩票万能预测软件| www.278564.com-彩256-| www.420877.com-彩票销售申请书| www.531591.com-彩民村心水高手论坛| www.635065.com-彩票8亿官方端口| www.730551.com-快2彩票玩法介绍| www.810832.com-体育彩票飞鱼| www.879577.com-智慧彩客户端下载| www.ne4.com-甘肃快三和值表| www.rm55.cc-内蒙十分钟一期快三| www.16ol.com-咔咔彩票-| www.203.tv-彩铅画卡通可爱| www.4209.win-七彩网投靠谱吗| www.9973.online结婚要彩礼的国家| www.71165.cc-贵州快三彩票| www.035042.com-皇冠集团博彩| www.130879.com-福彩快三专业版| www.211095.com-贵州快3彩经网| www.286789.com-手机彩票合买平台| www.401811.com-dd彩票合法吗| www.514009.com-购彩网靠谱吗| www.587555.com-上一期彩票出什么号| www.667933.com-彩票中心原主任| www.747989.com-甘肃快三中奖多少钱| www.826373.com-933彩票赢钱不给| www.909026.com-河北快三二不同玩法| www.974496.com-体彩大乐透推荐号码| www.uf11.com-快三赚不赚钱| www.12ho.com-四系乃漫画全彩色| www.85ug.com-老余说彩-| www.2350.vip-财神七彩神仙鱼| www.8325.live-快3彩票是骗局吗| www.32571.cc-国家新政策彩礼| www.80254.com-唐山市福彩兑奖中心| www.033546.com-彩帝彩票安卓版下载| www.232697.com-新浪彩票网走势图| www.311827.com-福彩3d图库-| www.384716.com-东北彩票大王视频| www.541366.com-多金彩84384| www.626693.com-彩票3d价格-| www.698610.com-宁波快三-| www.775991.com-火箭彩票安卓系统| www.882419.com-易彩票网站-| www.963974.com-彩票双色球分析软件| 多乐彩票www.422626.com| www.hr92.com-中福快三的规律| www.a49.com-七乐彩基本走式图| www.27zk.com-快三保本打法| www.0655.org-彩票投注站申请电话| www.7259.biz-怎样开通彩虹e台| www.22640.com-彩杏官方网站| www.66308.com-湖北彩票近期中奖号| www.047744.com-江苏体彩网官方网站| www.132970.com-世界杯足彩开户网| www.208081.com-彩票走势图全国| www.281225.com-澳门时时彩图片| www.388470.com-买单双的彩票是什么| www.511916.com-关于春天彩铅画图片| www.586167.com-52彩店-| www.657294.com-福利彩票开的游戏厅| www.820065.com-农村天价彩礼作文| www.889735.com-彩票屠龙模式| www.957195.com-金利网彩票-| 鸿运彩票www.hy5507.com| www.09pg.com-彩票中五位数有奖吗| www.0765.org-易彩规律-| www.17983.com-竞彩足球彩票兑奖| www.66874.com-彩票油了-| www.067124.com-彩票店吃票-| www.144333.com-快乐彩辅助-| www.276353.com-香港行政快三查询| www.369618.com-自动机选彩票平台| www.479718.com-七星彩几分-| www.566872.com-彩神通四码是真的吗| www.654619.com-江西省体育彩票中心| www.792468.com-福彩店转让信息| www.879665.com-快乐时彩下载| www.980272.com-早上买彩票的人多吗| www.fj68.com-各省快三真的假的| www.xr84.com-中奖彩票的购买时间| www.20oo.com-福彩双色球网易杀号| www.648.xyz-分分彩背后操作| www.4705.com-买彩票花了十几万| www.00618.cc-怎么写彩票申请书| www.68212.com-福利彩票如何中奖| www.026796.com-快三规律大小单双句| www.102896.com-k彩富民测速| www.170083.com-吉林福彩快三走势图| www.279251.com-重庆彩票群是骗局吗| www.365287.cc-玩快三跳楼-| www.cp6221.com-竞彩500-| www.wz22.com-七星彩今期的神算子| www.34fv.com-彩富计划软件| www.1457.cc-初中彩铅画-| www.7862.pw-中福彩票apk| www.23723.com-手机买彩票要怎么买| www.66299.com-福利彩票机选一注机| www.041042.com-彩票小程序-| www.123811.com-天天乐彩apk| www.192969.com-快三彩票是什么啊| www.261237.com-火箭彩票app| www.355899.com-金源彩票手机版| www.829577.com-同学用帝王彩票| www.937303.com-福彩3d众彩首页| 众发彩票www.589zf.com| www.dr75.com-青海快三-| www.uy54.com-湖北省福彩开奖结果| www.05zl.com-彩铅手绘肖像超逼真| www.75tg.com-萍果精彩片段| www.1096.wang-竞彩如何长期盈利| www.12460.com-篮球彩票单关| www.52287.cc-趣头条彩票-| www.91159.cc-好彩香烟纸盒| www.042461.com-福利彩票宣传语简单| www.154638.com-彩票网站是怎么赚钱| www.234264.com-微信卖彩票合法吗| www.301496.com-网易大乐透彩票预测| www.365351.com-体彩大乐透| www.430203.com-宝利国际彩票| www.520024.com-休闲快三视频| www.581628.com-安徽快三多久一期| www.649698.com-线上博彩娱乐| www.810372.com-福利彩票最近开奖| www.869350.com-海南七星彩规律图表| www.948142.com-双色球神彩福牛| www.992501.com-七星彩多期怎么玩的| www.jl2.cc-江苏福彩快三助手| www.7883.vip-爱彩乐辽宁11选5| www.52829.cc-天天快3彩票网| www.016217.com-彩票快速查询| www.090074.com-93彩票网-| www.154829.com-足彩入门到精通| www.329362.com-湖北福彩3o选5|