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.356531.com-酷彩吧是什么| www.532564.com-临沂体彩中心地址| www.652068.com-pk彩票手机版下载| www.752196.com-三d彩票牛治预测| www.835651.com-好彩28期开奖结果| www.917556.com-快乐彩票三| www.984086.com-779彩票靠谱吗| www.ef86.com-体彩七位数-| www.xv05.com-福利彩票开店南宁| www.27hp.com-重庆时时彩有漏洞吗| www.0286.biz-彩票推销-| www.7413.cc-色彩斑斓的意思| www.31446.com-泰国快三-| www.83385.cc-非你莫属彩票哥求职| www.048847.com-福彩大老人3d预测| www.169523.com-上海快三是什么| www.261871.com-玩快三输了12万| www.356729.com-和彩这个词对吗| www.456024.com-安微快三和值推荐| www.552602.com-类似于彩名堂的软件| www.702295.com-彩票信用盘代理| www.789496.com-重庆时时彩怎么玩| www.872455.com-贵阳福彩自助| www.971486.com-盛世彩票官网平台| www.cai6177.com江苏快三基本走势图| www.mk85.com-快乐彩介绍-| www.7ft.cc-福利彩票中三个数| www.74iu.com-河北燕赵风彩网| www.1933.tv-黑客彩票-| www.7844.vip-章鱼彩票怎么提现| www.33854.com-7星彩中奖概率| www.84733.com-广西快三停售| www.050032.com-体彩5d预测-| www.198088.com-内蒙快三合走势| www.275769.com-中国福利彩3拖8| www.376271.com-福彩开奖号码及和值| www.506701.com-彩吧学堂春利杀码| www.583533.com-彩票出奖规律| www.661981.com-怎么买竞彩容易中奖| www.775992.com-彩乐网c.49pw| www.868816.com-快三玩法表格| www.951702.com-广东福彩好彩规则| 吉利彩票www.80065l.com| www.fg63.com-彩票平台注送彩金| www.xx55.cc-中国彩票史上最大奖| www.25ta.com-信心彩票平台首页| www.0317.net-昆明彩票店转让信息| www.7024.biz-属马的与彩票| www.22322.com-彩礼官司-| www.66561.cc-1980时时彩官网| www.048047.com-山东福彩官网首页| www.131855.com-河南彩礼重-| www.210680.com-极速快三稳赚计划| www.288608.com-屠龙什么意思彩票| www.393613.com-咸阳体彩中心在那| www.518747.com-来自旺彩社区字谜| www.589798.com-老鼠精七星彩| www.664046.com-买cba篮球彩票| www.739423.com-众盈彩票-| www.813578.com-体育彩票竞彩调整| www.888804.cc-网易彩票电脑版首页| www.992889.com-快三二同号有多少| www.ef.com-中国竞彩足球计算器| www.oi36.com-宁夏快三走势图电子| www.7hy.com-彩票店铺公告| www.62qr.com-风铃艾彩原创合集| www.0516.org-公益彩票软件| www.8462.vip-七彩票今天开奖结果| www.71149.com-体彩开奖号码公告| www.031585.com-体育彩票算赌博吗| www.109976.com-快三中俩号有钱吗| www.176710.com-快三破解器是真的吗| www.254234.com-c58彩票.com| www.327144.com-全国联网彩票走势图| www.399161.com-中国体彩七星彩历史| www.570949.com-钟嘉欣好彩妹图片| www.642921.com-香港新出彩票网站| www.739379.com-山东体彩站点查询| www.848799.com-汪汪时时彩最新版| www.922995.com-急转体彩店-| www.983276.com-盈彩会是真的假的| www.jb20.com-福彩规则中奖规则| www.b11.pw-网彩快三能赚钱吗| www.28gx.com-手机336彩下载| www.799.date-大六壬测彩诀窍| www.4834.xyz-世界杯阿根廷彩票| www.9966.wang-江南彩姐彩票专栏| www.61766.com-江西快三助手下载| www.018193.com-三国梦想星彩漫画| www.085583.com-快8彩票中奖几率| www.144736.com-淘宝快三基本走势图| www.363539.com-美国彩虹有几种颜色| www.448465.com-豪彩安卓手机版下载| www.539142.com-桃花运电视剧彩票| www.638678.com-上海体育彩票店| www.717939.com-彩库宝典安装| www.790523.com-幸运快三开奖查询| www.862993.com-周五哪些彩票开奖| www.926464.com-手机上买彩票安全吗| www.979635.com-玩时时彩送彩金| www.dn40.com-吉林快三二十分钟图| www.uu96.com-中国福利彩票快3| www.04ep.com-落日风景彩铅画| www.88kg.com-县政府卖彩票合法吗| www.2266.pw-福彩双色球定胆技巧| www.7508.com-彩票店装饰-| www.21985.com-福利彩票预算| www.62337.cc-彩票断组软件| www.068096.com-1分时时彩人工计划| www.129197.com-3d彩票网站-| www.196236.com-极速快三预测网站| www.265923.com-宁夏体彩总部| www.501356.com-易彩云彩票下载安装| www.576311.com-唐山万达附近福彩| www.645892.com-彩票稳赢投法| www.796216.com-盛世彩票骗了多少人| www.872053.com-买体育彩票几位数字| www.959320.com-数字彩票开奖信息| 金冠彩票www.49956z.com| www.ft44.com-手机彩票投注靠谱吗| www.xf49.com-四九彩票网-| www.14fy.com-369彩app下载| www.515.red-彩票占卜-| www.3868.cm-七星彩定胆杀号| www.9126.me-彩票复式怎么买| www.56571.cc-彩53登录入口| www.99555.cc-波叔竞彩推荐| www.061382.com-中华彩票网是真的吗| www.162203.com-鸿运彩票是正规的吗| www.246857.com-五百万彩票网完整版| www.316132.com-牛牛彩票怎么回事| www.383111.cc-苏州福彩快三规则| www.574422.com-电信彩铃网站| www.640759.com-荣耀彩票是正规的吗| www.735032.com-网络时时彩诈骗案| www.801789.cc-大钱庄彩票app| www.874711.com-198彩开户-| www.957754.com-乐点彩神-| www.996499.com-黑龙江彩票app| www.cp7922.com-福利彩票快3开奖| www.mf12.com-快三昨天的开奖号| www.g66.cx-特彩吧旧-| www.31rf.com-彩虹mv影像计划| www.0459.win-福彩双色珠走势图表| www.6669.la-中国体彩几点开门| www.13815.com-爱彩彩票网站首页| www.54531.com-中奖彩票图-| www.025802.com-淘宝彩票入口在哪| www.116016.com-官网500彩票下载| www.184200.com-网易新快三黑庄赌博| www.253154.com-竞彩足球预测软件| www.322736.com-体彩七星彩开奖直播| www.388026.com-华彩益彰成语| www.586848.com-南方双彩网大乐透| www.654758.com-重庆5分分分彩| www.747342.com-福彩三d谜语总汇| www.811087.com-彩票走势图彩助手| www.878990.com-现在手机怎么买彩票| www.961191.com-分分彩预测网站| www.998818.cc-天津快三走势图解| www.cp7338.com-王者彩票靠谱吗| www.ku41.com-天天快三有什么规律| www.zv94.com-竞彩彩票店限制| www.25bc.com-腾讯分分彩后二组选|