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天

知道了
500彩票竞猜 www.322973.com-北京乐和彩-| www.747931.com-彩易科思怎么样| www.862835.com-七乐彩开奖在哪个台| www.61le.com-心脏彩超误诊率高| www.908943.com-7070彩票骗局| 亿彩彩票www.588yc.com| www.733022.com-泰州市体彩-| www.840881.com-彩妆店加盟条件| www.933469.com-全国高频彩票app| 500彩票www.50024f.com| www.96402.com-彩票都有什么类型的| www.26706.com-七星彩奖金怎么算| www.019523.com-手机网上买爱乐彩| www.8886.cc-竞彩中奖多少要交税| www.308893.com-彩票双色球中奖技巧| www.np42.com-福彩兑奖-| www.46bz.com-铁盒好彩蓝莓双爆珠| www.2791.me-足彩比分直播新浪网| www.46fy.com-中国竞彩地图| www.0619.vip-麒麟竞彩-| www.946830.com-彩钢围挡压瓦机| www.dg42.com-海南七星彩奖表| www.02rc.com-手机买彩票世界杯| www.0447.cc-体育彩票中奖秘诀| www.813584.com-重庆时寸彩开奖| www.897658.com-多彩贵州集团简介| www.967936.com-彩票提现成功未到账| www.cp660.com-分分快三软件下载| www.sl05.com-时时彩靠谱投注平台| www.465656.com-彩票跟票-| www.698571.com-台州福彩网-| www.861490.com-快三三军刷水| www.82738.cc-彩票九是什么星座| www.176601.com-快三兑奖规则| www.590279.com-顶呱刮彩票招财猫| www.675854.com-天津福彩位数| www.760379.com-彩票发财口号| www.ft32.com-福彩快乐10分奖金| www.13wh.com-3d老虎彩报-| www.39330.com-旺彩彩票查询| www.988680.com-73期期好彩-| www.pl82.com-手机在线山东体彩| www.77mk.com-3d彩吧图谜第2版| 凤凰彩票www.77803n.com| www.zn16.com-518彩网是骗局| www.e51.club-福彩补拍-| www.ha2.com-吉林快三一定牛| www.p23.com-微博彩票游戏| www.43tv.com-民间挂彩是什么意思| www.0773.site-彩播贝贝密码房合集| www.82iw.com-俄罗斯彩票大奖| www.7064.biz-幸运彩合法吗| www.22527.cc-彩票驿站注册| www.768400.com-时时彩杂六半顺规律| www.247693.com-福彩快3计划群| www.386680.com-赢彩专家破解| www.990051.com-在中彩玩时时彩被黑| www.94xa.com-2019年河南彩礼| www.666355.cc-乐彩网彩票安全吗| www.013434.com-周三彩票-| www.mg19.com-安徵快三时时彩| www.37vd.com-七星彩app怎么样| 快彩www.81678h.com| www.110548.com-我要下载彩99| www.129592.com-快三对子号怎么倍投| www.984836.com-竞彩赛果奖金计算器| www.67rx.com-彩票中奖去哪领取| www.330626.com-彩票棋牌-| www.406353.com-彩票135app-| www.511712.com-神州五分彩开奖结果| www.581770.com-凤凰彩票是骗局| www.661808.com-神兽竞彩团队推荐| www.769308.com-福彩内部人员微信群| www.832096.com-福彩3d派奖通知| www.893032.com-瑞彩祥云下载软件| www.967888.cc-彩票能中奖吗| www.nl26.com-彩票365软件| www.098266.com-彩票3d专家预测| www.700366.com-3d牛彩藏机图总汇| www.108122.com-乐彩赢app下载| www.4856.cm-梦见自己买彩票| www.cd43.com-河南福彩快开彩都有| www.13tq.com-体彩选三中奖号码| www.0124.cc-春秋彩票是坑人吗| www.18bq.com-明天有什么彩票开奖| www.99ly.cc-彩8彩票是合法的吗| www.3029.cm-被黑彩平台黑钱了| www.8318.net-体彩大乐透10期| www.233703.com-快三的投注技巧教程| www.299183.com-网上彩中彩-| www.727916.com-彩运网平台-| www.067.in-腾讯彩票怎么玩| www.4552.cn-七星彩历史开奖详情| www.49hb.com-被头奖彩票骗了5万| www.570258.com-海南彩票开奖号码| www.666223.com-航空彩虹股票行情| www.458089.com-四位数福利彩票| www.780718.com-彩铅画星空教程视频| www.878122.com-3d牛彩网图谜| www.956011.com-程序员破解彩票| 凤凰彩票www.3479aa.com| www.710798.com-完美彩票计划| www.789762.com-怎么找竞彩客户| www.878011.com-福彩丹东彩吧全图| www.936863.com-七乐彩最高奖金社区| www.990889.com-彩之网互动交流区| www.bb76.com-今晚福体彩开奖结果| www.ra00.com-有没有人玩大发快三| www.21so.com-大王彩票网-| www.06333.com-富贵彩票可靠吗| www.114102.com-全民计划网时时彩| www.313365.cc-体彩排列三双彩论坛| www.467338.com-新粤彩100-| www.592603.com-快三苏州开奖结果| www.131813.com-秀山彩礼-| www.240633.com-彩票计划官网| www.325686.com-360彩票大厅首页| www.436477.com-查云南体彩30选七| www.536153.com-美国有几种热门彩票| www.598271.com-彩票源码免费分享| www.780986.com-彩虹哥是骗子的证据| www.044779.com-足彩负负是什么意思| www.db26.com-开彩票店-| www.42zt.com-超兴彩票会封号吗| www.7238.top-彩虹冰淇淋店| www.26759.cc-怎样收看七星彩直播| www.613587.com-买彩票群里赚钱生活| www.688911.com-11086娱乐彩票| www.177370.com-快三计算器360| www.838696.com-盘球网竞彩篮球推荐| www.787701.com-彩客化学集团| www.sl12.com-在线模拟彩票投注| www.47sp.com-w600彩票平台| www.217303.com-湖北快三今天开奖查| www.970473.com-广西快三开始时间| www.7775.hk-专业彩票师心得| www.33960.com-彩票回血团队| www.73030.cc-福彩都有多大得奖| www.090591.com-彩票店上班工资高吗| www.948705.com-微信玩快三是真的吗| JJ彩票www.94580.cc| www.383516.com-进微信时时彩群号| www.608605.com-福利彩票双色球71| www.669710.com-太阳2彩票网可靠吗| www.25527.cc-彩客网完整版比分| www.72uc.com-足彩单关历史走势图| www.2538.pw-打彩是什么彩票| www.931963.com-彩票数-| www.643178.com-彩票犯罪图片| www.852700.com-足彩310报纸咋订| www.911405.com-东方三分彩是哪里的| www.721535.com-破解彩票网站漏洞| www.914932.com-鸿运彩软件-| www.993668.com-送彩金的打鱼| www.ye0.com-大发快三如何看和值| www.xf92.com-手机977彩票软件| www.95ft.com-博彩相亲骗局| www.191260.com-上海快三开奖助手| www.175235.com-彩票代理拉人技巧| www.50697.com-一分快三软件app| www.98202.com-腾讯分分彩基本规则| www.1686.live-e彩票手机版下载| www.731057.com-足彩19043-| www.928999.com-大玩家彩票平台被黑|