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.617403.com-中彩网高手三肖六码| www.087118.com-福利彩票福利彩票| www.138008.com-网上快三平台幕后| www.269078.com-体彩排列三出奖号| www.022295.com-时时彩牛牛规则介绍| www.307301.com-韩国彩票查询| www.09nl.com-泉州彩票聊天室| www.713508.com-给五课中彩那天组词| www.819926.com-七星彩版-| www.897979.com-体彩宣传图片| www.976893.com-温县订婚彩礼多少| www.cp3377.com-吉林快三中奖助手| www.ca3.com-快3彩票首页| www.11eh.com-111时时彩票| www.528213.com-网上买彩票群| www.655618.com-湖北结婚彩礼| www.871592.com-胜负彩缩水过滤软件| www.961137.com-福彩3d山东真言| www.lh13.com-中彩邀请码怎么注册| www.zd78.com-彩票免费预测软件| www.486185.com-彩票人工计划靠谱不| www.604569.com-九千万彩票邀请码| www.605856.com-新q彩网-| www.5jd.com-网上哪里买彩票| www.381451.com-亿乐彩软件下载| www.op1.com-江苏快三精准预测| www.85zv.com-好好彩网-| www.121763.com-五亿彩是真的吗| www.1234.top-快三有多少个黑号| www.589686.com-体彩19046期| www.733567.com-彩宝分分时时彩| www.825935.com-太阳彩票平台安全吗| www.922342.com-广东彩票365| www.986985.com-华夏彩票软件下载| www.go02.com-江苏快三有规律吗| www.x19.com-买彩票中奖词语| www.78cn.com-香港足彩-| www.2773.bid-2019彩票图片| www.59qi.com-彩票开奖福彩双色球| www.0373.tv-快三花样教学| www.5535.cc-m5彩票-| www.20009.com-安徽合肥快三走势图| www.38587.cc-大奖彩票官方网站| www.202043.com-福彩3d过滤器软件| www.j99.in-彩票免费送彩金代玩| www.63672.com-nba篮球彩经| www.7436.shop-福彩大赢家宗旨| www.33824.com-大发快三历史开奖号| www.962993.com-体彩十一运彩乐乐| www.cp422.com-极速快三怎么玩稳赚| www.691523.com-烟台福利彩票转让| www.797467.com-九九彩票台湾五分彩| www.890824.com-新华彩票手机版下载| www.960666.cc-彩票刷反水-| 网易彩票www.36788p.com| www.008526.com-京彩挂机软件| www.971009.com-万悼彩票-| www.fi3.cc-福彩快12中奖规则| www.4745.vip-彩票造假领奖成功| www.213362.com-江苏快三全天计划| www.34935.com-江苏快三微信群| www.086632.com-七乐彩彩票中奖查询| www.246960.cc-百分之百彩票官方版| www.400301.com-基诺彩票的原理| www.11716.cc-现在彩票开奖公正吗| www.172789.com-吉林的快三开奖结果| www.964420.com-新宝彩票app下载| www.4280.biz-国乐彩主页-| www.6288.cn-九彩洗衣液-| www.32612.cc-彩礼被政府限制| www.484411.com-化妆品彩妆套装| www.039578.com-福彩彩票机余额提现| www.188434.com-十分彩江苏快三| www.990837.com-福彩3走势图带连线| www.mj46.com-500彩票快三网站| www.3tm.com-凤凰彩票官方网| www.0816.in-在线怎么买足彩| www.5903.vip-榆次彩票站-| www.265701.com-3d中彩网走势图彩| www.348339.com-乐彩网邀请码是多少| www.782038.com-彩票的实际偏态| www.700488.com-外围买彩票犯法吗| www.783640.com-709彩票老版| www.873942.com-双色球玩法彩票| www.945515.com-一分彩是什么| 500万彩票www.5441k.com| www.175060.com-信誉彩票下载| www.130351.com-北京彩票查询七星彩| www.308219.com-安徽福利彩票计算器| www.cai5422.com买彩票怎么选号| www.o85.cn-彩01彩票下载| www.75wm.com-七乐彩开机号分析| www.2160.live-大发彩票提现3天| www.914926.com-彩票破解版-| www.80112.com-高频彩开奖时间| www.915949.com-福彩出兑-| www.gp99.com-好彩三-| www.552208.com-上海怏3爰彩乐| www.739824.com-福彩3d坑人-| www.6231.pw-甘肃快三电脑版| www.5228.pw-体彩七星彩历史号码| www.256708.com-人人中彩票登录不了| www.903725.com-9万彩票安装到手机| www.29753.com-赵公明福彩预测| www.63987.cc-澳洲三分彩稳赢计划| www.959823.com-时时彩毒胆秘诀99| www.080843.com-百度彩票登陆| www.660371.com-网上分分彩投注规律| www.503.tv-江苏快三过年停几天| www.59169.com-福彩三d和值| www.71411.com-福彩开奖下期预测| www.154629.com-足彩竞猜世界杯| www.739534.com-头条号官网彩票| www.818098.com-彩票九是什么星座| www.937433.com-彩吧3d图库第一版| www.056299.com-七乐彩中奖规则图解| www.130447.com-博牛彩票计划| www.007920.com-体彩大乐透开奖| www.45377.com-万彩吧一彩票高手| www.465799.com-彩六玩法介绍| www.1800.in-国家取消高频彩| www.752776.com-彩票天天存天天送| www.739483.com-盈彩彩票跑路了| www.809889.com-好彩客彩票下载安装| www.018468.com-1赔50彩票平台| www.182919.com-苏州快三走势图| www.259244.com-福彩怎么选号| www.338231.com-今天乐透彩票开奖| www.557702.com-彩虹伞大班亲子游戏| www.530.me-来彩网app-| www.69264.com-网上买彩票在哪买| www.324217.com-球彩台app-| www.34569.com-福彩pk10赛车| www.021242.com-35选7彩走势图| www.322827.com-网易彩网下载| www.445060.com-下彩彩-| www.710875.com-有人中彩票吗| www.840016.com-竞彩足球在线计划| www.945535.com-彩票论坛网-| 博友彩www.939287.com| www.271103.com-成功彩票软件| www.949581.com-大彩鲸快3下载| www.217063.com-小鹿彩票奖表下载| www.375888.com-欢乐彩票官方版下载| www.02898.cc-中彩网中奖故事| www.158431.com-体彩为什么没北单| www.851198.com-竟彩网首网-| www.42mi.com-彩客中国竞彩网首页| www.573018.com-金彩彩票是正规的吗| www.639001.com-腾讯彩-| www.yd66.cc-派彩快三能玩不| www.32362.com-703彩票网登录| www.744888.cc-体育彩票管理条例| www.77057.com-新彩民中奖-| www.339898.com-山西体彩七星彩结果| www.451997.com-c78彩票app-| www.223048.com-福彩助手官方下载| 500彩票www.395477.com| www.fg34.com-贵州快三彩票购买| www.vr38.com-福彩双彩论坛字谜| www.09236.com-彩39购彩-| www.52767.cc-恒大彩票提不了现| www.92447.com-大乐透一定牛彩票| www.285509.com-湖壮快三一定牛预测|