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天

知道了
江西11选5 www.9162.xyz-我需要乐彩网| www.411866.com-彩票快速查询方法| www.604343.com-688彩票怎么样| www.754546.com-中国福彩3d中彩网| www.866408.com-昨日福彩-| www.ep24.com-快三大小预测的软件| www.813645.com-银川体育彩票电话| www.953249.com-彩8彩票客服| www.zs2.com-大发快三口诀| www.w21.cc-诺亚彩票登录| www.618.name-福彩3d天气网保真| www.121774.com-中港彩票网登录| www.206949.com-彩票帮投做任务| www.289924.com-360彩票是合法的| www.884422.com-乐彩双色球诗迷论坛| www.989796.com-购彩8816-| www.bg20.com-黑彩稳赚-| www.257378.com-福彩快三黑彩| www.449220.com-卖体育彩票怎样抽成| www.247756.com-数字型彩票黄金定律| www.352236.com-举报网络彩票有用吗| www.517695.com-我爱中彩票网官网| www.va60.com-体彩481中奖规则| www.21bu.cc-福利彩票电视哪个台| www.520679.com-时时彩任三混选技巧| www.675146.com-多玩彩票兼职可靠吗| www.595013.com-唯博彩票信息官网| www.708332.com-blued彩票-| www.cp6623.com-北京快三最大遗漏| www.668561.com-吉隆坡博彩不要去做| www.813684.com-中国福彩代理| www.970424.com-天天乐彩彩票| www.83dj.cc-河南幸运彩争先勇士| www.164404.com-彩票组选120| www.760628.com-彩票最高奖金| www.848496.com-加州时时彩走势图| www.930633.com-彩票税收-| www.21st.cc-福利彩票口号扶老| www.538135.com-86552国彩平台| www.666011.com-玩赚彩票软件下载| www.780538.com-今日篮彩推荐| www.871068.com-彩票计算器下载| www.956187.com-彩票到底能不能赢钱| www.by21.com-彩票专业术语有哪些| www.39890.cc-祥云纳彩荣耀播报| www.59166.com-福彩站点怎样申请| www.089950.com-彩神帝邀请码| www.446.tv-鸿彩靠谱吗-| www.098311.com-3d福彩计划胆码| www.101802.com-手机红彩会-| www.308057.com-分分彩后二怎么杀号| www.au28.com-福彩精彩快乐10分| www.0iy.cc-无忧四溢彩打一生肖| www.159640.com-足彩任九开奖结果| www.108606.com-合创彩票app下载| www.254231.com-爱乐彩时时彩推荐号| www.385668.com-地下六仺彩开奖网站| www.932038.com-天马彩票快3| 500彩票www.26299f.com| www.kf94.com-北京快三推测软件| www.m00.site-乐彩网大发-| www.72qu.com-南方福彩选众彩网| www.2363.org-全国联网福彩3d| www.9366.vip-星彩47933-| www.39056.com-官方分分中彩票软件| www.773662.com-体彩大乐透直播现场| www.30267.com-福彩双色球开奖今天| www.217024.com-全国快三有多少个省| www.344646.com-国乐彩官网下载| www.510250.com-夸女生好看的彩虹屁| www.628278.com-彩神争霸邀请码多少| www.747311.com-505彩票网安全吗| www.889926.com-nba篮球彩票推荐| www.998435.com-福彩开将结果今天| www.13gg.com-下载218王者彩票| www.135884.com-足球竞彩胜负平规则| www.776137.com-体彩三d开机号| www.896823.com-江苏快三福彩开奖号| www.996769.com-陕西快三走势图表| www.lz66.cc-时时彩大全下载| www.098.live-顶级彩票登录| www.7091.cn-3d家彩网胆码预测| www.53787.cc-七星彩梦兆号码查询| www.027189.com-078彩票骗局| www.139184.com-二分时时彩技巧| www.255777.cc-七星彩中奖规则说明| www.42752.com-中彩网怎样支付| www.120287.com-腾讯中国彩合法吗| www.455098.com-中乐彩网是否合法| www.934691.com-福彩天齐网站| www.345930.com-云彩厅是不是骗局| www.ne57.com-乐优炫彩官网| www.75ci.com-足彩总进球单双赔率| www.8409.com-网易彩票现场直播| www.ac39.com-体彩河北十一选五| www.ry16.com-彩票计划群24小时| www.7ye.com-彩票中奖离婚事件| www.72wo.com-时时彩带单老师骗局| www.0753.love-福利官方购彩软件| www.1061.top-玩大发快三的技巧| www.079613.com-体彩福彩兑奖规则| www.185230.com-好彩烟有几种| www.255157.com-利用时时彩漏洞赚钱| www.323610.com-香港赛马彩票| www.377322.com-福利彩票店开业| www.486518.com-蓝彩瓷瓶-| www.131197.com-郑州市内彩礼| www.304499.com-福彩快三跨度图表| www.545889.com-彩八仙pk手机版| www.723277.com-东彩娱乐贴吧| www.846152.com-乐乐彩票可以挣钱| www.921488.com-彩神黑钱-| www.975096.com-查福彩开奖-| www.zt.cc-中彩彩票下载安装| www.or79.com-靠谱的彩票软件制作| www.84ty.com-返回三分时时彩| www.557069.com-体育彩票大乐透复式| www.pv9.cc-快三彩票是什么啊| www.916464.com-甘肃快三奖金是多少| www.d66.club-今日体育彩票号码| www.573219.com-彩云的彩是什么意思| www.678284.com-体彩投注点-| www.814471.com-19035期足彩| www.917688.com-时时彩最安全的玩法| www.995437.com-易彩娱乐登录| www.go48.com-河南商丘彩礼| www.41cw.com-体育彩票休假时间| www.974.xyz-七乐彩咋玩-| www.8200.loan-安徽快三时间| www.w25.shop-秒速快三计划| www.314.la-购彩上1288-| www.691231.com-烟台福利彩票申请| www.5177.live-彩票生意怎么样| www.19896.com-微信里面能买彩票吗| www.76628.cc-棋牌注册送彩金| www.915216.com-小米彩票官网首页| www.984593.com-人人购彩票-| www.bm3.com-精彩十分福彩| www.236166.com-1360彩票-| www.577129.com-彩票账号无法注销吗| www.032.biz-华富彩票-| www.7687.vip-下载手机彩票| www.we28.com-下载广西福彩网| www.tp57.com-推算彩票系统| 汇彩网www.www.hcw266.com| www.133861.com-好彩1开奖走势| www.4963.biz-体彩足球中奖图片| www.480090.com-秒速时时彩单双技巧| www.tr78.com-贵州快三官网| www.11bm.cc-桃花彩铅画图片大全| www.98lk.com-东莞体彩网点| www.2909.cc-一分钟时彩能玩吗| www.4558.biz-怎样学买彩票| www.19766.cc-快三8和值会出哪些| www.85017.com-3d彩圣字迷-| www.023828.com-r8国际彩票-| www.079026.com-九宫八卦彩票| www.133397.com-富民彩票是黑网站吗| www.189403.com-彩票术语-| www.250411.com-中彩彩票可靠吗| www.692983.com-体彩销售网点查询| www.555294.com-七星彩容易中奖技巧| www.18zn.com-网上女孩邀请玩彩票| www.749.cn-五星彩是什么平台|