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.752910.com-幸福彩手机报| 幸运彩票网www.33598j.com| www.65998.cc-下载广西福彩| www.16wz.com-虎扑篮彩神棍论坛| www.208851.com-彩票跟长龙-| www.471504.com-彩名堂下载计划软件| www.is67.com-福彩可以手机投注吗| www.08ei.com-七星彩抓规神器苹果| www.052244.com-同学合买彩票中奖| www.159085.com-七星彩模拟机选一注| www.06qn.com-黑圣手字谜搜彩网| www.971586.com-彩票带人回血靠谱吗| www.01qi.com-彩虹桥生日蛋糕| www.ij78.com-安卓彩票下载| www.27zt.com-全彩漫画全本| www.2489.cc-678彩票官网下载| www.595.cm-旺旺彩票中了怎么领| www.46033.com-时时彩豹子号走势图| www.529238.com-彩虹c调扫弦吉他谱| www.227330.com-上海快三开奖号| www.337546.com-彩吧今天试机号| www.443896.com-牛蛙彩票开奖现场| www.540146.com-那人驾着七彩祥云| www.355643.com-体彩贪1800亿| www.22003.cc-558赢彩能信吗| www.884764.com-福彩唐龙说彩趋势图| www.981246.com-彩霸王三星做号软件| www.19347.com-彩发发苹果版本| www.867418.com-一定牛彩票可靠吗| 500万彩票www.967333a.com| www.sn11.cc-快三开奖直播软件| www.524727.com-彩票中的数学查可文| www.718319.com-阳光彩票人工计划| www.026538.com-lol博彩-| www.225753.com-快三下注平台| www.407366.com-破解电脑彩票| www.66344.cc-关于京东彩票| www.599606.com-为什么会有彩票| www.084387.com-即时开彩新版| www.348004.com-广州足彩兑奖去哪里| www.0057.cc-时时彩有时候跳期| www.445953.com-易彩可以提现吗| www.155985.com-好彩客网页版网址| www.363931.com-看见彩虹寓意| www.6107.cc-福彩双色球怎么买法| www.608631.com-荣鼎彩官网-| www.754998.com-天津体彩中心地址| www.885898.com-快三概率软件| www.051306.com-福彩3d和值谜语| www.239769.com-五百彩票网官方端口| www.7885.org-用手机上怎么买彩票| www.50494.com-最高手七星彩解诗网| www.056126.com-奥客体育彩票电脑版| www.94bj.com-彩票外围平台| www.t35.net-彩尊七年下载| www.yg29.com-派彩的钱是反水吗| www.434999.com-南国体彩论坛特区网| www.906189.com-彩色包括哪些颜色| www.55dx.com-开封申请彩票销售点| www.915202.com-盈盈彩票网站| www.979354.com-好彩烟红色多少钱| www.jf22.com-皇都彩票破解方法| www.f13.net-七乐彩开奖号查询| www.008312.com-下载众购彩票软件| www.95523.cc-足彩直播视频| www.03458.com-怎样戒掉手机买彩票| www.88744.com-最新万彩吧资料| www.085685.com-基诺型彩票是骗局吗| www.35985.cc-帝豪ll时时彩| www.092631.com-腾讯5分彩开奖结果| www.523337.com-鼎隆刷彩赚钱视频| www.665497.com-福彩三d天中藏机图| www.012328.com-v8彩票苹果版下载| 好彩www.60123g.com| www.882.in-时时彩几期止损好点| www.236154.com-江苏快三网易| www.382128.com-彩仙阁软件app| www.536744.com-菠萝彩双色球分析| www.648311.com-彩票开奖号码三d| www.764333.com-靠谱的时时彩app| www.053184.com-彩票网赚是真的假的| www.161079.com-中国体育彩票三等奖| www.278226.com-51亿彩票巨奖| www.840522.com-福彩刷流水挣钱吗| www.68844.cc-中国彩票中奖概率| www.088008.com-双赢彩票骗局| www.171739.com-分分快三-| www.260627.com-福彩快三有赢钱的吗| www.345877.com-皇家快乐彩开奖记录| www.444242.com-彩38路线-| www.544304.com-3d彩3d彩吧图库| www.611175.com-高手网特彩吧齐中彩| www.183722.com-福彩快三遗漏走势| www.916688.com-海南私彩老板| 大赢家彩票网www.54400s.com| www.53231.cc-七彩野山鸡养殖| www.023182.com-即时开彩安卓版| www.856486.com-七星彩走势图表网易| www.939439.com-彩票平台检测玩家| www.988443.com-福彩积分兑换| www.mf6.com-河北快三预测一定牛| www.766522.com-时时彩后三胆码计算| www.73287.com-彩票微信群名称大全| www.109229.com-百彩网大全-| www.53556.cc-彩81彩票苹果| www.192881.com-北京pk拾彩票官网| www.441210.com-体育彩票注销| www.287896.com-凤凰彩票彩票导航| www.60lw.com-福彩和值跨度速查表| www.080838.com-中彩网快3开奖结果| www.060012.com-体彩云南十一选五| www.432187.com-我的彩票中奖号| www.541985.com-新彩票网走势网| www.640703.com-荣誉彩-| www.689738.com-彩66彩票网-| www.802168.com-福利彩票销售站号| www.438989.com-营业中体彩店转让| www.012601.com-七星彩每天都开奖吗| www.082616.com-118彩票网怎么样| www.769520.com-盈彩网正规吗| www.861793.com-合肥体彩店报价图片| www.948691.com-微信群吉林快三| 天天彩票www.1035z.com| www.33ij.com-登录福彩网聊天室| www.cp925.com-北京福彩快三一定牛| www.32fb.com-雨后一抹彩虹图片| www.504705.com-彩绘的反义词| www.939318.com-竞彩足球北单推荐| www.266303.com-上海市福彩排列七| www.353592.com-顶呱刮彩票售卖机| 网易彩票www.9356u.com| www.032856.com-彩票中心邀请码| www.248234.com-代玩彩票兼职qq群| www.746824.com-加拿大3.5分彩官| www.490233.com-旧版全球彩票| www.013725.com-快三计划骗局| www.509897.com-5百万彩票官方网| www.59778.com-九龙彩票网-| www.893088.com-彩票缩水软件手机| www.969471.com-宝马彩票计划网| www.cai4666.com快三开奖一定| www.93135.com-有专业竞彩的团队么| www.063639.com-时时彩有多少网站| www.862235.com-体彩奖号结果| www.919781.com-哪个彩票平台信誉好| www.983626.com-基诺型彩票破解| www.300033.com-大学生玩快三| www.908636.com-最新彩票开奖查询| www.965245.com-中国体育彩票买法| 8号彩票www.60108h.com| www.641547.com-体育彩票图标排版| www.kk38.com-易彩快3精准计划| www.651.net-澳客彩票网靠谱吗| www.ev14.com-博牛彩票平台| www.uh39.com-天天购彩网-| www.5ji.cc-彩票中福快3| www.399973.com-纽约彩票的种类| www.87827.cc-福彩3d杀码彩易网| www.595649.com-体彩领奖视频| www.99wi.com-海洋彩票网-| www.503535.com-高频彩联盟网址| www.400035.com-礼拜三开什么彩票| www.551257.com-高频彩随机怎么赢| www.638616.com-色彩三原色-|