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天

知道了
500彩票竞猜 www.k83.com-248彩票骗局| www.706995.com-时时彩技巧与攻略| www.95519.com-体彩是几位数| www.186098.com-彩之源彩票是真的吗| www.827252.com-下载3d彩易网| www.328918.com-一分快三全天预测| www.436338.com-竞彩买冷门-| www.557237.com-水彩画风景-| www.633066.com-体育彩票nba彩票| www.710193.com-彩票天天首存| www.785540.com-彩票守号10期| www.859492.com-玩网络彩票犯法吗| www.923390.com-江西快三cp网| www.979572.com-一品彩票平台| www.lx.cc-青海福彩快三下载| www.804114.com-306彩票ios-| www.917508.com-必赢彩票是正规的吗| www.985124.com-玩彩总是输-| www.vc1.com-518乐和彩-| www.vd49.com-pp彩票下载-| www.63278.com-送38元的彩票| www.608512.com-派彩是反水金额吗| www.727096.com-乐彩网缩水软件| www.807772.com-陈赫中奖彩票第几集| www.915454.com-淘宝体育彩票| www.976740.com-彩礼排行-| www.dq9.com-今日广西快三走势图| www.qy68.com-重庆时时彩最新规则| www.22hk.cc-海南海口七星彩彩版| www.976.cc-即开型彩票开店| www.713456.cc-《中彩那天》原文| www.800083.cc-微信怎么买足球彩票| www.889307.com-如意彩票怎么登陆| www.964167.com-3d杀号彩乐乐| 大赢家彩票平台www.320992.com| www.rd92.com-北京单场彩开奖查询| www.0932.org-优彩网官-| www.7443.xyz-彩票管理规定第五章| www.62675.cc-淘宝怎样购买彩票| www.870812.com-cp彩票app下载| www.561985.com-鸿彩直播平台火火| www.201468.com-河北快三兑奖规则| www.962642.com-银河彩票进去| www.cai3636.com湖快三走势图| www.wg06.com-福彩3d奖号今天| www.615283.com-福利彩票有哪些网站| www.620157.com-釉上彩过程-| www.743177.com-彩吧三d开机号今天| www.880199.com-三d彩报图库第一版| www.982742.com-68z彩票-| www.gb26.com-福彩快三怎么样| www.1615.org-福彩3d大胜赛字谜| www.yh77.com-淘宝网如何买彩票| www.s08.cc-网上广西快三违法吗| www.320956.com-福彩3b预测-| www.947774.com-中囯彩吧-| www.ct64.com-私彩飞艇-| www.790530.com-大师彩票app| www.992054.com-雪源源足彩比分直播| www.yp67.com-延边福利彩票中心| www.3289.wang-中彩票动态图| www.45544.cc-彩票书籍货到付款| www.177580.com-上海天天福彩时时乐| www.394300.com-福彩返奖-| 大赢家彩票网www.339361.com| www.689818.com-新浪微彩票官网| www.92270.com-七乐彩矩阵缩水| www.124897.com-如何区分体彩和福彩| www.285236.com-大发时时彩软件计划| www.977629.com-世界杯体彩在哪里买| www.wn21.com-内蒙古快三第49期| www.22rv.com-湖北七星彩开奖结果| www.94sc.com-足彩十四场开奖奖金| www.se93.com-下载分分彩官方网站| www.318980.com-时时彩票菲律宾| www.860767.com-福彩快3安徽查询| www.987387.com-6234天天彩票| www.j36.com-蒙古快三彩票平台| www.281326.com-新时时彩开奖走势图| www.a56.me-北京福彩pk10| www.bo28.com-彩票996-| www.666572.com-彩吧3试机号查询| www.384038.com-福利彩票考试考哪些| www.020536.com-福彩三地发哥杀码| www.337579.com-青海省福利彩票网| www.992110.com-手机彩视全民k歌| www.16551.cc-重庆时时彩计划网页| www.2373.cc-奖彩票开信息查询| www.03ma.com-江苏快三还有加奖么| www.0vx.com-快三时间段-| www.ij44.com-福彩3d密码程序| www.796438.com-彩票中头奖秘诀图| www.913758.com-万彩网靠谱吗| www.976924.com-今日福彩三d开奖| www.cp4399.com-新快三是全国还是| www.u57.club-九九彩吧-| www.021454.com-亚博彩票app| www.096904.com-福彩3d第二版| www.166510.com-520快三平台| www.233574.com-体育彩票专家预测| www.300297.com-蓝球杀号定胆彩经网| www.506170.com-彩宝网络彩票平台| www.571369.com-海口快三彩票| www.113689.com-三彩家托管到底咋样| www.329395.com-彩票下注app| www.136343.com-968彩票可不可信| www.ht24.com-北京体彩开奖结果| www.49lg.com-重庆时时彩遗漏数据| www.ug57.com-彩乐乐幸运选号| www.6887.net-彩票负盈利合作| www.8131.org-发梦中彩票的图片| www.5802.com-体彩竞彩过关方式| www.29283.cc-彩虹拼音-| www.86922.cc-山西快三查询结果| www.047813.com-江苏体育彩票| www.159064.com-快乐彩几点开始| www.245215.com-彩票走势图快三| www.316207.com-时时时彩五星走势| www.m18.cn-彩票管网-| www.86yr.com-今天7乐彩开奖公告| www.6222.biz-快乐五分彩开奖结果| www.27319.com-彩票真的可以破解吗| www.8706.in-8828彩票诈骗| www.974618.com-易众彩店可靠吗| www.151.cm-彩虹张惠妹反同恋| www.893032.com-瑞彩祥云下载软件| www.981640.com-体育彩票世界杯奖金| www.m44.cc-湖北体彩新兑奖地址| www.040437.com-500彩票怎么样| www.432151.com-福彩3d中奖说明| www.264597.com-彩票新规定-| www.378519.com-幸运彩票官网软件| www.60167.com-网易彩票网真实吗| www.078971.com-七星彩出多少号| www.377925.com-体彩店成本-| www.226731.com-极速快三在哪里开奖| www.w88.la-彩票软件挣钱的方法| www.3932.org-中国足球彩票球彩票| www.12636.cc-怎么创建快三网站| www.51948.com-诚信中彩网-| www.049876.cc-吉林体彩快3开奖| www.612979.com-体彩大乐透查询中奖| www.715556.com-彩票快3赚钱方法| www.784733.com-大胜彩票炸金花软件| www.855384.com-釉彩大瓶成分| www.909377.com-福彩三d预测专区| www.965378.com-万博彩票是真的吗| 大赢家彩票网www.54400j.com| www.su76.com-快三倍投什么意思| www.329020.com-网络博彩套利方法| www.276662.com-基诺彩的诀窍| www.378367.com-6号彩票app-| www.493465.com-倍投彩票能赚钱吗| www.593953.com-彩吧开奖公告| www.669494.com-彩票不赔的买法| www.764786.com-933彩票网站| www.948695.com-微信群玩快三违法| 天天彩票www.109882.com| www.mz77.com-北京快三单双计划| www.2zd.cc-幸运彩票有没有问题| www.58ua.com-澳彩大讲堂系列| www.0375.tv-体彩7星彩推荐号码| www.4338.biz-竞彩投注资金计划表| www.0ql.com-七乐彩骗局-|