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天

知道了
彩39彩票安卓 www.095297.com-湖南彩票中奖新闻| www.233727.com-e球彩很坑啊| www.329609.com-深圳福彩网站大全| www.428190.com-鸿彩网输死了| www.541498.com-彩票彩金是什么意思| www.693315.com-爱乐透买彩票安全吗| www.787020.com-赢彩网官网-| www.873722.com-江苏快三大发计划| www.32gu.com-福彩世界-| www.2800.com-福彩3d中奖图片| www.9540.in-彩色通道下载| www.61979.cc-福彩前几次开奖结果| www.029073.com-欧阳霄贵州体彩网| www.115991.com-竞彩大小球规则| www.200932.com-七星彩晚上开奖时间| www.286183.com-体彩排三报纸| www.424888.com-i8彩票官网-| www.533394.com-七星彩几位数| www.639443.com-体彩店买刮刮乐吗| www.739952.com-万博彩票网手机版| www.826776.com-体彩竞彩店装修| www.906638.com-福利彩票能选哪些号| www.975282.com-黑马彩票分解| www.hy61.com-福彩快三赔率| www.f81.net-远途国际彩票托| www.45hb.com-彩虹电影台免费| www.968.top-银海彩报布衣天下| www.8643.biz-众乐彩票网合法吗| www.50730.com-彩票店加盟赚钱吗| www.002086.com-网上购买世界杯彩票| www.081813.com-有老师带的福利彩票| www.165160.com-中彩透密网址是多少| www.295296.com-微彩票下载-| www.372637.com-彩61登录-| www.485387.com-彩票风云团队| www.572787.com-一分快三豹子计划| www.656108.com-500彩票无限包赔| www.791808.com-三分时时彩开奖查询| www.875411.com-快三平台是什么| www.967984.com-上海福彩快3明细图| www.cai2499.com安徽快三.遗漏| www.mx24.com-彩报3d银海-| www.7xc.com-员工中奖彩票| www.71dj.com-华人娱彩-| www.1539.vip-福彩三地试机号金码| www.00765.com-体彩十一选5走势图| www.59515.com-彩虹吉他谱c调| www.023168.com-体彩排列三杀尾| www.104958.com-牛蛙彩票现场直播| www.871037.com-好莱客彩票下载| www.13895.cc-双色球彩票预测网| www.528355.com-彩神l外挂-| www.3fl.com-美东两分彩-| www.66be.com-比较大的博彩公司| www.1648.net-时时彩做号软件| www.9444.vip-七星彩怎么看中奖| www.52472.cc-体育彩票排五开奖| www.99386.cc-老杨说彩的文章成绩| www.068724.com-福彩十二生肖开奖| www.139004.com-彩票11选5上海| www.220252.com-炫乐彩票骗局| www.297073.com-快乐彩票在线登录| www.370916.com-彩票开奖与走势| www.471898.com-好彩管方版-| www.558193.com-古风手绘彩铅画教程| www.630611.com-3d第三版彩吧| www.704326.com-m5彩票注册-| www.782433.com-网易彩下载-| www.861411.com-彩票开将-| www.934556.com-浙江快乐彩下载安装| www.995806.com-足彩胜平负公式计算| www.yz8.com-河北福利彩票走势图| www.sl91.com-新时时彩开奖走势图| www.15od.com-qq彩票怎么找不到| www.97kp.com-彩票3d试机号码| www.3292.biz-三d彩宝贝走势图| www.8901.com-新浪足彩预测分析| www.86729.com-杨震竞彩推荐| www.047982.com-福利彩票3d投注表| www.168217.com-湖北快三今天必出号| www.277584.com-天空彩-| www.371137.com-再添新彩-| www.443307.com-3dmax彩通图| www.538112.com-国彩网软件下载| www.654715.com-赣州体彩中心位置| www.772194.com-时时彩后三组六平刷| www.872485.com-365彩票时时彩| www.963451.com-彩色水磨石地面报价| 500彩票www.401267.com| www.hw42.com-快三是国家开的吗| www.zc95.com-33彩票网站-| www.24iy.com-8p彩膜-| www.0120.net-彩色的造句一年级| www.6520.org-彩票自动挂机平台| www.16609.com-快三彩票能提现吗| www.58169.cc-彩贝壳官网电话| www.028207.com-奔驰彩票网页| www.100899.com-福彩3d杀跨度| www.165338.com-创富彩票骗局揭秘| www.268907.com-98c彩票-| www.355884.cc-桂快三开奖-| www.436855.com-湖南幸运赛车彩票网| www.528545.com-正版彩民必备资料| www.629312.com-天天种彩票下载安装| www.696623.com-彩票是私人的嘛| www.770318.com-好彩软红-| www.872252.com-彩24-| www.939778.com-彩票捡漏-| www.981886.com-爱彩人app下载| www.cu64.com-手机博彩软件| www.tk29.cc-360购彩代购| www.9ue.com-微博彩票游戏平台| www.61oj.com-35彩票全天计划| www.952.mobi-彩票新玩法-| www.8161.net-体育彩票排列七| www.25466.cc-如何用彩铅画草地| www.65590.cc-中好彩2是多少钱| www.037085.com-彩票收米图片大全| www.118812.com-福彩跟单兼职是什么| www.186844.cc-分分彩票app| www.252301.com-今日中彩有骗局吗| www.318326.com-永利彩票官方网站| www.382706.com-马竞尤文足彩| www.590939.com-东北结婚彩礼给什么| www.660551.com-阿里彩票是真的么| www.756073.com-天天好彩对牛弹琴| www.836825.com-立彩坑人么-| www.900042.com-福彩开店得多少钱| www.962156.com-众彩网t星彩预测| 9号彩票www.80767g.com| www.de99.cc-傲赢彩票-| www.sl27.com-五星彩票开奖号码| www.13gz.com-彩票王中王ww| www.75zo.com-豫彩通-| www.0791.org-谁有快彩网的邀请码| www.8299.top-彩家园计划聊天室| www.26625.cc-体彩七星彩开奖视频| www.65409.com-青海省体彩中心地址| www.032767.com-诸葛智彩软件| www.101627.com-500w彩票网pc| www.158950.com-博友彩注册邀请码| www.259108.com-竞彩好用的app| www.325963.com-彩合网王中王| www.385090.com-购彩票软件-| www.521060.com-网络彩票赌博有赢吗| www.582097.com-赢彩票安全吗| www.647911.com-体彩七星彩29期| www.748971.com-好彩1基本走势| www.806938.com-彩票数字变了| www.872766.com-网上合法彩票软件| www.974588.com-众彩乐综合版金亚洲| www.bx9.com-彩1app-| www.lk14.com-中彩在线官方下载| www.a51.cc-胜负彩技巧-| www.18tg.cc-周五彩票出什么| www.435.biz-m5彩票平台-| www.3411.vip-足球彩票的佳选择| www.8238.bid-重庆时时彩遗漏走势| www.23974.com-中彩娱乐作弊器| www.60453.com-中福彩票平台| www.039059.com-7彩网合法吗| www.116144.com-彩票六大网投| www.176750.com-江苏快三中奖助手| www.235050.com-中国彩票大奖新闻|