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天

知道了
5分快3 www.35ky.com-鑫彩网快3-| www.7163.win-七彩阳光注定不平凡| www.37715.cc-7星彩大公鸡下载| www.98917.com-梦到不让买彩票| www.119274.com-彩票店开业宣传语| www.212885.com-431彩票-| www.336611.com-北京体彩排五预测| www.444613.com-彩票3b开奖号码| www.585603.com-购买海外彩票| www.672308.com-福州市体彩中心地址| www.802693.com-彩c16ccm-| www.912975.com-鼎丰彩票骗局| 彩票宝www.4cpb.com| www.hw79.com-体育彩票七位数| www.s48.net-银川千彩摸吧图片| www.70gb.com-市福彩中心上级单位| www.5101.net-福利3d开门彩| www.17121.com-竞彩足球兑奖| www.92784.com-力彩写真机怎么样| www.092211.com-福彩双色球500| www.191817.com-南方双彩网官网| www.303732.com-虎扑足彩讨论区| www.412577.com-彩钢瓦包边安装方法| www.559009.com-内蒙体彩公众号| www.665331.com-七乐彩开奖结果对比| www.773832.com-时时彩稳定大底| www.909934.com-福利彩票规律| www.982798.com-辽宁福彩快乐十二| www.jf52.com-彩网派-| www.6je.com-腾讯分分彩助赢分析| www.78ki.com-海南抓私彩-| www.2617.pw-赢彩吧网址-| www.9692.org-和彩和-| www.027061.com-下载彩库宝典| www.127279.com-彩铅画简单星空| www.215383.cc-彩票多少钱-| www.301779.com-快三选号助手怎么用| www.665322.com-四川体彩金七乐技巧| www.789424.com-收米竞彩下载| www.916085.com-体育彩票店转让流程| www.30ft.com-我要看体彩开奖| www.1610.cn-有那些彩票软件下载| www.21816.cc-送彩金88-| www.82823.com-彩乐汇下载-| www.087744.com-福利彩票号码查询| www.189096.com-520快三-| www.296287.com-快三投注软件下载| www.402234.com-中国福彩图-| www.552356.com-好盈彩票网可信吗| www.677841.com-福彩申请-| www.770684.com-d8彩票app-| www.894465.com-拍照查询彩票中奖| www.961892.com-彩涂合金铝卷| www.ck5.com-分分时时彩计划| www.ru26.com-国家福彩中心电话| www.499.tv-赛车彩票怎么玩| www.5222.hk-杭州福彩申请流程| www.11957.com-凤凰彩合法吗| www.61126.com-台湾福乐彩-| www.068684.com-网上买彩票能挣钱吗| www.173279.com-福彩3d字谜-| www.260798.com-广西快三人工计划群| www.361219.com-彩泥大全图片| www.469828.com-彩票行业的五行| www.568248.com-福利彩票贴吧论坛| www.656888.cc-九彩彩票软件下载| www.873589.com-彩63app-| www.964383.com-体彩app口袋彩店| 同乐彩票www.029781.com| www.py82.com-彩票代理被抓案例| www.54rp.com-第九彩票是什么意思| www.3143.cn-成都体彩店-| www.10405.com-50o足彩-| www.72365.com-云南省福彩网| www.037270.com-福利彩票3d开奖号| www.159059.com-体彩大乐透手机机选| www.283339.com-福彩三d开奖走| www.395616.com-彩虹合唱团彩虹歌词| www.538771.com-彩票168下载安装| www.659761.com-重庆时时彩又卡奖了| www.776786.com-苹果机怎么下彩6| www.893088.com-彩票缩水软件手机| www.976340.com-云南福彩票-| www.fj02.com-快三是国家的吗| www.ws77.com-快三表格数据分析| www.35ot.com-彩票33安卓最新版| www.2918.la-福利彩票店好申请吗| www.9532.loan-体彩有几号码| www.73039.com-福彩字迷图迷| www.054969.com-篮竞彩比分直播| www.179916.com-湖北快三走势跨度| www.278518.com-彩票跨度怎么算| www.402003.com-福彩双色球哪天开奖| www.523155.com-体彩36期大乐透| www.662702.com-进入更多精彩内容| www.777490.com-彩八仙网页版| www.878369.com-内蒙快三助手app| www.02188.cc-齐齐彩票-| www.72941.com-h广西体育彩票网| www.059116.com-彩客网官方首页| www.141011.com-福彩体彩开将结果| www.223154.com-福彩快3官网登录| www.302105.com-大乐透凤彩网杀码图| www.378734.com-体彩奖号结果查询| www.539191.cc-时时彩三星做号条件| www.629650.com-幸运彩票版图| www.699768.com-168彩票下载安卓| www.779666.com-七星彩彩票投注方法| www.865371.com-青海快三合值势图| www.933529.com-买彩票的app靠谱| www.987633.com-牛彩字迷总汇| www.cp781.com-可以玩快三的app| www.lw72.com-好彩3开奖号码查询| www.j23.in-人人买彩票app| www.39vh.com-描写彩虹的最佳词语| www.5576.vip-d8彩票软件-| www.07556.cc-澳博集团彩票平台| www.49395.com-买足球竞彩在哪里买| www.94721.com-福彩体彩销售额| www.055398.com-幸运十分彩走势图| www.177376.com-百盈快三怎么看| www.248242.com-彩票代玩是咋回事| www.318783.com-江西福彩app下载| www.384885.com-彩票大王-| www.539050.com-手机快彩网合法吗| www.610701.com-甘肃快三号码统计| www.675566.com-意彩怎么注册| www.sh07.com-彩乐乐网站可靠吗| www.861.cm-时时彩定位个位四码| www.7408.org-体育彩票竞彩上海| www.32670.com-体彩第19040期| www.99073.com-腾讯分分彩精准预测| www.068638.com-大奖快三技巧| www.150595.com-腾讯分分彩规则| www.384902.com-彩83时时彩-| www.507906.com-风雨过后总会有彩虹| www.578022.com-东方彩app安全吗| www.651581.com-新加坡永利彩票| www.748186.com-大富豪彩票-| www.833898.com-7丩3好彩-| www.901967.com-彩票奖金规则| www.960195.com-高德彩票是什么| 福彩网www.60007d.com| www.dg68.com-众赢彩票的骗局| www.ye00.com-全新韩国快三| www.17es.com-彩金怎么接-| www.0885.wang-天天彩票快3| www.8219.cc-澳门网上彩票哪个好| www.31213.cc-彩尊官网-| www.72208.com-福彩3d笨笨大花猫| www.254070.com-浙江福彩生肖6十1| www.330690.com-体育彩票开奖6十1| www.456759.com-彩霸王论坛今期秘诀| www.558533.com-真实彩虹图片大全| www.860440.com-做彩票app违法吗| www.924224.com-好彩香烟价格60万| www.978537.com-好彩一综合走势| www.23kx.com-福星彩资料开奖结果| www.019.link-胜负彩预测最准| www.2987.top-九万彩票旧版首页| www.8108.top-双色球彩票开奖日| www.25948.com-彩虹表情是什么意思| www.66592.com-我的彩票中奖号码| www.066301.com-新2官网体育彩票|