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.208269.com-福彩双色球快3玩法| www.8262.org-江西省福彩助手| www.103080.com-乐和彩走势图表| www.066084.com-雨后彩虹歌词| www.cp195.cc-一网彩票-| www.691702.com-在彩票-| www.961881.com-福彩3d一新彩网| www.rl74.com-甘肃快三和值| www.31235.com-时时彩下载官方网站| www.195326.com-快三跨度算法预测| www.151246.com-彩漂泡衣服要泡多久| www.766966.com-超彩糖-| www.wb3.com-四川快三开奖结果| www.70eb.com-七k彩票网十分彩| www.918015.com-统一彩票官网| www.912639.com-小六壬测彩票| www.54020.com-时时彩赢了不能提现| www.155646.com-辉煌彩票网站| www.51es.com-一分一期的彩票| www.3384.top-快乐彩票3网址| www.688660.cc-广东福彩app| www.880650.com-一定牛甘肃福彩快三| 大赢家彩票平台www.723035.com| www.165537.com-福彩中心工作轻松吗| www.2175.win-买彩票要身份证吗| www.19058.com-足球彩票中奖高不高| www.71349.com-天禧彩票-| www.894833.com-优博2时时彩客服| www.973303.com-彩虹哥王者荣耀| www.ad77.cc-幸运彩app下载| www.a35.com-九千万彩票网| www.44rd.com-竞彩足球均注和倍投| www.0379.bid-彩乐园哪下载| www.6983.biz-3d流彩网-| www.846131.com-乐乐彩票是真的吗| www.67pb.com-七星彩华南地区论坛| www.464727.com-福彩试机号码和金码| www.cai0606.com中国福彩官方app| www.hd98.cc-湖北省福利彩票快3| www.915850.com-八号彩票下载安装| 吉祥彩票www.715934.com| www.vv48.com-玩一分快三欠了三万| www.963656.com-怎样玩足彩-| www.251037.com-河北福彩快三推荐| www.293795.com-揭秘网络黑彩票| www.735663.com-v8彩票网址-| www.10350.com-95彩票网页-| www.82351.com-电脑福利彩票时时彩| www.052779.com-福州体彩中心地址| www.kw89.com-手机彩票计划软件| www.64312.cc-彩妆盘-| www.028280.com-奔驰彩票官网首页| www.056925.com-快乐彩票手机版下载| www.400186.com-彩c02彩票登录| www.205996.com-十大黑彩平台排名| www.242605.com-中彩网双色球预测| www.396191.com-周日什么彩票| www.555158.cc-环彩彩票官网版| www.677056.com-彩色压印混凝土广场| www.799336.com-福彩一体机使用说明| www.936472.com-竞彩足球多少玩法| www.fs2.com-时时彩输了追回案例| www.93sa.com-彩色一寸照片什么底| www.8201.shop-新未来彩票是骗局吗| www.99lv.com-3d久久彩吧-| www.7230.in-北京彩票网站| www.79.cm-彩乐透app-| www.851668.com-精彩出行怎么收费| www.85213.com-福彩双色球怎么兑奖| www.4960.vip-澳發彩票平台靠谱么| www.1439.com-7号彩票娱乐邀请码| www.601458.com-彩神群-| www.333.red-入侵黑彩服务器| www.127804.com-fc彩虹岛-| www.805702.com-九万彩票是正规的吗| www.935511.com-分分彩在线平台| www.001825.com-体彩有什么彩种| www.ia90.com-网络彩票平台排行榜| www.0280.org-怎样开彩票店| www.5108.wang-天津体彩中心电话| www.275919.com-快三挂机软件哪个好| www.935056.com-彩六苹果怎么下载| www.563226.com-新浪爱彩高清走势图| www.781548.com-多宝彩票平台合法吗| www.948809.com-福彩在线购买| www.xu19.com-买彩票怎么才能中奖| www.204477.com-江西快三玩法介绍| www.1602.com-3d杀码家彩网| www.899.hk-体彩九宫图-| www.9142.cc-彩八仙计划-| www.20wi.com-国家体育局体育彩票| www.965971.com-福彩3d投资计划| www.lk80.com-彩八下载安装| www.154678.com-彩神官方网网站| www.258193.com-皇都彩票信誉怎么样| www.11222.com-在彩票-| www.365391.cc-双色预测彩经网| www.87qy.com-彩吧助手走势图官网| www.65199.cc-乐彩三d藏机图| www.878693.com-福彩积分商城| www.062604.com-神彩争霸8-| www.271869.cc-福彩和值表-| www.676682.com-酷彩吧a-| 爱购彩票www.3552g.com| www.103978.com-彩票投注手-| www.438325.com-腾讯彩票江苏快三| www.i56.club-广东天彩快三| www.892498.com-彩票榜可信吗| www.876817.com-下载快三-| www.258455.com-极速快三走势图今天| www.9858.org-古建彩绘图案丶| www.1424.in-海南七星彩四位| www.052213.com-好看的休闲快三| www.504922.com-赢彩缩水手机版下载| www.609287.com-彩票采集教程| www.672988.com-多彩贵州评论| www.749866.com-下载分分中彩票| www.802127.com-中国体肓彩票大乐透| www.860776.com-河北快三号码| www.980044.com-急聘彩票打票员一名| www.081079.com-贵州快乐彩开奖结果| www.860437.com-网上彩票平台有哪些| www.842826.com-中国足彩在线的微博| www.394400.com-91彩虹网-| www.509212.com-福利彩票兑换中心| www.857849.com-深圳福利彩票兑奖| www.949101.com-官网高频彩-| www.fa3.cc-时彩五星走势图| www.880411.com-黑客怎么黑黑彩的钱| www.7208.xyz-彩虹六号墨冰稀有吗| www.42qr.com-随州论坛快三论剑| www.035960.com-彩票人生句子| www.1171.cn-足彩宣传-| www.580839.com-彩票七星彩开奖查询| www.84op.com-500万彩票聊天室| www.1365.cc-彩票有人真的中奖吗| www.981928.com-福彩体彩中奖概率| www.fv79.com-英国时时彩官方| www.zz52.com-手机下载新浪爱彩| www.44qm.com-时时彩半顺的玩法| www.589840.com-大乐透预测彩宝贝| www.32ot.com-大连远洋竞彩14日| www.866473.com-昨天体彩号-| www.959649.com-好彩票567-| www.142541.com-彩运8导师-| www.290111.cc-大赢家彩票是真的么| 500彩票www.50024t.com| www.128314.com-福利彩票32期| www.719762.com-87彩票店-| www.871310.com-快三模拟器-| 网易彩票www.065wy.com| www.121487.com-玩时时彩心得| www.522509.com-七乐彩图片-| www.188941.com-大赢家彩票-| www.398963.com-澳门赌彩怎么赚钱| www.tq35.com-盛世彩票吃大赔小| www.2364.biz-查七星彩-| www.05927.com-彩16.com-| www.52786.cc-七彩虹gt1030| www.947678.com-天下彩免费正版资料| www.af95.com-河南快三遗漏值| www.067077.com-河南快三跨度| www.530502.com-时时彩怎么买| www.750865.com-买彩票输身亡|