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.184616.com-广东体彩网-| www.12518.cc-一分快三怎么买会赢| www.434311.com-中彩票有啥诀窍没有| www.713309.com-福彩3d和值数子表| www.767844.com-外国高频彩-| www.954771.com-新加坡快三是真是假| www.ch39.com-快彩下载-| www.203654.com-彩票有哪些玩法| www.458627.com-e球彩中奖绝招| www.sj61.cc-彩app送彩金| www.943189.com-网络彩票负盈利骗局| www.486543.com-蓝彩比分-| 好彩头彩票www.90305c.com| www.4051.xyz-彩票318网站| www.xi64.com-优乐彩怎么下载| www.015760.com-七星彩投注网站注册| www.198410.com-代玩幸运快三可信吗| www.663914.com-nba体彩吧-| www.703482.com-北京快三输了怎么办| www.64or.com-彩票三d预测专家| www.07975.com-中彩那天四年级课文| www.216206.com-七星彩彩票网站源码| www.349681.com-网络彩票违法吗| www.279391.com-河南福彩幸运二跑马| www.847744.com-山东菏泽结婚彩礼| www.610993.com-福彩3b试机号今天| www.51887.com-炫乐彩票官网五年| www.396299.com-体彩星期四有开奖吗| 爱购彩票www.igcp2.com| www.035101.com-至尊彩网址登录| www.mq5.cc-安徽快三是不是假的| www.16ds.com-幸运彩票app苹果| www.25217.cc-彩铅颜色渐变排序| www.n34.net-如何看懂各种彩票| www.164132.com-中创微彩公司正规吗| www.653551.com-体彩排列三前后关系| www.872015.com-彩票彩之家-| www.26uk.com-中国体彩投注软件| www.986204.com-竞彩310比分直播| www.6687.com-华夏赢彩票官网下载| www.34fs.com-足彩比分直播预测| www.cp210.com-幸运快三计划免费版| www.86031.cc-彩涂铝卷市场行情| www.235922.com-中国足彩比分直播| www.577965.com-鄂彩羊毛衫-| www.767185.com-双色球彩界精英| www.q11.win-福彩3d总汇大全| www.011255.com-前天彩票中奖号码| www.981453.com-快三第35期号码| www.237342.com-6+1走势体彩| www.804468.com-七乐彩奖池金额| www.950058.com-一定牛买彩票| www.012565.com-彩票500彩-| www.803699.com-体彩排列三杀号三哥| www.4984.cc-小军网摘版彩吧图库| www.356745.com-5百万彩票开奖结果| www.610617.com-360购彩票-| www.ok01.com-北京福彩快三合法不| www.9758.biz-七星彩预测大师| www.781498.com-福利彩票乐彩同| www.948187.com-福彩中心新主任是谁| www.4973.cn-香港赛马哪里派彩| www.98808.com-三分时时彩规则| www.165149.com-彩票票花-| www.579111.com-u9彩票安全下载| www.722276.com-大庆彩票站-| www.964932.com-中国彩宝品牌| www.86zk.com-为什么不禁止彩票| www.5971.biz-永久彩票下载| www.039569.com-天天乐彩票合买大厅| www.217028.com-五分快三下载应用宝| www.363545.com-湖南体彩兑奖中心| www.511211.com-音乐彩虹周杰伦| www.731064.com-胜负彩任九开奖数据| www.881883.com-体育彩票下期预测号| www.974362.com-福彩礼拜几开奖| www.wt62.com-彩巴-| www.1344.net-福彩七乐彩| www.771566.com-时时彩庄家作弊| www.x73.net-恢复网站彩票投注| www.1055.cc-凤凰乐彩网-| www.15823.com-我在华夏彩票输了| www.85056.com-聚彩彩票提现得了吗| www.101368.com-安微快三计划软件| www.227638.com-福彩一分快三| www.353830.com-虎扑彩票论坛| www.504434.com-彩漂能泡多久| www.587183.cc-国际彩票是骗局嘛吗| www.651978.com-彩票亿元巨奖| www.768020.com-彩名堂苹果手机版| www.835442.com-193彩票网-| www.899849.com-网络售彩何时恢复| www.962329.com-福彩快乐彩12选5| 福彩网www.5522a.cc| www.gs16.com-093彩票软件下载| www.zy71.com-七星彩奖表规律图| www.22kv.com-彩票中一等奖机选| www.020.gg-网上彩票销售网站好| www.99912.com-浙江体彩在线| www.024578.com-五福彩彩票app| www.155832.com-随机彩票号码生成器| www.296152.com-福彩双彩论坛字谜| www.458155.com-海南私彩是几个数| www.611493.com-长春文彩-| www.738852.com-福彩3d微信公众号| www.aj88.com-预测今晚七星彩号码| www.19gw.com-韩国5分彩开奖网址| www.6718.com-彩票招收兼职群| www.168571.com-北京快三开奖纟结果| www.289012.com-关于全民彩票| www.481939.com-彩票兑换期限多长| www.623549.com-曲昌春讲故事看竞彩| www.807155.com-温州福利彩票官网| www.963240.com-彩铅调色方法| www.hu39.com-爱彩江苏快3| www.245471.com-足彩竞猜新浪| www.362126.com-描写雨后彩虹的诗句| www.021049.com-七行彩开奖结果查询| www.ez59.com-快三破解器骗局| www.o29.com-分分彩计划app| www.67do.com-彩票中奖前有预感吗| www.8282.vip-福利彩票一期销售额| www.63797.cc-快乐彩胆拖对照表| www.092307.com-福建福彩投注站电话| www.260288.com-快三是赌博还是彩票| www.386173.com-彩票123ios-| www.527108.com-华富鼎彩票大骗局| www.840016.com-竞彩足球在线计划| www.273454.com-福彩三天计划必| www.582666.com-足彩4场进球彩预测| www.728500.com-福彩双色球开奖今天| www.872015.com-彩票彩之家-| www.806414.com-申航彩票网站| www.937259.com-彩票中奖率最高省份| www.337187.com-那种彩票可以玩单双| www.815700.com-石家庄彩票兑奖| www.hl00.cc-官方彩票有哪些种类| www.444523.com-7体育彩票开奖结果| www.535180.com-福彩3d定独胆公试| www.646618.com-高频彩票职业彩民| www.745244.com-c8万彩吧cn买马| www.900884.com-赢钱彩官网-| www.963936.cc-彩虹周杰伦2008| 500彩票www.52072n.com| www.lb44.com-万人牛牛彩票| www.o55.online-赠予彩票-| www.66ji.com-特彩吧f49ycc| www.797976.com-彩票半全场-| www.hz3.cc-106官网彩票下载| www.41ut.com-鸿运彩票是真的吗| www.129478.com-众彩娱乐平台登录| www.984053.com-老猫治彩-| www.358400.com-彩票中大奖在哪领| www.857365.com-盈彩计划网-| www.90854.com-彩票复式投注计表| www.165149.com-彩票票花-| www.435692.com-在彩票站工作怎么样| www.591323.com-网易彩票863| www.701622.com-c59彩票官方下载| www.805998.com-彩票是否是骗局吗| www.907153.com-福利彩票是几位数| www.983413.com-彩票16官网-| www.bw38.com-广东天彩查-| www.tm13.com-福彩申请电话|