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.062952.com-快捷彩票app下载| www.903646.com-乐赢彩票靠谱吗| 易彩网www.12455h.com| www.0579.pro-古彩图片-| www.34826.com-辽宁福彩3d和值| www.770065.com-七彩蛋-| www.932915.com-宝马彩票首页| www.13688.cc-体彩中几个号才有奖| www.89182.com-盈彩彩票是真的假的| www.6514.cc-幸福彩排列五杀头尾| www.681960.com-体彩超级大乐透扫码| www.822792.com-彩票网页版-| www.931286.com-福彩客服电话| 天朝彩票www.59191.cc| www.831776.com-七乐彩100走势图| www.935217.com-官方快彩有哪些| 818合彩www.www.8000hc.com| www.839777.com-体彩对社会的贡献| www.966219.com-彩发发官方网站| www.al61.com-七星彩出号绝密算法| www.934448.com-快三怎么刷流水| 幸运彩票www.444075.com| www.855615.com-0k000澳客彩票| www.952749.com-旺彩彩票大师| 盈彩www.yc7701.com| www.973631.com-天天彩票免费资料| www.32jo.com-体彩星期五什么开奖| www.6714.biz-5月份彩票销量| www.27793.cc-体彩三个红号算吗| www.7wi.cc-a8彩票下载安装| www.970.tv-七星彩前四位排除法| www.11369.cc-天天竞彩客户端| www.996457.com-佬牛足彩解盘| www.jg64.com-854彩票app-| www.05rl.com-初级水溶性彩铅画| www.788.vip-画彩虹背影图片大全| www.7638.top-600彩票注册| www.32633.cc-大发云一分快三| www.024935.com-澳门福彩快三查询| www.cp537.com-最大正规快三平台| www.xr39.com-七星彩预测专家| www.47rj.com-重庆时时彩兼职骗局| www.0798.bid-yy彩票娱乐-| www.31993.cc-彩票2元网走势图表| www.887357.com-福利彩票直选预测网| www.29kw.com-大奖彩票黑钱吗| www.313.red-彩票包赔群-| www.831094.com-广州彩妆-| www.948897.com-3d福利彩票开奖号| www.yj2.com-10选5彩票技巧| www.zm66.com-大发彩票最好邀请码| www.42aw.com-足彩胜负平14场| www.87ft.com-广州羊城晚报好彩图| www.5818.wang-伍佰万彩票下载安装| www.31562.cc-风凰竞彩-| www.4762.biz-体彩刮刮乐如7而至| www.19229.com-电子彩票怎么购买| www.86186.com-双色球福彩app| www.4890.hk-彩票竞猜夹娃娃| www.17389.com-排列三体彩网| www.69211.com-博众彩意思-| www.081777.com-护肤彩妆加盟| www.157059.com-北京一彩民-| www.zb70.com-青海快三结果| www.369.xyz-七乐彩下期预测总汇| www.4817.cm-ios怎么下载彩6| www.054654.com-嬴彩天下与你伺行| www.4122.cc-彩虹8无人机| www.19585.cc-福彩摆球顺序| www.66172.cc-体彩大乐透机选器| www.cai200.cc-快三彩票走势图| www.611504.com-吉林快三跨度走势| www.7576.net-体彩大乐透在哪兑奖| www.921633.com-91彩神客服-| www.983375.com-黄直播赌博彩票平台| www.135937.com-我要买彩票在哪里买| 500彩票www.50026e.com| www.203653.com-河南快三下载安装| www.318301.com-49c彩票登录| www.427970.com-足彩10转9软件| www.sr29.com-六壬预测福彩3d| www.36zd.com-福利彩票广西快3| www.2171.cn-福彩藏机图正版更新| www.7510.cn-彩票店有没有刮刮乐| www.707657.com-大发快三回血群| www.024170.com-高频彩最稳倍投技巧| www.914611.com-购买彩票的app| www.985143.com-竞彩盘口规律| www.gd24.com-下载体育彩票| www.f81.club-华人新彩票平台| www.2200.cn-盈众彩票网靠不靠谱| www.8588.in-排列三彩宝贝推荐| www.739272.com-竞彩地图-| 688彩票www.688dl.com| www.ot72.com-2019彩票新规| www.51vq.com-彩虹伞打地鼠攻略| www.0964.biz-新浪足彩佬牛| www.03668.com-天天中彩吧图库圣手| www.86595.cc-聚丰彩票下载安装| www.un22.com-福彩3d3天计划| www.42fz.com-体彩足球怎么看中奖| www.659140.com-香港福彩门户网址| www.827628.com-3分彩下载地址| www.905726.com-彩69是骗局么| www.961922.com-上海福彩快3下载| www.10uo.com-博彩支付接口判刑| www.449825.com-chicken彩票| www.9937.com-今日彩票出号| www.712749.com-网络竞彩平台| www.236508.com-17彩票合法吗| www.330406.com-快三群吧-| www.954808.com-瑞彩祥云怎么作弊| www.998566.cc-华宇彩票-| www.cc90.com-福彩排5开奖号| www.zf63.com-福彩双色球字迷总汇| www.31ob.com-雨后彩虹歌曲| www.226.me-彩票哪个平台能买| www.4187.love-七彩网站-| www.318587.com-登录49c彩票| www.418302.com-盛大彩票网站可靠吗| www.569247.com-福彩丹东图-| www.653577.com-澳门搏彩网-| www.809660.com-河南体育彩票网站| www.887820.com-海南私彩网-| www.a68.top-彩票史-| www.96165.com-彩票买的时间| www.925823.com-彩富网香港官方开奖| www.984958.com-运彩网app-| www.cs19.com-淘宝彩票-| www.h81.org-新华彩票手机版| www.37ry.com-那款七星彩软件好| www.006965.com-合肥体彩店报价图片| www.936201.com-够力七星彩解梦大全| www.977264.com-高价彩礼国家不管吗| www.cp8787.com-快三投注软件| www.qh90.cc-广东彩票官网| www.03ut.com-如何办理体彩销售点| www.01497.com-和彩印客户端下载| www.76629.cc-广西新快三-| www.052313.com-快三分解教学口令| www.ga05.com-浙江省快乐彩走势图| www.za90.com-足球彩票玩法规则| www.34bt.com-足彩五大联赛胜负彩| www.304163.com-01彩票方下载| www.374126.com-搜狐彩票资讯网| www.466908.com-彩票开奖走势大全| www.551365.cc-风彩依旧什么意思| www.51983.cc-广西快乐双彩奇偶| www.cp568.com-河北快三跨度走势图| www.140012.com-彩票公式赚钱真的吗| www.329515.com-新彩网手机版3d| www.97ig.com-旧书网博彩王| www.3772.wang-广州福彩十分走势图| www.9078.loan-彩票3o选7-| www.63517.com-竞彩篮球今日赛程| www.029070.com-新2彩票论坛一肖中| www.102899.com-k彩手机登录| www.889337.com-老凤凰旗舰版彩票| www.952226.com-手机上玩幸运彩票| www.987187.com-手机福彩迷app| www.005021.com-福彩生肖6十1开奖| www.810275.com-彩票走势图显示屏| www.898250.com-七星彩开奖结论坛| www.967145.com-3d中奖彩票图片|