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.8116.in-pk彩票手机版下载| www.60020.com-福利彩票购买| www.233482.com-大发快三属于赌博吗| www.325744.com-排三试机号彩宝| www.413287.com-彩色沥青路面| www.528488.com-复式彩票怎么兑奖| www.698521.com-各省快三开奖| www.786613.com-极速快3华夏彩票| www.862223.com-体育彩票怎么选| www.928789.com-乐彩开奖-| www.982430.com-三分时时彩计划网址| www.2274.biz-彩豚养殖致富网| www.8738.bid-248彩票平台下载| www.49001.com-彩票店买球犯法么| www.99541.com-杭州体彩网-| www.076914.com-5个数字的彩票| www.148609.cc-河南幸运彩技巧跑马| www.277291.com-赢彩彩票是不是真的| www.370608.com-彩票走势图分析秘法| www.485877.com-手游彩票网址| www.568742.com-体彩排三字迷图迷| www.650727.com-创意水彩装饰画| www.776790.com-北京丹彩快三骗局| www.874334.com-齊魯福彩-| www.960268.com-风之彩挣钱是真的吗| 亿发彩票www.605733.com| www.kk89.com-易彩彩票下载软件| www.o28.club-分分彩挂机软件| www.50jr.com-天猫彩票投注可靠吗| www.0102.host-彩色的组词-| www.9489.tv-彩钢夹芯板房| www.53631.cc-足彩竞彩网易| www.002312.com-一分时时彩倍投方案| www.078085.com-福彩在线是私营的吗| www.150171.com-幸运中彩票助手下载| www.277830.com-90彩票下载-| www.369215.com-3乐彩是真的吗| www.472687.com-海南七星彩梦解| www.561175.com-天天彩票论坛一码| www.640345.com-新浪爱彩是啥平台| www.771118.com-重庆时时彩图片| www.867750.com-七星彩都是几点开奖| www.940332.com-黑彩快三盘怎么申请| www.998122.com-彩票七天乐app| www.rg6.com-五福彩票-| www.rr77.com-七星彩中三个| www.177104.com-快三秒男-| www.813993.com-爱彩人江苏11| www.4525.vip-今晚七星彩前四码| www.343008.com-福彩快三顺子翻倍吗| www.434698.com-39彩票app下载| www.533107.com-篡改彩票-| www.657001.com-79彩票平台安卓版| www.751367.com-重庆时时彩500| www.821890.com-3个数的彩票| www.885830.com-彩经网3d绝杀六尾| www.996407.com-黑龙江彩票大奖| www.mz8.cc-好彩0567下载| www.qg65.com-好彩3怎么才算中奖| www.897489.com-体彩竞彩中奖规则| 中国福利彩票www.33588x.com| www.799319.com-55彩票充值-| www.918872.com-今日彩神通关注| 彩宝www.cb7388.com| www.bc60.com-上海天天彩选四开奖| www.vc78.com-乐彩网购彩二分快3| www.13bq.com-九州信誉彩票网| www.87as.com-淘宝可以买彩票嘛| www.3664.xyz-今晚彩票买什么号码| www.89322.com-和乐彩票网址| www.097279.com-三d彩报图或机号| www.189896.com-江苏快三预测结果| www.272028.com-下载立彩app| www.576583.com-福彩快三组合表格| www.655839.com-海南七星彩买奖软件| www.761240.com-离婚男方要求退彩礼| www.853987.com-5分钟时时彩走势图| www.356703.com-好彩官网平台| www.513883.com-今日老黄历上的彩票| www.607877.com-在哪找彩友多店铺| www.685040.com-天吉网福彩体彩论坛| www.768407.com-电信手机彩铃网站| www.831828.com-福彩七乐彩下期预测| www.906130.com-大连体彩店出租合作| www.964870.com-国家禁止彩票软件| 日彩网www.rcw8833.com| www.kp49.com-七星彩走势图50期| www.h18.biz-七星彩兑奖-| www.40mz.com-七星彩中奖地方查询| www.2908.pw-澳门彩票平台有哪些| www.8737.biz-高频彩开奖来源| www.51261.cc-福彩三地走势图表| www.94319.com-pc28是彩票吗| www.055721.com-易博彩票平台网址| www.234473.com-如何网上购买足彩| www.307938.com-福彩快三赔率199| www.11398.cc-足彩19038-| www.82588.com-足彩19036期| www.056999.com-七星彩抓规律软件| www.119838.com-上海福彩80选10| www.192636.com-贵州快三号码预测| www.265609.com-宁夏体彩11选5| www.440988.com-中国福利彩票中彩乐| www.536992.com-霸气的彩票名称| www.666657.com-国乐彩平台网址| www.730608.com-足球竞彩购买| www.799523.com-开彩票站怎么赚钱| www.863090.com-彩d-| www.916522.com-致富福彩下载| www.968569.com-中乐彩75秒-| www.r68.com-乐彩网3b-| www.46tw.com-体彩大乐透摇奖| www.503.com-福彩过年放假时间| www.3872.bid-中国足彩赛事中心| www.9339.me-吉祥彩彩票| www.66535.cc-宁夏福彩中奖故事| www.024232.com-福彩双色球开奖预测| www.093021.com-耐磨彩色混凝土地面| www.155259.com-老马足彩推荐| www.258182.com-福利快三官网| www.325315.com-彩票工具今日运势| www.389096.com-彩发发pk10-| www.526891.com-福利彩中奖彩民| www.661299.com-数字三型彩票的奥秘| www.744545.com-七彩剽虫-| www.808369.com-e乐彩登录平台| www.875766.com-e球彩复投-| www.965934.com-彩票店广告宣传语| 乐发彩票www.115669.com| www.fl20.com-贵州体彩欧阳宵预测| www.654157.com-广西快三和值| www.771964.com-卖福利彩票的宣传语| www.885923.com-众彩网排列五走势图| www.957439.com-汇众彩票平台| www.999562.com-福彩3d和值定位图| www.ac71.com-体彩在线-| www.qe68.com-好彩烟版本-| www.17ar.com-信用卡买彩票诈骗| www.94pi.com-和乐彩票登陆平台| www.2296.cm-重庆时彩宝典下载| www.7491.pw-体彩店加盟的app| www.20455.com-重庆福彩开奖结果| www.60311.com-贵州体彩软件下载| www.051765.com-彩票游戏出租| www.127885.com-彩虹哥王者荣耀| www.192100.com-福彩3d和值表图片| www.255216.com-彩金领取app| www.316673.com-新浪爱彩可靠吗| www.375822.com-安徽体育彩票返点| www.530362.com-梅花鹿彩铅画图片| www.604771.com-彩9.com-| www.666283.com-中航彩虹股票行情| www.729735.com-彩票随机软件| www.790807.com-好彩三张-| www.856058.com-苏州体彩网点电话| www.909606.com-彩票三d开奖结果| www.966569.com-五分彩助手-| 网易彩票www.065wy.com| www.bg50.com-一定牛彩票预测推荐| www.qp32.com-北单单场足彩| www.03ud.com-城市风景彩铅画图片| www.64ej.com-仆先生全彩-| www.815.online-福彩售票点在哪里| www.4101.tv-在线买福彩的app|