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天

知道了
大发快3 www.940598.com-彩神争霸11平台| www.025397.com-北京快乐彩合法吗| www.229060.com-大发分分彩计划在线| www.188312.com-爱彩乐网湖北快3| www.319115.cc-卖七星彩用什么软件| www.ne1.com-鸿彩快三彩票下载| www.538785.com-淼鑫彩票网-| www.203989.com-江西福彩加盟电话| www.250042.com-内蒙时时采彩走势图| www.281362.com-江苏e球彩总进球数| www.713296.com-湖南最新体彩快报| www.856248.com-苏州体彩网点申请| www.83993.cc-大乐透彩票用法介绍| www.588697.com-七星彩金钱头尾册子| www.663187.com-中圄竞彩网首页| www.733769.com-彩票行业取消高频| www.821216.com-武汉福彩领奖流程| www.889854.com-98年彩票最大奖| www.955947.com-新彩彩票下载安装| www.255209.com-手机验证领43彩金| www.066156.com-by彩票-| www.833560.com-足彩官方app| www.132859.com-足彩合买-| www.lm31.com-中华彩吧下载| www.94673.com-美甲美睫彩妆店装修| www.091978.com-百万彩票刷流水| www.170153.com-上海爱彩乐-| www.261953.com-易彩幸运快三app| www.9078.vip-中国福彩30选7| www.62261.cc-时时彩系统下载| www.5353.cc-80彩票输钱了| www.17389.com-排列三体彩网| www.89652.com-怎样玩幸运快三| www.060027.com-福彩选四走势图| www.128133.com-手机福彩客户端| www.82608.com-福利彩票停售时间| www.051091.com-中国第一快三| www.137014.com-金彩网彩票与你同行| www.cai7799.com甘肃福彩快3走势图| www.mi20.cc-好彩app江苏快3| www.0vh.com-众乐彩票是否真的| www.1680.me-百姓彩坛高手| www.334545.com-9万彩票官网| www.440869.com-彩钢板厚度规格表| www.475960.com-彩票网投靠谱吗| www.571196.com-青娃彩票网站导航| www.657286.com-体彩大乐透开机号| www.745689.com-贵阳福利彩票总公司| www.865381.com-分分彩历史开奖记录| www.32915.cc-体育彩票开奖7位数| www.1318.cc-103亿彩票-| www.733747.com-山西竞彩快三查询| www.586459.com-注册存一元送彩金| www.750444.com-开机i彩票-| 中彩网www.71233y.com| www.4167.biz-七彩国际影城怎么样| www.775178.com-皇家彩世界官方网站| www.24808.cc-少儿彩铅画一级| www.98956.cc-时时彩百位规律| www.49td.com-老吴彩店微博| www.842139.com-足彩直播胜负直播| 大奖彩票www.99djcp.com| www.u43.com-福彩3d稳赚钱技巧| www.203971.com-上海基诺彩票玩法| www.4mg.com-怎么彩票-| www.ne05.com-vip彩票网正规吗| www.237706.com-发彩网幸运快三计划| 大赢家彩票网www.83033f.com| www.xm19.com-北京快三正文| www.366630.com-彩铅调肉色-| www.509506.com-新利时时彩走势图| www.762282.com-彩票平台漏洞| www.885423.com-新浪爱彩彩票| www.957897.com-常州快三爱彩乐| 乐发彩票www.6515.com| www.ek13.com-下载福建快三| www.536680.com-福彩3d豹子走势图| www.318063.com-会员登录永利彩票| www.382199.com-彩栗工具一今日运势| www.397315.com-最近一期的福利彩票| www.328218.com-彩乐网福中网49| www.5266.pw-吉林快三派彩链接| www.111601.com-彩票兼职赚佣金| www.yf85.com-七星彩历史-| www.37593.com-约彩彩票是真的吗| www.022487.com-福利彩票开奖规律| www.824670.com-体育彩票手机助手| www.920304.com-鹦鹉科技博彩破解| www.980927.com-c99彩票官方网站| www.gs7.com-安徽快三计划网| www.75609.cc-仿500彩票源码| www.cai7778.com快三开奖助手官方| www.tk62.com-信誉第一的体育彩票| www.42xx.com-彩钢瓦安装方法图片| www.1227.xyz-k彩彩民褔地| www.7798.in-足彩高手心得| www.fg69.com-福彩十分钟开奖规则| www.424100.cc-金彩网天下与你同行| www.517207.com-牛彩软件-| www.71904.com-财经郎眼彩票| www.088968.com-体育彩票4+1| www.221052.com-彩神是什么-| www.t35.me-福彩长龙-| www.951063.com-武汉休闲快三第一套| www.801547.com-25彩票-| www.951633.com-红彩网络直播平台| www.cai2344.com湖湖北快三开奖结果| www.552.me-pp彩票是正规的吗| www.0xb.com-众乐三分快3彩票| www.09aw.com-中国福彩三d中奖号| www.302660.com-一定牛河南快三预测| www.80370.com-博彩国际平台手机版| www.065756.com-新粤彩网址-| www.x73.net-恢复网站彩票投注| www.888456.com-137彩票软件| www.ua74.com-解密数学破解彩票| www.35455.cc-数字三彩神通苹果版| www.052877.com-826彩票app-| www.kj63.com-快三万能码-| www.26iy.com-福利彩票快3骗局| www.776614.com-不福利彩票-| www.834774.com-好彩4味爆珠价格| www.883050.com-5亿彩是真的吗| www.931684.com-足彩跟单微信| 8号彩票www.60108p.com| www.8547.org-福利彩票站的游戏机| 网易彩票www.36788m.com| www.030071.com-玩彩吧app下载| www.8074.vip-幸运飞艇黑彩| www.20077.cc-微信彩票源码| www.01ve.com-福建彩票中奖排行榜| www.776288.com-火箭彩票安卓版下载| www.869411.com-免费够力七星彩奖表| www.924792.com-世界彩票中奖最多人| www.972304.com-菠萝彩魔图新规律| 凤凰彩票www.606920.com| www.185211.com-博牛彩票官网| www.848879.com-中国足球竞彩对阵表| www.662913.com-3d彩票有几个球| www.630426.com-好彩爆珠台版| www.33055.cc-江苏省彩票兑奖中心| www.75621.cc-福彩江苏快3| www.026703.com-q彩网在哪里下载的| www.152586.com-uu快三代理-| www.215174.com-彩富网开奖结果报码| www.0768.me-彩28彩票网-| www.832023.com-093彩票还点| www.933251.com-五省快三是哪五个| www.964929.com-114彩票旗舰网| www.04pd.com-福彩往期往期结果| 大赢家彩票平台www.082706.com| www.lt.com-竞彩足球比分| www.514224.com-上海快三结果| www.460539.com-炫彩曲棍球2| www.582136.com-879彩票平台| www.675179.com-体彩19048-| www.825909.com-星彩网app-| www.972647.com-彩铅画图片简单好看| www.bn83.com-11选五购彩-| www.52276.cc-常州福彩店转让| www.012991.com-大公鸡七星彩官网| www.j61.me-3d藏机市牛彩网| www.5274.biz-派彩网20期-| www.799259.com-奔驰彩票qq客服|