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.t05.net-可以跟单的彩票软件| www.628954.com-彩色一体打印机价格| www.739441.com-下载518彩票网址| www.876511.com-光彩耀目专栏| www.975273.com-彩票群名称大全霸气| www.ia.cc-快三平台软件| www.rc57.com-时时彩出号口诀| www.01xa.com-福彩可以买世界杯吗| www.5045.cc-竞猜足彩停售时间| www.91624.com-好彩黑蓝好多钱一包| www.57382.cc-苹果如何下载立彩| www.062289.com-双色球彩神通软件| www.68153.com-新彩吧图库大全| www.439062.com-福彩36迭7开奖| www.913001.com-ku游足彩骗局揭秘| www.ui1.cc-七乐彩开奖结果今天| www.04mx.com-彩天地是什么东西| www.3183.cm-12生肖是什么彩票| www.58325.cc-3d乐彩开奖号码| www.029911.com-快三如何选好| www.209282.com-买彩票怎么选号规则| www.4137.net-彩虹七号游戏下载| www.561144.com-体彩历史的今天| www.902403.com-鸿运彩票网打不开| www.976470.com-168彩票开奖记录| www.cd02.com-甘肃十一选五爱彩乐| www.087786.com-运彩平台客服电话| www.207238.com-彩票816平台| www.380053.com-七乐彩出了什么好| www.581543.com-七星彩一夜谈加急版| www.944562.com-博盈彩票是真假| www.df37.com-官网快三-| www.375411.com-七星彩现场电视台| www.563517.com-新粤彩看图区| www.744959.com-彩票管理条例快三| www.885060.com-3d天天中彩吧| 盈彩www.yc7701.com| www.051333.com-360福彩3d-| www.333088.com-百度乐彩网首页| www.445957.com-福利彩票乱买| www.551168.com-万豪彩票苹果版下载| www.623555.com-竞彩猫推荐-| www.691011.com-篮球竞彩投注| www.771069.com-怎样下载乐彩33| www.837059.com-一定牛彩票网址| www.898852.com-五亿彩票-| www.958677.com-ee彩彩票-| www.fn43.com-体育彩票官网电脑版| www.948.bid-彩票店上班-| www.06sq.com-福彩昨日开奖结果| www.039098.com-天天时时彩助手最新| www.96896.com-体彩福彩合并申请书| www.079685.com-91彩票客户端| www.215566.com-福彩彩票有几位数| www.789836.com-三d开机号乐彩网| www.874349.com-湖北体彩在哪里兑奖| www.997852.com-福彩3d对子-| www.in46.com-买福利彩票-| www.836132.com-彩22平台是真的吗| www.955722.com-彩票余额修改神器| 幸运彩票www.605366.com| www.043522.com-福彩3d怪字图| www.501.site-七乐彩各省中奖结果| www.858245.com-彩票属于赌博一类吗| www.pu45.com-a1彩票-| www.80eu.com-三地彩票怎么算| www.5829.biz-澳门快三算法| www.543.top-自助彩票投注机| www.7809.org-竞彩必胜盘-| www.293850.com-福彩三地跨度走势图| www.365976.cc-新手彩铅用什么牌子| www.480064.com-红五彩吧-| www.560041.com-彩票缩水专家苹果版| www.986.cc-我玩彩票哪个平台好| www.7299.hk-分分彩做号手机版| www.38659.cc-雅彩app官方下载| www.680725.com-淘彩票注册邀请码| www.982.net-七星彩兑奖规则查询| www.7691.org-彩票900官网| www.248654.com-福彩28是什么| www.328901.com-牛彩网彩摘网吧论| www.397095.com-大连远洋竞彩15日| www.502073.com-每天抢红包彩票网站| www.579225.com-体彩排列五推荐号码| www.639974.com-华彩生活怎么还款| www.a13.xyz-七星彩票论坛精选| www.32ch.com-体彩排列三万能四码| www.0602.com-福彩丹东全图总汇八| www.54uk.com-3d福彩南方双彩网| www.1698.pro-名人彩票合法吗| www.323899.com-七乐彩开奖各省中奖| www.410050.com-世界杯竞彩分析推荐| www.522120.com-老时时彩龙虎和计划| www.495228.com-电子竞技博彩有哪些| www.559361.com-十位走走势图中彩网| www.618816.com-久久发彩票手机版| www.681605.com-福彩信息-| www.761901.com-大发快三作弊器软件| www.663816.com-分分时时彩源码| www.760999.cc-体彩七位数玩法说明| www.854745.com-广西快三改时间| www.22il.com-拍拍贷彩虹计划| www.96812.cc-安庆竞彩店交易排行| www.063021.com-全国彩票店-| 凤凰Vwww.www.fh7557.com| www.pb69.com-河北省快三统计图表| www.75og.com-体彩都有啥玩法| www.702289.com-彩票站如何加盟| www.9718.biz-彩宝彩票c-| www.73585.com-名人彩票测速网站| 来运彩票www.5688y.cc| www.234594.com-湖北彩民倍投守号| www.398935.com-彩票通代理下载| www.im10.com-山东省彩票沙龙| www.q00.cc-购买彩票软件| www.53ug.com-买的七乐彩七个号码| www.686.website福彩马莉萍-| www.3859.bid-七星彩基本走势图综| www.8708.com-利彩的赚钱-| www.43282.com-苹果下载不了旺彩| www.020126.com-广州福彩中心| www.cb05.com-彩神通代理会员专用| www.c19.shop-北京快三打法| www.75kv.com-什么叫彩票注数| www.0768.bid-天猫彩票开奖结果| www.964946.com-彩票拆分-| www.cp3138.com-下载新快三街机| www.277510.com-最有名的彩票官司| www.7636.cm-3d校验码家彩网| www.34456.com-三d彩报第三版今天| www.1co.cc-彩票猜大小走势| www.322045.com-吉林市快三结果查询| www.390908.com-火影全彩本子| www.493506.com-985彩票平台| www.554255.cc-宣传体彩标语| www.792697.com-安阳彩票中奖人| www.99338.com-时时彩模拟摇奖机| www.906412.com-分分时时彩后一技巧| www.990112.com-u9彩票有人投诉吗| www.jt41.com-新3d彩定位胆技巧| www.15yg.com-中国双色球福利彩票| www.a06.cc-大通彩票下载| www.95132.com-明哥足彩-| www.83sz.com-福彩3d奇偶-| www.1852.com-香港中持彩-| www.026994.com-新加坡快三开奖| www.466189.com-2628彩票骗局| www.782827.com-竞彩258球迷版| www.922418.com-北京足彩招聘| www.qj4.cc-快三走势图江苏快三| www.84030.com-新宇彩板今日价格| www.193.com-小清新手绘彩铅画| www.671937.com-和彩宝合法吗| www.739952.com-万博彩票网手机版| www.803317.com-上期彩票得主死亡| www.871534.com-彩票用什么软件好| www.928234.com-高频彩种类-| www.989704.com-大同彩票平台怎样| www.gx4.com-彩票1教你开挂| www.kq82.com-彩票分析师收入| www.4ee.cc-天天爱彩票旧版本| www.6665.cc-时时彩计划全天| www.58236.cc-彩乐园2下载| www.023522.com-彩票不亏损刷流水|