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.9632.biz-澳洲时时采彩是官网| www.958472.com-福彩1分钟开奖| www.dm76.com-澳门六星彩资料| www.u50.top-新万能彩吧-| www.77ti.com-彩票网站怎么盈利| www.644090.com-青蛙彩一秒前往| www.32575.cc-足彩预测大师| www.004314.com-竞猜足彩吧-| www.100585.com-体彩不败胆码| www.178808.com-福彩快三规律破解| www.258584.com-湖北快三精准计划群| www.338651.com-武汉彩票事件| www.5uo.cc-中国福彩双色球图片| www.329078.com-白菜免费彩金| www.427062.com-足彩大小球技巧| www.71hw.com-体彩排列3图迷画迷| www.520356.com-合乐彩票哪个是真的| www.627430.com-海贼王罗彩铅| www.727255.com-abc彩票登录网站| www.809878.com-必赢彩票相关新闻| www.887643.com-彩票包赚-| www.po29.com-彩神vii下载| www.05xb.com-国产牌子最好的彩铅| www.70kr.com-彩易达上市了吗| www.341858.com-诺亚彩票账号注册| www.473600.com-惠州彩票中奖| www.199.top-类似优彩的论坛| www.6474.me-福利彩票三d推荐号| www.395638.com-彩虹卖号网站| www.dg48.com-新快三手机版下载| www.xc67.com-澳门官网彩票| www.19ex.com-上期福彩号码| www.721.cm-乐城彩票彩种| www.238910.com-微信女的让你玩彩票| www.321520.com-安徽一定牛快三遗漏| www.913119.com-今天彩票指南报纸| www.977861.com-足彩买不了了| www.18ie.com-什么彩票天天开奖| www.132835.com-世界杯彩票买不了了| www.218397.com-吉林快三盘有鬼吗| www.293573.com-青岛福利彩票兑奖处| www.881732.com-辉煌彩票苹果版| www.981169.com-微信拉人买彩票真假| www.df8.com-快三豹子4出号规律| www.ou83.com-彩票端有靠谱的吗| www.42ya.com-福彩3d走透图| www.574.me-胜负彩最新预测| www.3758.com-旺彩双色球下载地址| www.294566.com-五分快三下载| www.884767.com-体育彩票店分哪几种| www.969471.com-宝马彩票计划网| 彩宝www.911888.com| www.57604.com-彩八仙苹果-| www.568760.com-福彩3d怪字图专区| www.mq73.com-七开奖结果星彩| www.u98.club-山西省中国福利彩票| www.48zu.com-七彩丹霞图片| www.718.biz-竞彩推荐表格制作| www.222177.com-快三平台官网| www.296958.com-中信彩票是不是真的| www.882826.com-怎样看彩票走势讲解| www.986559.com-皇冠足彩网-| www.ls1.com-正规大发快三| www.ps89.com-三分彩软件-| www.4qm.com-天天好彩论坛| www.85fm.com-凤凰彩票的玩法| www.307810.com-腾讯分分彩漏洞百出| www.472970.com-彩吧论坛首页i3| www.773708.com-500彩票大发3| www.905230.com-澳门国际彩票平台| www.971055.com-值得信赖的彩票平台| www.nb5.cc-福彩3d和值表图| www.37sx.com-时时彩推波玩法表格| www.5153.biz-韩国彩票走势图解| www.315316.com-彩96计划app| www.391390.com-5星彩下载-| www.5815.biz-亚彩会代理注册| www.639678.com-彩团网cai7-| www.69660.cc-爱彩票网比分直播| www.042447.com-多彩贵州网领导成员| www.132060.com-彩礼超-| www.203653.com-河南快三下载安装| www.963497.com-足球彩票29期比分| 500彩票www.701540.com| www.181926.com-河北福彩快3走势图| www.249323.com-e购彩彩票中心| www.345635.com-福彩双色球复式| www.420114.com-cp彩票软件安全吗| www.ze62.com-趣九购老彩票| www.29jp.com-搜狐彩票电-| www.458021.com-海南七星彩私彩赔率| www.k12.in-3d牛彩网-| www.44bb.cc-彩票网线路检测中心| www.0674.top-彩乐园推广码| www.505328.com-体彩真伪查询| www.578276.com-爱购彩彩票网是骗局| www.669835.com-体彩有几号码| www.4592.vip-体彩中奖秘籍| www.539090.com-彩票站转让费| www.3292.biz-三d彩宝贝走势图| www.519068.com-彩投彩票网官方网| www.590618.com-下载福彩快三| www.1633.live-快彩助手软件| www.535740.com-买彩票需要几个数字| www.gi81.com-加盟快三秒-| www.yl08.com-松原快三开奖结果| www.39mc.com-赢家彩票网-| www.176325.com-十分快三计划预测| www.268143.com-我想买彩票总么买| www.371636.com-瑞彩彩票安卓版下载| www.456174.com-联机盒子彩名| www.537262.com-福彩怪事-| www.dp53.com-118彩票骗局| www.vc11.com-幸运快3彩票计划| www.23oy.com-3d开奖彩吧助手| www.332440.com-彩票骗局大揭秘| www.949865.com-九州彩票网是真的吗| www.994368.com-微彩在线是骗局吗| www.dk99.cc-大吉彩票-| www.vd22.com-广西快三基本分布图| www.60.com-德系红松石七彩| www.111866.com-558赢彩安全吗| www.881403.com-手机网上博彩能玩吗| www.cp723.com-今日快三开奖快3| www.531179.com-彩铅手绘教程| www.575.in-登录我的51彩虹| www.4377.cm-网赚买彩票违法吗| www.328031.com-福建体彩31走势图| www.933959.com-五福彩票网-| 凤凰彩票www.3479a.com| www.65602.com-广东好彩一开什么| www.117772.com-竞彩海报模板| www.177268.com-大发快三人工计划| www.237374.com-华夏彩票安全吗| www.801908.com-精彩视频app| www.874008.com-多项彩票开奖软件| 爱彩www.003ac.com| www.41765.com-福彩三地图谜总汇| www.86784.com-竞彩猫直播今天| www.552905.com-玩彩害死人了| www.647794.com-霍金留下的彩票公式| www.749456.com-中彩挣钱吗-| www.64cz.com-南通童彩-| www.0378.link-孔雀彩铅画图片大全| www.8823.vip-分分彩大小买法| www.34828.com-微信快三带-| www.70766.com-彩票领取方式| www.027083.com-五分彩是怎么算规律| www.090973.com-众彩易购幕后| www.139003.com-三的天天彩-| www.894919.com-舟山快2彩票走势图| www.959038.com-福利彩票中奖彩民| 九五彩票www.95777w.com| www.95827.cc-国家公益彩票| www.698793.com-彩铅上色技巧| www.13599.cc-足彩弃赛怎么算奖金| www.365777.com-七乐彩开奖顺序出球| www.442777.com-网易红彩推荐靠谱吗| www.521061.com-彩票分析群-| www.577755.com-分分彩龙虎玩法| www.633202.com-众乐彩大发-| www.688076.com-金利彩票-| www.13nl.com-香港5分彩大小| www.77ov.com-福彩快乐十分陕西|