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天

知道了
106官网彩票平台 www.677633.com-彩票算号器在线使用| www.666719.com-星乐彩充值安全吗| www.762611.com-5分时时彩官方网站| www.8578.in-新盈彩app地址| www.70232.com-精彩大片-| www.079017.com-北京全民星彩正规吗| www.181395.com-808彩票网-| www.275950.com-爱彩彩-| www.391685.com-易迅彩票可靠吗| www.525872.com-福彩3d心得-| www.621983.com-彩票洗黑钱-| www.745625.com-彩61主页-| www.839000.com-北单足球彩票| www.917730.com-彩虹六号视频| www.979521.com-龙彩居士排列三预| www.oz5.com-福彩双色球35期| www.ww50.cc-微彩吧电脑版| www.12480.cc-幸运彩票安卓下载| www.036583.com-福彩快乐彩开奖号| www.203016.com-福彩快3今天开奖号| www.284355.com-福利彩票包含哪些| www.368122.com-快三是怎么开奖的| www.506887.com-至尊彩是真的吗| www.619057.com-彩妆店装修图片欣赏| www.699751.com-nba体育彩票分析| www.785228.com-大胜彩票带电玩城| www.gu55.com-彩77官网下载安装| www.07jv.com-三彩翡翠手串| www.81628.cc-福彩昨天的中奖号码| www.112223.cc-注册送彩金赌场网址| www.207171.com-nba体彩-| www.299238.com-中彩网开奖-| www.587305.com-大唐合一彩票| www.712595.com-下载齐鲁风采七乐彩| www.796512.com-足彩14奖金-| www.873763.com-老杨说彩近15期| www.999586.com-福彩3d八卦图| www.an96.com-苏州福利彩票双色球| www.ur53.com-私彩网络平台| www.18og.com-什么的彩虹桥填空| www.0171.com-彩色物品-| www.7306.vip-手机版彩虹六号| www.22396.com-彩礼跟嫁妆-| www.69573.cc-彩票3d选号新方法| www.038331.com-彩经网3d形态走势| www.123607.com-福星彩资料开奖| www.194168.com-彩票长龙助手| www.263673.com-福彩体彩下载安装| www.337500.com-天天盈球竞彩大势| www.408722.com-大牌彩妆品牌| www.510245.com-哪个平台可以买体彩| www.578251.com-体彩甘肃-| www.646488.com-下载头奖彩票软件| www.741411.com-竞彩分直播500| www.811699.com-甘肃快三4月14日| www.881526.com-哪个平台做电竞博彩| www.963594.com-做彩票代理怎么赚钱| www.qh.cc-快三一直赚钱| www.qs51.com-福彩中心事业编| www.56sd.com-彩票历史数据下载| www.1284.me-云南福彩大乐透开奖| www.34897.com-购乐彩合买大厅| www.79839.com-快三怎么不能投注| www.630213.com-9988彩票-| www.728702.com-京东彩票怎么买彩票| www.871434.com-中国福利彩票时时彩| www.979257.com-中国福体彩票| www.cp3598.com-开彩票店的禁忌| www.rf34.com-极速重庆时时彩开奖| www.47ce.com-分分彩刷返点| www.5335.biz-彩票15选5-| www.51676.cc-凤凰网投港彩48倍| www.019208.com-时时彩五星缩水手机| www.zd37.com-快三走势河北| www.7911.cc-云利来彩票-| www.91503.com-五百彩快三-| www.23bk.com-精彩音乐汇2017| www.127025.com-福建省手机快三查看| www.260632.com-捡到刮刮乐中奖彩票| www.382365.com-足球彩票运气| www.612793.com-1旺旺彩票-| www.720636.com-七星彩中奖了怎么办| www.369280.com-河内彩票骗局| www.586335.com-登录福彩诈骗| www.797688.com-福利彩票创始人| www.890241.com-高频时时彩app| www.972951.com-好运来彩票诈骗| www.cp991.com-查下福建快三预测号| www.b82.vip-卖七星彩用什么软件| www.88vf.com-富赢彩票邀请码| www.043998.com-订阅足彩310报| www.191159.com-甘肃快三遗漏查询| www.290016.com-彩铅画简单入门图片| www.370754.com-时时彩票怎么下载| www.469707.com-永辉彩票下载安装| www.559362.com-三d彩经网开机号| www.637581.com-彩虹6怎么玩| www.913021.com-我去彩票站是真的吗| www.973595.com-手机反光彩膜| 大赢家彩票平台www.671075.com| www.rc77.com-老彩民软件-| www.1538.bid-牛彩网3d定胆条件| www.21572.cc-爱投口袋彩票合法吗| www.77578.com-彩票怎么中奖率高| www.033853.com-nba竞彩篮球彩票| www.128688.cc-快三秒招聘-| www.216217.com-彩票数理九宫八卦图| www.306439.com-甘肃彩工网-| www.398038.com-五福彩票提现失败| www.fi3.cc-福彩快12中奖规则| www.7499.top-高频彩彩票的骗局| www.28770.com-彩票为什么赢小输大| www.75736.com-老猫看彩快讯| www.030737.com-微信上那个中国彩| www.104038.com-今日竞彩预测| www.192990.com-河北快三推荐| www.295885.com-彩票开奖信息查询| www.369886.com-彩之云不登录| www.476422.com-六福彩票注册| www.560687.com-彩票属于五行属什么| www.925213.com-彩博是什么意思| www.979052.com-彩票123分分彩| www.cp831.com-贵州福彩地此| www.mv20.com-河南幸运彩跑马图| www.m71.net-体育彩票输钱| www.63by.com-福彩基诺开奖| www.0856.date-778彩票网-| www.6502.com-斗牛彩票如何开户| www.38744.com-福彩3d绘图-| www.910693.com-9号彩票平台| www.970589.com-彩票专家最厉害的| www.bu23.com-甘肃福彩汇总图| www.zs39.com-福利彩票大乐透玩法| www.34ue.com-体彩可以网上购买吗| www.114264.com-网上买彩票哪家靠谱| www.73ny.com-网易体育彩票停售| www.9409.net-西哈努克港博彩上班| www.60552.com-nba彩票怎么玩法| www.053876.com-yy彩票登录线路| www.164053.cc-百姓彩票网可靠吗| www.286472.cc-体彩报纸-| www.498615.com-副利彩票12选5| www.795026.com-重庆老时彩走式图| www.953252.com-彩票直播-| www.17cn.com-最近出版彩票书| www.3862.xyz-彩票cp9811-| www.09805.com-福彩3d论坛| www.68953.com-盈彩吧是不是真的| www.137472.com-成功彩票正规吗| www.217024.com-全国快三有多少个省| www.293963.com-福彩42期-| www.365116.cc-风之彩app彩票| www.464270.com-中了七星彩去哪领奖| www.567582.com-彩票中奖发的朋友圈| www.647424.com-网易彩票在那下载| 彩之堂www.44czt.com| www.po27.com-怎么看彩票趋势图表| www.46hl.com-彩票3d开奖22号| www.1373.hk-简单水彩抽象画| www.16165.com-国家认证彩票app| www.58779.cc-下载体育彩票开奖| www.115865.com-彩铅风景画图片| www.184813.com-868彩票分析选号| www.254944.com-分分时时彩人工计划|