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.2721.win-江苏快三跨度图表| www.07795.com-中彩那天课文大意| www.72733.cc-长城彩票真假问题| www.207933.com-49彩票-| www.294698.com-牛彩网3d全部断组| www.377391.com-体彩如何经营| www.526308.com-快购彩票三网站| www.637091.com-彩虹无人机战绩| www.761532.com-梦见打彩票-| www.881482.com-58彩票官网-| www.984247.com-下载福彩3d百万通| www.fr89.com-发彩网正不正规| www.zr15.com-大玩家彩票能在京东| www.35uu.com-点击彩违法吗| www.1088.cn-足彩让负怎么才赢| www.8357.cc-彩票怎么容易中奖| www.36339.cc-买彩票几注什么意思| www.88620.com-小网送彩-| www.054575.com-e球彩守号技巧| www.177798.com-十分快三技巧| www.257948.com-彩99下载-| www.337066.com-广西快三玩法| www.424259.com-澳门网上博彩能赢吗| www.532880.com-彩吧cai8com| www.666008.com-乐彩邀请码-| www.750462.com-福彩报纸在哪里订| www.828267.com-点点彩票下载| www.906251.com-彩色的梦教案| www.974429.com-怎么用app买彩票| www.fs47.com-彩票快三邦投| www.yt49.com-亿网彩票怎么样| www.32bl.com-女生脸上有彩虹头像| www.0653.cn-时时彩怎么推广| www.7628.cc-大乐透图迷与彩民乐| www.29317.cc-自动购彩软件| www.77930.com-以彩开头的四字成语| www.035653.com-彩票交流qq群号| www.157687.com-竞彩足球app没了| www.253397.com-好彩妹嫁给谁| www.329656.com-哪些是官方彩票网| www.408185.com-体彩票官网-| www.520305.com-体彩专家三天计划| www.593786.com-七彩平台是真的吗| www.671196.com-排列三预测凤彩网| www.751909.com-新版跑狗图牛蛙彩票| www.903352.com-九万彩票经典版| www.973017.com-彩票赛车开奖软件| www.cc1.cc-福彩快3走势图福建| www.pa20.com-内蒙古快三跨度振| www.01ex.com-湖南快三形态走势图| www.74kn.com-彩生活物业工资待遇| www.1677.link-乐彩网双色球开机号| www.02868.com-合肥百乐门彩票| www.60324.com-七星彩永久头尾规律| www.022155.com-快三彩票合法| www.096498.com-快乐彩玩法说明| www.166033.com-网络彩票导师靠谱吗| www.277744.com-国外彩票正规网站| www.433509.com-彩票中奖最高金额| www.532339.com-男生彩虹是什么意思| www.632059.com-好彩一八猜一生肖| www.706079.com-天津时时彩彩经网| www.789274.cc-胜负彩姜山冷门| www.866105.com-腾讯5分彩票官网| www.936262.com-聚宝彩票合法吗| www.990425.com-腾讯三分彩开奖结果| www.nh5.cc-一分快三走势规律| www.qd65.com-7彩app-| www.04ru.com-荷塘月色彩铅简笔画| www.75wy.com-台湾福星彩最新图库| www.1567.com-奥运彩票收藏价格表| www.9690.biz-如何分析彩票的销量| www.52582.cc-江苏彩票快三好彩| www.97084.com-竞彩必发指数新浪网| www.061077.com-爱彩彩票安全吗| www.165271.com-彩票刷佣金-| www.252538.com-群计划买彩票| www.323481.com-七乐彩现场直播| www.391991.com-竞彩串关-| www.532167.com-七星彩5等奖| www.607260.com-彩票开奖天津时时彩| www.669887.com-有四个数字的彩票吗| www.745859.com-菲律宾一分彩| www.813578.com-体育彩票竞彩调整| www.885139.com-分析彩票的手机软件| 大赢家彩票平台www.935026.com| www.jj22.cc-中国福彩网开奖结果| www.c17.net-好运快三走势图| www.29sp.com-昨天彩票-| www.0420.org-百盈快三是什么软件| www.6768.cm-彩票097-| www.16199.com-网络彩票超稳计划| www.56858.com-时时彩五星一码公式| www.026404.com-守信彩票骗局| www.098338.com-彩票内部计划聊天室| www.162564.com-大运彩票手机app| www.268030.com-湖北快三实时分析| www.387308.com-尼彩手机价格| www.541382.com-彩网cai5下载| www.623309.com-红牛时时彩平台| www.690411.com-足彩百家欧赔| www.765262.com-最高手七星彩解诗网| www.871420.com-利彩快3玩法| www.941661.com-6188彩票网址| www.983540.com-彩票站软件-| www.zd1.com-滴滴彩票提现不了| www.ql81.com-致富彩时时彩| www.57.cx-福利彩票倍投如何投| www.62zw.com-电话购彩票安全吗| www.0402.wang-彩61官方网站| www.8196.cn-澳彩城app-| www.28178.com-东彩娱乐登录| www.69305.com-足彩14场开奖查询| www.053786.com-彩乐乐走势图表| www.132093.com-彩礼两万-| www.218602.com-彩票平台微信代理| www.288344.com-安徽快三和值技巧| www.386258.com-85彩票网站-| www.503136.com-微信彩友多app| www.569895.com-彩票顺子什么意思| www.636681.com-彩虹频道直播源| www.738580.com-我的彩票双色球| www.803938.com-福彩61开奖号码| www.872505.com-中国彩下载-| 熊猫彩票www.333xm.cc| www.bs67.com-快3彩票软件怎么做| www.rs68.com-香港中彩网-| www.11fh.cc-577彩票平台香港| www.74al.com-私彩拉人犯法么| www.0779.cc-亿彩彩票手机客户端| www.8319.xyz-福彩加盟热线| www.26463.com-七星彩窍门-| www.64066.com-彩妆店图片-| www.030922.com-珍爱网彩票-| www.101145.com-彩运8网-| www.157722.com-爱米彩票网站正常吗| www.256729.com-中彩网怎么买彩票| www.322760.com-国彩网下载-| www.383152.com-17095体彩-| www.515886.com-云帆彩票平台| www.577581.com-凤凰传奇福利彩票| www.638996.com-如何申请中国体彩| www.739183.com-快三怎么猜和值大小| www.802565.com-福彩英雄看胆给大家| www.870440.com-福彩快三魔图| www.950985.com-彩运8是做什么的| www.995108.com-海南休彩开奖结果| www.cp0378.com-北京快三走势| www.jn69.com-5亿彩票app下载| www.yl58.com-中福快三倍投| www.13eh.com-快三同二稳赚方法| www.72ld.com-米兜彩票官方app| www.0652.cm-中彩高手大乐透| www.9151.biz-浙江体彩6加1开奖| www.38779.cc-2013彩票黑网| www.77389.cc-彩票权威平台软件| www.020613.com-彩票视频开奖软件| www.082395.com-购彩堂我的账户| www.134379.com-福体彩开奖话题页| www.197684.com-河南快三111遗漏| www.257698.com-安徽快三免费计划| www.318683.com-莱利ll彩票登陆| www.376912.com-山东体彩兑奖时间| www.569207.com-凤城麻将彩杠|