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天

知道了
百盈PK10 www.231.cm-大星彩票网走势图| www.292576.com-时时彩如何倍投稳赚| www.ym66.com-彩票网站平台哪个好| www.984378.com-时时彩犯罪吗| www.fc53.com-百彩网马会开奖| www.pq87.com-p3走势图彩吧助手| www.584793.com-58彩票公司在哪吗| www.aa50.com-快三是不是时时彩| www.009460.com-6698彩票正规吗| www.82db.com-体彩世界杯体彩| www.480538.com-五彩网3d字谜| www.596621.com-福彩3d兑奖期限| www.702266.com-南宁彩票站转让| www.806165.com-福彩3d奖号预测| www.933900.com-彩票晚上几点开奖| www.62755.com-七星彩局王图纸长条| www.cp0506.com-极速快三破解软件| www.374543.com-彩票字迷大全| www.528834.com-北京彩票计划软件| www.607631.com-开彩票店多少钱一次| www.689069.com-山东福利彩票沙龙| www.777529.com-福彩三地杀码图| www.863586.com-彩票数据怎样分析| www.930653.com-10万彩票要交税吗| www.984886.com-网上玩彩运8犯法吗| www.127583.com-彩虹代刷新版app| www.460158.com-福彩杀跨杀尾大全| www.a18.vip-彩票九怎么样| www.799979.cc-新手怎么买足球彩票| www.tq3.com-爱彩乐安徽快三| www.89ft.com-福彩3d新彩吧大全| www.267872.com-彩圣福彩总字谜| www.6dw.com-金源彩票平台| www.162011.com-快三开奖计算公式| www.cp157.com-甘肃省快三开奖结果| www.921716.com-f彩网app-| 幸运彩票www.73166d.com| www.ys04.com-彩票中了去哪兑换| www.0888.pw-火星彩票网-| www.8969.biz-国彩网五分钟快三| www.0566.net-福彩3d蓝精灵| www.41428.com-彩票猜谜语-| www.334071.com-体彩买一注多少钱| www.553853.com-天天中彩票足彩可靠| www.720901.com-新二彩票网址| www.616683.com-竞彩足球半全场技巧| www.728008.com-奇妙彩票-| www.47932.com-买竞彩-| www.vd47.com-智慧彩app快3| www.559480.com-彩票网走势图首页| www.637696.com-彩虹六号免费加速器| www.838770.com-福利彩票店宣传语| www.970693.com-民政局管福利彩票吗| www.c27.me-易彩幸运时时彩| www.cai0055.com广西快三开奖| www.717044.com-儿童彩铅画的好处| www.797281.com-看彩啦3d-| www.879499.com-旭彩彩票官网| www.950198.com-乐彩客安卓版| 百姓彩票www.bxcp3.com| www.64rr.com-微信足彩交流群| www.48887.cc-香港皇家重庆时时彩| www.61663.cc-福利彩票高管被抓| www.081053.com-彩赢乐app-| www.201069.com-浙江福彩12选5| www.229509.com-彩票大全360| www.323926.com-中彩网走势图3d| www.392847.com-派彩洗面奶痘立消| www.373545.com-极速赛车彩票玩法| www.52218.cc-北京福彩对奖| www.765970.com-彩乐乐专家杀号汇总| www.555934.com-美狮彩票推荐人| www.766777.cc-糖果彩是正规的吗| www.12441.com-大牌彩票是真的吗| www.397510.com-福彩春节-| www.621002.com-高手彩票、特彩吧| www.840666.com-广西体彩程汉荣| www.tv9.cc-爱彩乐5分快3规律| www.936701.com-乐福彩票骗局| www.987677.com-多种网络购彩| www.xg3.com-上海快三软件| www.637990.com-上海吴中路竞彩店| www.3rp.com-彩票和股票哪个好做| www.990265.com-多乐彩票是骗子吗| www.gh47.com-快三属于福利彩票吗| www.26542.com-新浪彩票安卓版| www.7952.pw-七彩椒种子批发| www.6991.cm-彩票的购买规则教学| www.21099.cc-江西时时彩走势| www.77352.cc-体彩双色球怎么买| www.946607.com-河南周口的彩礼| www.66530.com-宁夏彩票大奖| www.04411.com-体彩终端机扫码出票| www.jq2.cc-今日河南快三预测| www.h52.com-175oo乐彩网l| www.83618.com-优点彩票是真的吗| www.399.net-中国彩票巨奖排行榜| www.833160.com-彩67彩票-| www.920743.com-五百万彩票下载| www.977991.com-快三输了很多能回血| www.nq7.com-三分快三历史走势图| www.61354.com-什么是网络售彩| www.110209.com-500彩票计划软件| www.180300.com-三不同福利彩票开奖| www.468605.com-一彩票合法吗| www.574359.com-双色球彩票预算下期| www.774052.com-浙江快乐十二爱彩乐| www.496.date-彩吧vip聊天室| www.072766.com-306彩票下载安装| www.687035.com-彩票投注站怎么样| www.8931.org-易彩网资讯-| www.225782.com-5亿彩下载-| www.068341.com-华彩手机软件网下载| www.005686.com-私人彩票平台出租| www.137352.com-足彩倍投计划| www.500105.com-幸运彩跑马投注技巧| www.558865.com-体彩数字最大到多少| www.611086.com-福彩3d正版图迷| www.667308.com-武汉福彩中心总部| www.724498.com-五分彩官网平台下载| www.004234.com-博彩理财骗局视频| www.551187.com-内蒙古快三开奖链接| www.627329.com-三d字谜牛彩网| www.735296.com-高频彩票合法吗| www.837252.com-l立彩-| www.940088.com-今日美国彩票开奖号| www.cp3585.com-河南今曰快三走势图| www.zr99.com-七彩云南欢乐世界| www.992604.com-七星彩中奖号查询表| www.393119.com-彩铅荷花图-| www.226922.com-最快彩票开奖结果| www.335996.com-境外黑彩-| www.708682.com-彩神lx坑人-| www.848426.com-体彩专家杀码预测| www.123166.com-彩票计划员违法吗| www.319690.com-博彩王彩票预测| www.414880.com-中国彩宝品牌排行| www.499777.com-078彩票网页| www.378.cm-福利彩票中奖了事件| www.08726.com-吉林福彩快三预测| www.241177.com-彩铅风景画-| www.860796.com-福彩任选三-| www.253583.com-大发时时彩怎么玩法| www.833291.com-七星彩论坛南海社区| www.97gl.com-博友彩一分快三技巧| www.480071.com-体育彩票开奖怎么算| www.pd13.com-河北快三中奖技巧| www.3060.cn-乐喜彩票网地址| www.771199.com-彩虹台在线直播| www.ag75.com-河南快三大小走势图| www.qa12.com-手机连中彩票| www.j99.xyz-彩票平台跑路发公告| www.24pr.com-鑫易贴彩膜一体机| www.95ba.com-破解星际彩票| www.145299.com-福彩提点-| 红旗彩票www.629053.com| www.538961.com-速赢彩票app下载| www.670097.com-南国彩票开心论坛| www.736528.com-3d彩圣诗-| www.654573.com-福彩体彩排5走势| www.762216.com-好的竞彩足球软件| www.856129.com-投注广西快三| www.964451.com-360彩票比分直播| www.gc40.com-ag刮刮彩-|