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.731830.com-彩色包装纸箱厂家| www.894503.com-五省快三哪五个省| www.969228.com-众彩网是不是骗局| www.eq98.com-百乐彩app下载| www.b71.cn-南昌假彩票站| www.47gx.com-河北省福彩客服电话| www.0655.cm-15选5走势图福彩| www.9939.in-排列三杀号家彩网| www.62242.com-三彩家官网-| www.954175.com-江苏体彩e球胜负平| www.cp7070.com-套彩金骗局-| www.727457.com-福彩中奖在哪里兑换| www.813809.com-河内1分彩是什么| www.892031.com-快乐彩12选五| www.964682.com-竞彩篮球推荐捷报| 彩票云www.888258.com| www.cb36.com-黑彩做庄技巧| www.a16.me-爱彩人app-| www.70533.com-彩运8合法吗| www.08139.com-8号彩票下载| www.5166.live-彩铅画荷花池| www.509172.com-彩票滴滴跟单| www.601630.com-想挣点零花钱买彩票| www.448665.com-大花猫2彩吧图库| 天天彩www.87096.com| www.5025.cm-吉祥彩登录地址| www.781084.com-彩虹连衣裙-| 好彩www.60123t.com| www.ew68.com-体彩体彩开奖| www.q08.xyz-广西快三网上投注| www.92js.com-套彩金刷流水兼职| www.190637.com-中信彩票是正规的吗| www.292948.com-河南体彩手机版| www.026072.com-十分彩是什么| www.269135.com-98彩票网安全吗| www.153526.com-360竞彩篮球| www.420061.com-中博系统彩票| www.oi52.com-高频彩票官方开奖网| www.18wo.com-七乐彩什么好| www.1015.name-无意中玩上快开彩| www.8049.com-3d水彩香推荐号码| www.41hq.com-福彩体彩春节放假| www.344197.com-体彩模拟器-| www.548854.com-彩6邀请码-| www.717976.com-中国体彩报在线| www.792503.com-大连福彩管理中心| www.872010.com-贵州彩票投注站| www.951999.cc-彩神计划破解充钱| 彩69www.022173.com| www.nc54.com-中彩福彩票软件| www.27.org-中国彩票主任| www.m97.biz-12321举报黑彩| www.022189.com-体彩六加一开奖号码| www.034428.com-nba彩票网站| www.144499.com-彩票诗词-| www.cp7750.com-欢乐快三是哪里的| www.tt45.com-采乐彩票网-| www.9th.com-体彩应该怎么买| www.750916.com-彩票20万缴多少税| www.100188.cc-87彩票app-| www.246249.com-江苏快三预测号| www.351723.com-福彩辽宁12选五| www.881558.com-辉煌彩票网站导航| www.66441.cc-彩票中的三不同号| www.155330.com-体育彩票胜负彩规则| www.351926.com-香港福利彩票资料| www.0982.cc-粤彩网彩票靠谱吗| www.27389.com-快三吧-| www.785198.com-胜彩票-| www.00515.com-彩票转让合同| www.50600.com-快彩票下载-| www.53oy.com-彩票达人下载安装| www.1768.cc-福彩300秒-| www.537995.com-苏州体彩中心兑奖| www.601477.com-香港十分彩网站平台| www.370149.com-网易七星彩自选| www.605970.com-彩乐园lll-| www.918658.com-金百博彩民乐园| www.27yd.com-注册彩票账户| www.267615.com-彩票计划者-| www.137742.com-双色球彩票作假事件| www.365743.cc-看福利彩票开奖| www.770834.com-腾讯分分彩龙虎平刷| www.866386.com-手机可以投注的彩票| www.944522.com-手游彩app-| www.989876.com-七七彩票是真的假的| www.da08.com-彩票争霸2-| www.wp81.com-彩票3d九宫图技巧| www.36qt.com-快频彩票免费下载| www.804433.com-下期体彩七星彩预测| www.896735.com-中彩双色球走势图| www.962452.com-下载中国福利彩票网| 百姓彩票www.bxcp3.com| www.562142.com-大公鸡七星彩手机| www.636737.com-儿童画彩虹桥怎么画| www.916778.com-彩铅画图片人物背影| www.969675.com-快三跟计划几把止损| www.cp7117.com-彩票托聊天套路| www.525235.com-时时彩大全app| www.385492.com-彩票输了叫-| www.680255.com-安卓彩票软件排行榜| www.762663.com-博王时时彩下载| www.956199.com-七星彩今天出什么码| 中国彩票网www.zg39.com| www.188427.com-足彩能网上投注吗| www.dc1.com-彩票五分快三是什么| www.650117.com-如何博彩-| www.781808.com-宝马彩票是不是涉赌| www.5918.cm-吉林快三赔付| www.60hf.com-什么是购彩平台| www.2774.biz-下载鸿运彩票网| www.607358.com-彩托怎么当-| www.673978.com-经财政部批准的彩票| www.744399.com-彩虫七星彩-| www.222260.com-手机正规彩票app| www.680804.com-彩美旬果论8链接| www.758766.com-阿里彩票是正规的吗| www.848028.com-福利彩票123等奖| www.911312.com-k彩彩票二维码下载| www.962474.com-1360亿彩票事件| 盈发彩票www.77yfa.com| www.123791.com-体育彩票任选五| www.211821.com-安徽彩票十一选五| www.4152.biz-七彩阳光背面示范| www.9069.vip-头彩软件-| www.46444.cc-宁夏好彩快三| www.961446.com-88爱彩-| 大赢家彩票平台www.081502.com| www.72if.com-全彩漫画之大鲸| www.04gz.com-福彩群英会手机软件| www.91hm.cc-开开彩乐创意美术| www.377958.com-襄阳彩礼钱20万| www.535178.com-时时彩黄金分割教程| www.639760.com-体彩牛牛彩-| www.700217.com-彩票随机打法| www.771361.com-彩虹6号配置| www.821999.com-3d彩漫隐身恶魔| www.876145.com-福彩3d高手技巧| www.pu10.com-广西快三害人输惨了| www.784371.com-乐米彩票ios| www.855951.com-3d彩谜画谜汇图| www.910612.com-3g彩票网站-| www.972341.com-优博彩票网站| www.cp82.com-多乐彩开奖走势图| www.io06.com-七乐彩推荐号| www.t19.cc-贾峪镇彩票中奖| www.62lc.com-双色球彩票开时间| www.818.top-彩票直播平台| www.4243.in-七彩汇二维码| www.8565.com-体彩昨晚开奖| www.25796.cc-体彩手机客户端| www.333980.com-微信购买体育彩票| www.399920.com-开心七星彩一手机版| www.199805.com-武汉快三查询| www.634125.com-建盏洋彩-| www.030970.com-彩票真的有人中奖吗| www.023784.com-网上所以彩票客户端| www.091866.com-梦见手机号码买彩票| www.198906.com-什么是快3福利彩票| www.382861.com-19006期胜负彩| www.504563.com-踩台和彩排是一样吗| www.564546.com-时时彩前二72注| www.618757.com-知名足彩分析师招聘| www.675321.com-澳洲高频彩票三分彩|