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.53763.cc-金都国际时时彩网站| www.700106.com-旧板彩客网-| www.807165.com-竞彩按比例投注计划| www.995559.com-竞彩和北单哪个好| www.up73.com-福彩3d阴阳走势囹| www.t81.com-福彩正版破解藏机诗| www.142128.com-江苏快三输40万| www.33jf.com-日本中国足彩分析| www.319833.com-乐亿彩票-| www.964639.com-网络彩票破解方法| www.645886.com-竞彩对比-| www.848778.com-彩票微信-| www.19516.cc-福彩三的魔鬼图| www.206893.com-152彩票网站| www.785254.com-快三福利彩票| www.887765.com-排列三开机号牛彩网| www.978549.com-易旺彩票是不是骗子| www.eq09.com-炫乐彩票-| www.05hq.com-画细腻的画彩铅| www.95yi.com-众彩网千里马专家予| www.5056.biz-最新足彩停售| www.6630.vip-彩九下载-| www.144608.com-足彩稳赚不赔的买法| www.07at.com-橘子怎么画彩铅| www.420.tm-家彩千禧试机号| www.2244.tv-十一选五大彩鲸开奖| www.8244.vip-甘肃快三和值遗漏| www.32395.cc-d9彩票版平台下载| www.816688.com-万博彩票是不是赌博| www.919089.cc-买外围彩票软件| 博友彩www.371x.cc| www.mt14.com-官方彩网页-| www.066571.com-下载900彩票| www.62727.com-中国竞彩网开奖结果| www.284629.com-福彩快三0034| www.167746.com-中国福彩快三官网| www.949.win-百胜快三助手下载| www.29677.cc-幸运彩票网站可靠吗| www.85209.com-彩票容错缩水软件| www.79892.com-福彩金条回收价格| www.451.xyz-福彩3d大公鸡图2| www.581830.com-悟空彩票能用吗| www.449772.com-多摩豪全彩无码漫画| www.037019.com-时时彩屠龙什么意思| www.009608.com-老时彩开奖号码| www.4274.xyz-淘彩娱乐是真的吗| www.686720.com-福彩网络公司犯法么| www.835234.com-炫彩微商激活码| www.921144.com-彩神vi能挣钱吗| www.984150.com-2020彩票能信吗| www.cr10.com-彩客站是真的吗| www.03wl.com-彩经网排三开机号| www.381005.com-每周三开奖的彩票| www.00ad.com-玩彩网提款不到账| www.34993.com-快三下注技巧| www.358557.com-乐彩排三字迷| www.9172.online七乐彩中奖分布| www.94531.com-买彩票到底会中奖吗| www.075166.com-福建体彩31选7一| www.054548.com-乐赢彩票app下载| www.yp4.cc-彩票店的快三怎么玩| www.uw9.com-彩票计划软件app| www.43245.com-乐米彩票苹果版| www.341647.com-福彩3d预测表| www.64922.com-旧版竞彩足球即比分| www.788410.com-19042足彩分析| www.zo58.com-时时彩五星一码必中| www.905860.com-亚搏彩票手机版| www.c31.cm-易彩线路-| www.893932.com-官方彩票软件app| www.965070.com-时时彩微信报奖群| www.ml8.cc-吉林省体彩中心在哪| www.545833.com-申请福利彩票店流程| www.631576.com-七彩视界会员靠谱么| www.694871.com-常州市福利彩票转让| www.879528.com-多彩网是真的吗| www.959034.com-快乐十分钟彩票下载| 500彩票www.50054z.com| www.46ru.com-成信彩漂网-| www.1587.site-杨彩票看号预测快三| www.145046.com-福彩3的最新杀码| www.529055.com-溢彩是什么意思| www.977874.com-彩色纸盒包装| www.cl79.com-福彩快三论坛| www.26df.com-福彩图迷字迷总汇| www.37332.com-大奖购彩助手| www.777431.com-七彩奖软件-| www.ek74.com-贵州体彩网11选5| www.xv08.com-80彩票提现-| www.134828.com-彩运网导航-| www.229342.com-快三网赌-| www.317051.com-福彩中心地址| www.13397.cc-足彩8x70-| www.69713.com-彩票版区139cn| www.945.in-七星彩段开奖时间| www.675050.com-乐游啦彩票-| www.306848.com-梦见彩票号码能买吗| www.948469.com-香港福彩3d资料图| www.lq22.com-福彩3d中彩网| www.411.cx-史上彩票最大奖| www.655899.com-福彩3d和值点| www.715837.com-压彩票-| www.26ac.com-彩票c16网站| www.562581.com-为什么没有重庆快三| www.983800.com-北京快三的预售时间| www.041133.com-周口彩票店转让信息| www.817911.com-足彩19040结果| www.977532.com-18051期足彩| www.v21.club-福彩3d开奖公告| www.386.cm-安徽体彩中心在哪里| www.42478.com-送彩金体验金| www.006806.com-福彩中奖号3d| www.0807.wang-大发快三倍投计划图| www.105916.com-重庆时时彩参考软件| www.un34.com-彩宝彩票是骗局吗| www.685037.com-盈佳彩票网址| www.306851.com-彩票号码25怎么买| www.248365.com-中信彩票-| www.365801.cc-国外彩票开奖| www.528171.com-汇丰彩票平台可信吗| www.617162.com-彩票冒领构成犯罪吗| www.707051.com-吉林快三停售了吗| www.788357.com-彩礼不能超过两万元| www.961415.com-环宇体育直播竞彩猫| www.zb56.com-北京赛车爱彩乐| www.345642.com-网上怎么买福彩| www.586067.com-分分时时彩网页计划| www.705870.com-福彩3d天牛图纸| www.647934.com-淘宝彩票助手不能买| 吉利彩票www.80065d.com| www.8422.loan-m8彩票坑人-| www.185575.com-北京福彩快三爱彩乐| www.7244.org-儿童彩虹画-| www.9694.xyz-做梦梦见彩票中奖| www.7zz.com-a8彩票app-| www.443266.com-专业玩彩69期| www.08644.com-福彩扫一扫app| www.vn77.com-福彩网上可以买吗| www.131982.com-退还彩礼案例| www.575837.com-彩票店系统几点停售| www.399366.com-手机买彩票中奖算吗| www.083115.com-北京福彩在哪兑奖| www.442210.com-福利彩世界网址| www.b40.org-国家彩票-| www.529.club-彩票大厅重庆时时彩| www.165189.com-安徽福彩双色球中奖| www.648968.com-信彩计划网址| www.03vg.com-体育彩票山东试点| www.84yy.com-彩票开源系统排行榜| www.v42.shop-玄武彩票app| www.84do.com-python彩票| www.1556.cm-天彩在线-| www.868478.com-19038七星彩| www.6626.net-体彩能买nba吗| www.501809.com-彩票的串-| www.642959.com-湖北快三开将| www.665889.com-手游彩重新启动| www.645153.com-冬日彩蛋法贝热| www.168664.com-时时彩开奖结果| www.8887.live-竞彩3串1神单| www.30228.com-鸿彩网是不是诈骗| www.141486.com-福彩3d字谜凤彩网| www.039658.com-会员登陆9b彩票| www.844876.com-甘肃体彩11选5开|