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.27cx.com-福州彩票转让| www.6789.com-骗去玩七星彩的彩民| www.26819.com-七星彩别人买什么| www.73796.com-欢乐时时彩是哪里的| www.028471.com-破黑彩的破解器| www.111772.com-彩票软件app骗局| www.188614.com-快三屠龙是什么游戏| www.272536.com-吉林快三计划网址| www.471471.com-六台彩迷宫4| www.560363.com-体育彩票如何玩| www.633676.com-腾讯分分彩窍门| www.710010.com-福彩摇一摇-| www.791467.com-2118彩票网下载| www.874474.com-福彩快三官方网投诉| www.cp6225.com-胜负彩500-| www.np52.com-彩票模拟器开奖| www.9xu.com-微博彩票怎么买| www.71ih.com-竟彩足球赛果开奖| www.1551.vip-牛人彩票网站| www.9891.pw-汇丰彩票是正规的吗| www.58169.cc-彩贝壳官网电话| www.019703.com-快三用胆拖-| www.095165.com-体育足彩90分钟| www.164999.com-彩票01是真的吗| www.272839.com-体彩的发行宗旨| www.362301.com-七星彩媒体预测汇总| www.456163.com-大神推荐足彩预测| www.550668.com-沈丘彩票中奖13亿| www.656445.com-融彩网平台-| www.747342.com-福彩三d谜语总汇| www.819675.com-江苏快三012路| www.891083.com-至尊天下彩票| www.961470.com-富游网彩票官网| 大赢家彩票平台www.186792.com| www.hw69.com-河北体福彩3d玩法| www.zo33.com-如意彩-| www.28wf.com-搜狐彩票双色球图表| www.0801.top-刷彩网是真的吗| www.7606.pw-0165彩票注册| www.23569.com-红旗彩票官方网站| www.68528.com-福彩22选5好运3| www.045591.com-83彩票网-| www.128572.com-双色球江苏彩民中奖| www.207218.com-彩票大网站有哪些| www.278376.com-昨天内蒙快三走势图| www.383578.com-2块钱彩票中奖记录| www.505447.com-87体彩-| www.575980.com-鸿运彩票安卓版下载| www.651164.com-水彩教程-| www.747004.com-5000彩票官网| www.800965.com-360彩票app-| www.874461.com-双色球专家说彩| www.965065.com-辽宁12选5乐彩网| 易彩网www.36166y.com| www.ev93.com-金牛彩票-| www.wd59.com-福彩三d专家推荐号| www.10lj.com-七星彩专家彩宝贝| www.76ou.com-中国体彩足球竞猜网| www.1303.vip-体育博彩官网| www.04792.com-胜率高的足彩公众号| www.48572.com-福彩3d开机号| www.91186.com-欧盟好彩香烟| www.051384.com-重庆时时双彩网| www.163105.com-好彩预测技巧| www.245748.com-中国足彩网英超| www.316110.com-上海彩票站点申请| www.388913.com-福彩3d微信群讨论| www.528921.com-新3d定位胆彩票| www.608316.com-竞彩计划单稳赚| www.676869.com-足彩为什么都用狗万| www.751045.com-彩8彩票苹果| www.817292.com-ig传统彩平台大全| www.884535.com-福彩3d彩彩报| www.980459.com-彩经网客户端下载| www.av89.com-护理彩票5d-| www.rg01.com-各种釉彩大瓶在哪里| www.01xf.com-揉纸重彩画教程| www.70hh.com-彩票平台领取彩金| www.1080.mobi-揭秘职业竞彩高手| www.23482.com-瑞彩网快三-| www.63618.com-唯彩看球cba直播| www.025429.com-易彩一彩民福地登录| www.093754.com-福彩高频彩新政策| www.155625.com-体育彩票兑奖查询| www.257621.com-乐米彩票官方网站| www.325812.com-彩宝网3d开奖结果| www.391579.com-彩票大全计划书| www.526516.com-体彩七星彩开彩结果| www.604747.com-新浪爱彩论坛| www.669590.com-一支黑一支彩| www.739509.com-重庆时时彩合买跟单| www.806032.com-九五彩票下载安装| www.876959.com-福彩助手l-| www.977127.com-彩礼规定是几万| www.cai7234.com大发快三骗局揭秘| www.jw73.com-客彩网-| www.zf29.com-中囯福彩网-| www.18cf.com-鲁豫有约彩票人生| www.675.cc-福彩做鬼-| www.4077.net-彩票618app-| www.9029.cn-下载体育彩票网站| www.55538.com-全民彩票云博科技| www.96872.com-海南私彩合法吗| www.054230.com-安溪体育彩-| www.147698.com-海南快三平台| www.226640.com-福彩刮刮卡骗局| www.291227.com-3d乐彩网免费走势| www.356203.com-彩票分析技巧| www.426530.com-竞彩长期盈利心得| www.518421.com-快三跳花龙-| www.579635.com-逸彩老师-| www.640117.com-爱彩人新版-| www.778244.com-竞彩早上几点兑奖| www.858491.com-即时开彩app| www.913051.com-彩票高手中奖预测| www.967583.com-3d福彩几点开奖| www.cai9300.com昨天福彩开奖结果| www.ja33.com-竞彩app临时维护| www.ye33.com-解梦七星彩号码| www.12by.com-彩票截止前购买| www.70lt.com-博彩手机验证送彩金| www.0318.live-体彩怎么过户| www.8612.wang-31竞彩吧可信不| www.33935.cc-体彩七位数中奖号| www.71668.cc-福彩三d天天彩图| www.029326.com-玩时时彩哪个平台好| www.095512.com-多彩贵州评论孟伟| www.150000.cc-仲彩娱乐登录| www.242679.com-网络体彩赌博亚博| www.305779.com-彩票每期买多少合适| www.364693.com-彩是什么属性| www.438506.com-乐亿彩票乐逸报| www.518475.com-中彩网与你免费资料| www.575888.cc-6288彩票网页版| www.631675.com-七彩格子怎么挣钱| www.690593.com-爱彩乐彩票选号| www.758511.com-顶尖彩票是真的吗| www.902094.com-360购彩导航| www.958035.com-江苏快三走势图链接| YY彩票www.yy63.com| www.rp2.com-河北福彩11选5| www.ne84.com-下载038彩票| www.y19.vip-大发彩票能挣钱| www.41tl.com-鸿发彩票帮投| www.97dw.com-体彩排五走势带连线| www.1983.date-足彩五串五-| www.6440.com-福利彩票三d四季号| www.06450.com-今天东盛彩报3| www.40430.com-网络彩票平台骗局| www.77340.cc-app买彩票犯法| www.022472.com-2元网彩票-| www.082589.com-国民彩票234下载| www.132437.com-结婚彩礼河南省| www.193906.com-彩票台北快三正规吗| www.254686.com-好彩店-| www.313654.com-福彩代打-| www.369644.com-凤凰vip彩票计划| www.443558.com-七星彩机选投注号码| www.521225.com-福彩三d总开机号| www.577013.com-七星彩预测天气网| www.635106.com-开奖公告彩票中奖| www.889891.com-体彩有哪些-| www.936779.com-七乐彩复式中奖方式| www.979579.com-刷彩金是真的吗|