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.50054y.com| www.47mf.com-环彩网官方网站| www.341569.com-中国体彩手机版| www.534622.com-福利彩票机器加盟| www.690786.com-足彩19055期| www.875094.cc-酷彩吧彩票下载| www.8513.org-中国福彩消消乐| www.549822.com-十分彩是不是骗局| www.677066.com-福彩3d组选走势| www.847031.com-3d福彩大厅-| www.94nh.com-体育彩票流程| www.074655.com-彩6下载平台| www.255229.com-最佳彩票平台| www.17pk.com-彩鸾归令的意思| www.040798.com-博彩打水套利| www.218901.com-信博彩票是真是假| www.524930.cc-黑客盗取私彩平台钱| www.687507.com-彩票刮刮卡下载| www.848843.com-山西太原结婚彩礼钱| www.bw59.com-河南快三赔率表| www.1ei.com-网上彩票违法吗| www.713561.com-领航彩五分快3| www.497334.com-九州彩票登录手机版| www.971706.com-第一彩票网手机版| www.lr19.com-三d彩票预测| www.26848.com-福彩排三走试图| www.678954.com-甘肃快三豹子出法| www.158133.com-彩投是什么意思| www.830833.com-年会彩票平-| www.948573.com-在手机可以买彩票吗| www.cp251.com-吉林快三开奖助手| www.169009.com-江苏快三遗漏表| www.262923.com-河北福彩快三遗漏直| www.456328.com-彩票平台领取彩金| www.613102.com-福彩l开奖-| www.739075.com-彩神通破解| www.867955.com-上海快三号码预测| www.251168.com-app彩8下载-| www.503728.com-234彩票送彩金| www.4314.org-体彩排五式机号| www.205635.com-十分彩是正规的吗| www.680122.com-彩票上的字体| www.27983.cc-不正规彩票网址| www.118951.com-网易福利彩票预测| www.585776.com-现金彩票软件| www.700485.com-足彩兑奖-| www.461338.com-大乐透彩民乐解释图| www.501322.com-广东体彩结果| www.787400.com-万彩吧马会幽默| www.3wp.com-福利彩票谁发明的| www.57657.com-166cp彩票-| www.ij03.com-福彩3d安装-| www.85qr.com-彩票大家乐邀请码| www.25110.com-彩铅品牌排行榜| www.bq02.com-七乐彩几个号才中奖| www.61786.com-3d彩票字谜今天| www.98112.cc-足球彩票合买吧| www.877905.com-男主中彩票的小说| www.949907.com-炫乐彩票网址多少| 福利彩票www.99677t.com| www.51289.cc-九号彩票客户端下载| www.fp05.com-足球彩票怎么玩| www.o56.com-购物送彩票合法吗| www.125.la-彩玉收藏-| www.59937.cc-百乐彩娱乐平台| www.363393.com-彩虹是什么生肖| www.418326.com-双龙彩票-| www.550739.com-878彩票网站平台| www.634635.com-七彩孔雀釉建盏介绍| www.730390.com-互娱彩票下载| www.803520.com-体彩6十l开奖结果| www.878995.cc-江西快三奖号走势图| www.952497.com-于立猛两次中彩票| 凤凰彩票www.77802s.com| www.585172.com-新快三走势图安徽| www.684522.com-福彩3d号码直选表| www.888097.com-五百彩票邀请码| www.344492.com-时时彩自动解码器| www.437920.com-延安市福彩中心地址| www.529255.com-羽泉彩虹吉他谱c调| www.592856.com-彩虹七号官网| www.665874.com-欧洲福利彩票| www.730048.com-易彩票赚钱吗| www.802453.com-福利彩票出兑| www.896491.com-华夏彩票平台登录| www.963804.com-新手彩票怎么玩法| 大赢家彩票平台www.320160.com| www.gm94.com-彩票走势图新浪| www.xo55.com-福利彩票双色球网站| www.10bs.com-1235cc彩票-| www.66vz.com-彩站宝客服怎么联系| www.96651.com-中国彩票作弊人员| www.103349.com-旺彩双色球预测大师| www.089968.com-网络彩票怎么找顾客| www.71ot.com-福彩上班时间| www.6480.cn-苏宁大发快三| www.22810.com-免费的彩票计划| www.99572.cc-分分彩可以作假吗| www.8494.cc-久久彩票安卓版| www.52263.cc-爱乐彩票之类的软件| www.008549.com-8月16号体彩3| www.113313.com-双色球彩经网预测| www.rv31.com-河南福利彩票幸运彩| www.07gl.com-星空蓝鲸彩铅画| www.83qm.com-福彩3d表势图| www.412313.com-竞彩篮球新浪爱彩票| www.w07.cc-今天三d彩民乐图| www.96cb.com-福彩网怎么快速挣钱| www.311907.com-甘肃体育彩票走势图| www.714695.com-1210彩票-| www.mh78.com-彩票女-| www.29vt.com-体彩今天出什么号了| www.763.website时时彩遗漏回补| www.5443.cm-梦见猪买什么彩票| www.9946.biz-明天体彩开奖吗| www.066384.com-567彩票下载苹果| www.751476.com-瑞彩祥云apk下载| www.893856.com-c彩61怎么下载| www.fl00.com-彩票奖金-| www.1gj.cc-777彩票乐透软件| www.78sx.com-泊利彩票平台可靠不| www.679433.com-至尊快三破解| www.761481.com-体彩7星彩-| www.826537.com-白马彩票-| www.rx15.com-福利彩票256| www.530314.com-普通彩铅怎么画星空| www.633583.com-468彩票官网| www.715225.com-彩票实体店代购系统| www.776816.com-猜球吧竞彩app| www.99356.cc-乐米彩票中一等奖| www.084168.com-佳缘彩票托的套路| www.163619.com-体彩容错怎么打| www.249818.com-棒棒彩票骗局| www.324713.com-中国福利彩票副主任| www.388282.com-北京华彩集团招聘| www.499113.com-帝皇国际彩票网| www.562219.com-万彩影像大师能破解| www.703001.com-大润发博彩送彩金| www.1739.com-双赢彩票账号登录| www.011275.com-海南七星彩私彩代理| www.090465.com-全发彩票官网| www.149700.com-彩民乐探码图双色球| www.393949.com-云南时时彩开奖软件| www.71448.com-大发快三手机作弊| www.jf44.com-快三推广-| www.75wa.com-5维彩超图片| www.875381.com-时时采彩官方app| www.970064.com-彩票带单骗局| www.93ay.com-香港五分彩什么规则| www.6343.top-郑州福利彩票在哪| www.230912.com-彩票933最新版本| www.606608.com-彩票羊数字-| www.19673.com-彩票图片3d今天| www.82203.com-幸运快三怎么看豹子| www.035017.com-彩票广东新快网| www.130980.com-结婚彩礼价目表| www.16gr.com-江苏k彩线路| www.11mw.com-577彩票apk-| www.033028.com-七乐彩中奖号码预测| www.276392.com-北京福彩客服电话| www.356395.com-彩票推算公式| www.52778.com-七彩云南翡翠怎么样| www.493815.com-立即购买双色球彩票| www.595193.com-双彩网投资-|