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.42065.com-中华彩吧江苏快三| www.857744.com-盈彩网pk10计划| www.209055.com-爱乐彩足球比分直播| www.226789.com-网上购彩骗局揭秘| www.348665.com-时彩怎样开盘| www.478827.com-竞彩奖金优化计算器| www.578998.com-137彩票开奘| www.825004.com-一直播好彩频道| www.979387.com-彩运网导航-| www.121705.com-哪个平台有河南快三| www.282661.com-网赌时时彩止盈止损| www.8698.in-腾讯分分彩杀码技巧| www.3321.online中彩网十一选五| www.a93.top-博彩业-| www.641852.com-双色球彩票是多宽| www.777456.cc-彩八仙时时彩苹果版| www.925505.com-博应用彩库宝典| 全民乐彩票www.qml1.com| www.722470.com-足彩那种玩法容易中| www.801602.com-快餐彩票-| www.871444.com-中彩彩票是哪个网站| www.935635.com-时时彩定独胆的方法| www.992616.com-七星彩中奖城市查询| www.bx06.com-七星彩开奖视频| www.vj40.com-彩票平台注册送礼金| www.11rj.com-彩色的翅膀主要内容| www.94se.cc-易彩用什么软件破解| www.45nw.com-彩票站营业到几点| www.9516.biz-天彩计划软件| www.072298.com-时时彩免费开奖计划| www.213353.com-彩神x软件-| www.425211.com-七星乐彩票投注平台| www.851169.com-足彩365电子版| www.998051.com-258彩票网注册| www.j49.cc-6118彩票下载| www.734.biz-蜂鸟团队计划彩票| www.947630.com-彩票比例投注法| www.959388.com-台湾快三全天计划| www.l39.cn-河北福彩三d诗| www.3225.wang-南方双彩网客户端| www.779458.com-600万彩票网登录| 环球彩票www.100v.cc| www.131910.com-安徽福彩快3遗漏| www.408656.com-彩礼限高令-| www.611177.com-福彩3d胆码早早报| www.752244.com-中彩网下-| www.857664.com-彩之源这个是真的么| www.md11.com-澳客彩票官方网站| www.32ni.com-万国彩票是正规的吗| www.2189.wang-微信上的中彩网致富| www.38066.cc-大彩彩票app| www.018194.com-真三国星彩-| www.122597.com-彩名堂安卓4.0| www.569121.com-丹东麻将去彩杠是啥| www.802185.com-云南福利彩票双色球| www.962474.com-1360亿彩票事件| www.lq80.com-吉林快三遗漏一定牛| www.42hw.com-竞猜足彩九月对阵表| www.9689.net-趣彩提现不到账| www.86548.com-七星彩分位振幅| www.307520.com-重庆体彩网-| www.456768.com-大陆有可能开马彩吗| www.604128.com-中国体彩票查询| www.801968.com-彩运网cy000| www.921049.com-彩神3d分析-| www.jq1.cc-福彩林竹杀码| www.3543.vip-彩票二等奖要捐款吗| www.080878.com-彩票九宫魔方| www.126278.com-第一福彩下载app| www.284151.com-澳门彩票平台送彩金| www.052826.com-进球彩app-| www.800974.com-224大众彩票网| www.961927.com-什么彩票app好用| www.zg02.com-网易快三计划| www.2121.la-时时彩骗局倾家荡产| www.029544.com-利彩可以相信不| www.03ec.com-跟人买彩票-| www.8940.cm-体彩七星彩时间| www.84894.com-七星彩开机号今天| www.27jn.com-福彩3d天中天气网| www.968441.com-三分时时彩开奖数据| www.fa4.cc-吉林快三害人不浅| www.17291.cc-一分钟大发快彩票| www.024546.com-中国彩票破解| www.151513.com-中彩网里怎样买彩票| www.811225.com-廊坊哪些彩票站招聘| www.888007.com-彩票在线人工计划| 彩票坊www.022c.cc| www.jx20.com-福彩黑龙江20选8| www.38ft.com-新手彩铅画临摹素材| www.2152.pw-越南有什么彩票| www.635470.com-七彩阳光完整版高清| www.840977.com-濮阳范县彩礼| www.960350.com-云顶至尊app彩票| www.gd37.cc-分分彩胆码计算公式| www.15gx.com-体彩店装修补贴多少| www.1515.site-大彩网机器人预测| www.228303.com-彩礼和嫁妆比例| www.363902.com-彩虹简笔画图片涂色| www.02938.com-体彩主任1360亿| www.4939.vip-未来彩票app下载| www.836767.com-727彩票-| www.906336.com-黑彩网站怎么盈利的| www.969579.com-酷彩官网-| 彩吧www.586960.com| www.ki24.com-快三24期开奖结果| www.846152.com-乐乐彩票可以挣钱| www.2350.xyz-七彩影院在线观看| www.391133.com-491cc彩票网| www.576396.com-爱彩乐平台怎么样| www.717069.com-彩铅画有市场吗| www.869876.com-今天的3d福彩图纸| www.tv36.com-彩票宣传语-| www.2624.cn-淘彩网是官网吗| www.532251.com-彩票道术-| www.665353.com-竞彩店宣传图片| www.770457.com-3d彩吧图今天的| www.81097.com-福彩乐吧网-| www.073034.com-澳洲有哪几种彩票| www.231285.com-玉林福利彩票兑奖| www.543688.com-播彩老头-| www.617789.com-铜陵福彩中心地址| www.702602.com-有三位数彩票么| www.766624.com-环彩彩票网-| www.849914.com-浚县善堂镇彩礼多少| www.909973.com-彩界联盟登录| www.960602.com-极速赛车彩票能玩吗| 9号彩票www.80767p.com| www.655936.com-什么是融彩网| www.755486.com-福彩5分钟玩法| www.719857.com-福利彩票开奖| www.58927.cc-福利彩票大乐透开奖| www.126243.com-有红包雨的彩票平台| www.768020.com-彩名堂苹果手机版| www.910999.com-k彩富民福地登录| www.987616.com-河北冀彩宝客户端| www.lk54.com-彩八彩票ios版| www.615501.com-辉煌彩票是什么意思| www.754813.com-王牌彩票快3下载| www.808755.com-福彩吧app-| www.364982.com-下载彩图宝典网站| www.897849.com-彩票店宣传语图片| www.187635.com-重庆时时彩-| www.882181.com-韩国彩票制度| www.964482.com-足球彩票计算器| 亿彩堂www.87668u.com| www.dm25.com-吉林快三奖池| www.zk02.com-华夏彩票客户端下载| www.019479.com-彩吧祝手-| www.33395.cc-众彩网筱杉-| 利民彩票www.216777aa.com| www.iw91.com-体彩三十六选期开奖| www.292608.com-江苏快三助手走势图| www.512336.com-唯美古风少女彩铅画| www.650533.com-手机够彩票-| www.978660.com-c彩票开奖查询| www.np52.com-彩票模拟器开奖| www.1ti.com-福彩门户资料大全i| www.116021.com-彩票被骗了怎么办| www.204385.com-人人彩票网注册| www.291392.cc-内蒙古快三今| www.371861.com-体育彩票昨晚的号码| www.456067.com-正规时时彩官网下载| www.541799.com-精彩网站-|