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天

知道了
9彩注册 www.88508.cc-2m彩票-| www.008693.com-大智慧彩票网| www.817376.com-境外彩票平台| www.933003.com-分分快三的玩法| www.608521.com-排列三双彩论坛新版| www.700492.com-体彩排列三的和值尾| www.807229.com-温州福利彩票中心| www.893376.com-七乐彩缩水软件下载| www.96wq.com-福彩限号是什么意思| www.201348.com-上官燕七星彩预测| www.307791.com-福利彩票时时彩| www.400356.com-什么是希腊5分彩| www.269456.com-3分彩是什么| www.365398.com-彩票胆是什么意思| www.491862.com-中国彩吧3d走势图| www.566274.com-足彩二串一实战技巧| www.636681.com-彩虹频道直播源| www.718756.com-彩虹羽泉在线试听| www.806664.cc-幸运28彩票软件| www.879416.com-彩票5app-| www.953628.com-足彩复式奖金计算器| 爱购彩票www.3552o.com| www.079111.com-7乐彩胆拖兑奖表| www.999678.com-快三跟团队很稳的| www.234550.com-互联网彩票2019| www.125412.com-体彩开奖查-| www.221232.com-手机在线购彩| www.328370.com-福彩预测3d论坛| www.468802.com-福利彩票刮刮乐秘诀| www.557088.com-vr彩票太假了| www.678909.com-彩票走势图网页| www.793089.com-彩票平刷赚钱技巧| www.874280.com-两个平台彩票对刷| www.951625.com-网易体育彩票| 大赢家彩票平台www.536210.com| www.843775.com-足彩一注多少钱| www.920983.com-数字专家破解博彩| www.986593.com-256时时彩下载| www.ku2.cc-湖北快三技巧规律| www.967242.com-专业彩吧助手走势图| www.0030.tv-体育彩票7位| www.806406.com-山东体彩手机app| www.900411.com-亿元大乐透彩票图片| www.993833.com-足彩哪种玩法最易中| www.bq36.com-彩票816平台| www.57.cx-福利彩票倍投如何投| www.198.top-大家赢彩票走势图| www.7697.biz-618彩票怎么看| www.63040.com-江苏体彩500| www.247722.com-免费彩票共享大全| www.95845.cc-中国福利彩票规矩| 500彩票www.394677.com| www.37793.cc-靠谱的移动彩票软件| www.027735.com-易彩网正规吗| www.801660.com-彩票打印不一样| www.015096.com-巨丰彩票怎么样| www.443882.com-色彩的三要素分别是| www.323008.com-福利彩票双色球双| www.91bb.cc-家彩网试机号开机号| www.3823.org-蜜蜂七星彩号码查询| www.671446.com-彩礼8斤8两多钱| www.897631.com-多彩贵州网领导| 大玩家彩票www.195090.com| www.yw95.com-甘肃快三选号技巧| www.505848.com-吉林快三封盘时间| www.196868.com-买竞彩输的家破人亡| www.863510.com-腾讯平台赛车彩票| www.7487.vip-上海福彩查询| www.668726.com-欢乐彩票猫腻| www.654534.com-天天彩票提现审核中| www.4264.biz-彩坛达人胆码| www.17578.cc-竞彩足球网易网推荐| www.73482.com-七星彩算组技巧| www.059181.com-网易红彩-| www.171975.com-福彩快乐10分| www.236010.com-手机彩票网软件| www.333802.com-搭建时时彩源码平台| www.414244.com-彩票财神算号| www.370032.com-排列三彩票下载安装| www.248149.com-福福建快三开奖结果| www.93978.cc-福利彩票贵州站| www.122643.com-刷彩票流水犯法吗| www.223683.com-燕赵福彩快三| www.7163.top-彩809彩票下载| www.650234.com-博彩开头的成语| www.99484.com-唯彩看球竞彩栏目| www.044003.com-福利彩票历届开奖| www.424417.com-万金集团彩票app| www.869575.com-十分钟一次的彩票| www.04380.com-平台彩票老板群| www.356141.com-正信娱乐分分彩挂机| www.464707.com-体彩任九开奖| www.668659.com-华人彩_官网_注| www.599767.com-买彩票会亏钱吗| www.06089.cc-体彩竞彩网官网首页| www.78022.cc-周易测彩票的公式| www.080832.com-体彩七星彩奖金| www.350196.com-福彩3d五行走式图| www.811.red-彩计划手机版下载| www.97pk.com-彩票平台赚钱不| www.786058.com-双色球彩票兑奖时间| www.895694.com-广东快三查询| www.959266.com-彩吧库图红五| 同乐彩票www.tlcp2.com| www.91758.cc-23选5彩票-| www.825009.com-衡阳市福彩中心地址| www.gu18.com-彩票站点大全软件| www.347.biz-体彩、福彩开奖| www.682881.com-哪些网站可以买彩票| www.04682.com-足彩购买app| www.110235.com-爱彩乐注册-| www.292839.com-体彩快中彩中奖规则| www.283884.com-6位数的彩票| www.5310.vip-体育彩票店怎么转让| www.bx52.com-体彩排列三规则| www.124666.com-彩票助手哪个好用| www.175775.com-北京快三app| www.413913.com-惠彩资料大全| www.519827.com-五福彩票下载送28| www.716261.com-51大发彩票时时彩| www.723520.com-极速3d彩票计划| www.811626.com-新浪竞技足球彩票网| www.887108.com-22彩票平台可靠吗| www.970513.com-安庆体育彩票| www.qj3.com-马来西亚福利乐彩票| www.vr62.com-福彩快三计划群| www.3365.la-足彩过滤软件安卓| www.635519.com-500博彩官网| www.712307.com-现在结婚彩礼多少钱| www.788527.com-365彩票官方版| www.850425.com-足彩最多几串一| www.911131.com-贵阳市快三开奖结果| www.973751.com-500万彩房游戏| 乐彩网www.lcw997.com| www.ty56.com-彩票高手论坛网| www.789323.com-足彩关小刀任九| www.121371.com-彩票托赚什么| www.771909.com-竞彩店申请难不难| www.739822.com-福彩守号3d大奖| www.26pt.com-低价彩票店转让| www.235133.com-彩票大奖-| www.305039.com-七星彩开奖历史全部| www.vp25.com-算出重庆时时彩口诀| www.362028.com-彩票3d查询-| www.165500.cc-福利彩票发行时间| www.225699.com-福彩宗旨有没有赈灾| www.093114.com-上海彩钢复合板设备| www.182666.com-北京快三和值表| www.ks16.com-福彩33d开奖结果| www.761542.com-好彩妹什么电视剧| www.853318.com-优游彩票-| www.937012.com-鸿博彩票计划| www.999786.com-福彩快三多少钱一注| www.cz31.com-快三彩票摇奖模拟器| www.xd85.com-中彩网骗人-| www.47cd.com-体彩7位数短信点播| www.0311.pro-全球彩票产业| www.977077.cc-彩礼超-| www.ic1.cc-内蒙古福彩app| www.551970.com-福彩中奖概率计算| www.670911.com-星彩3d论坛预| www.732655.com-彩票三d和尾图| www.786527.com-8848彩票下载| www.855511.com-彩票中奖自述|