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.715708.com-如何跳快三-| www.532.red-今天的天天福彩重播| www.6600.net-信彩彩票网站| www.185.tv-南宁彩票店转让| www.51320.com-福彩购彩软件可靠吗| www.003897.com-三彩官网旗舰店| www.1627.org-捕鱼厅注册送彩金| www.570208.com-体彩排三基本走势图| www.cp6775.com-江苏快三规律破解| www.716292.com-福利彩票历史比对器| www.4704.org-伪造彩票兑奖| www.484809.cc-快乐五分彩开奖号码| www.744222.com-7星彩大公鸡下载| www.17wy.cc-体彩浙江体彩排列五| www.906117.com-体彩机租赁协议| www.979913.com-河南福利彩票新快三| www.gl1.com-彩票追杀-| www.723279.com-彩票指南电孑16版| www.110421.com-福彩3d对应码| www.629108.com-分分彩下载-| www.711999.com-彩58软件下载| www.800958.com-彩票对打套利方法| www.876515.com-天津时彩开奖软件| www.994952.com-好彩堂2232-| www.cm42.com-福彩3怎么玩儿| www.xf17.com-大富彩票app| www.24he.com-金码关注彩宝网| www.09td.com-银河彩票软件下载| www.464.tv-财神ⅱ网彩种| www.4670.vip-经常买彩票的人好吗| www.229163.com-老梁说彩票的真实性| www.169743.com-内蒙快三开奖走势| www.13pw.com-体育彩票大奖时间| www.dk28.com-体育7星彩中奖规则| www.337595.com-青海省福彩投诉| www.093086.com-彩钢临时围栏图片| www.300744.com-申请28元免费彩金| www.64345.cc-彩妆店加盟-| www.10jz.com-快三单跳双跳是什么| www.66hb.cc-神龙彩票下载| www.69022.com-尊彩网官方-| www.828444.cc-天尊彩票平台| www.tm51.cc-中国体彩报推荐| www.191.in-彩民村一心水之家| www.36807.com-幸运28彩票网站| www.222091.com-爱彩乐彩票网安全吗| www.pt46.com-彩票争霸2app| www.80gi.com-福彩绝杀六码试机号| www.496807.com-即时彩票官网| www.578252.com-福利彩票自助打票| www.850208.com-分分彩按照计划买| www.952696.com-体彩顶呱刮翻倍赢| 大赢家彩票平台www.220875.com| www.380806.com-澳门快三彩票计划| www.567045.com-彩票平台被骗| www.6489.vip-福利彩票开奖啥软件| www.460098.com-七星彩局王下载| www.575812.com-乐福彩3d首页| www.649039.com-博彩管理课程| www.8389.cm-七星彩如何包码| www.29889.com-奥客彩网官网| www.123904.com-彩票团队彩金| www.233430.com-体彩快中彩怎么查询| www.307012.com-双色球派彩每日推荐| www.609559.com-分分彩三星计算方法| www.719108.com-彩虹的变化过程| www.825398.com-竞彩猫曲昌春| www.925536.com-旭彩美缝剂是品牌吗| 大赢家彩票平台www.137651.com| www.0141.cc-彩色组词语-| www.8749.biz-七星彩梦码书| www.870356.com-易旺彩票合法吗| www.327178.cc-新华彩票58748| www.53tr.com-大富彩票注册| www.306445.com-网赌彩票买大就输| www.780822.com-谁有黑客彩票软件买| www.n86.com-彩票系统开奖源码| www.93ef.com-最早的彩色相机| www.9037.vip-彩票nba-| www.673883.cc-图书古建彩绘纹样| www.227015.com-三分快三规律口诀| www.411169.com-足彩专业术语| www.612185.com-彩影免费版绿色| www.798837.com-足彩滚球详细规则| www.tj74.com-怎么做彩票网站| www.365937.cc-彩票29平台-| www.456278.com-红菜苔彩-| www.578724.com-好彩堂跑狗图玄机| www.695252.com-竞彩360比分直播| www.813919.com-高频彩计划网站| www.911132.com-最新福彩3d攻略| www.991248.com-大赢家时时彩走势图| www.li74.com-中福网彩票app| www.947989.com-彩票哪个靠谱| www.839363.com-彩票开奘询-| www.581965.com-内蒙快3彩票| www.vc73.com-财神彩票是骗局吗| www.038070.com-彩46平台下载| www.308409.com-快三怎么看和值技巧| www.395496.com-今天福利彩-| www.515009.com-品牌彩妆排行榜| www.591387.com-澳门彩票高反水网站| www.689611.com-合法网络彩票平台| www.779755.com-福彩三d布衣图| www.q08.net-彩票有少样-| www.533606.com-七星彩随机-| www.090071.com-怎么找玩彩票资源| www.055525.com-刮奖彩票几种| www.955850.com-彩影软件-| www.lx13.com-分分时时彩开奖网| www.096.cn-104彩票app-| www.6896.top-好彩一八指什么数字| www.999355.com-好彩自然来近义词| www.dx90.com-福建体彩网彩民论坛| www.e08.shop-竞彩中奖图片| www.73jt.com-炫彩皮肤怎么买| www.3049.top-月夜飞龙体彩预测| www.17614.com-足彩竞彩胜平负玩法| 大赢家彩票平台www.902775.com| www.sp64.com-时时彩定位胆买九码| www.961282.com-足球竟彩网计算器| www.771586.com-山东体育彩票扑克3| www.23448.cc-文莱彩票开奖结果| www.101865.com-亚洲彩票稳赢方法| www.3394.mobi-18k彩金会掉色吗| www.64537.com-体育彩票开奘| www.873364.com-竞彩足球吧-| www.252663.com-彩票新闻-| www.392108.com-彩票能在平台直播吗| www.553879.com-足球竞彩基础知识| www.811212.com-中国福彩3d今天图| www.878709.com-体彩七星彩开奘结果| www.947598.com-彩票投注时间| www.997154.com-旺彩双色球开奖公告| www.pt9.cc-派彩网怎么安装| www.og97.com-福彩就业时报彩图版| www.m80.top-彩票站买一张挣多少| www.91kq.com-福牛网彩票下载软件| www.2220.hk-重庆时时彩冷热新浪| www.901955.com-警察怎么抓黑彩| www.959483.com-新盈彩官网-| 华为彩票www.hw8889.com| www.015080.com-巨丰彩票心水资料| www.910667.com-好彩网图库文集| www.994686.com-球探彩客彩票旧版本| www.fw87.com-福彩河南快三走势图| www.42in.com-法国竞彩足球赛程| www.583267.com-彩色装饰画人物| www.702757.com-足球彩票兑奖时间| www.883403.com-彩王彩票网-| 爱彩乐www.167918.com| www.097792.com-成都福利彩票转让| www.410381.com-爱尔兰彩票官网| www.655497.com-彩民之星去哪里买| www.79117.cc-手机彩铃-| www.327601.com-彩界大将军-| www.530717.com-时时彩永赚不亏方法| www.669482.com-盛宏彩票登录| www.758302.com-体彩提成是多少| www.888378.com-七星彩今晚开奖号码| www.967411.com-网易彩票可信吗| www.bo94.com-网易彩票应用软件| www.071917.com-彩色透水混凝土配方| www.36151.com-快乐彩票网官方端口|