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.983709.com-彩票对刷套利| www.444670.com-竞彩牛人推单| www.752922.com-335彩票下载安装| www.902917.com-快彩快乐十分助手| www.996604.cc-龙江福利彩票开奖号| www.dz98.com-玩彩票哪个平台好| www.885927.com-福彩刮刮乐微信兑奖| www.116307.com-彩虹周杰伦吉他谱| www.703006.com-我要发彩网手机版| www.687762.com-今日彩票x-| www.787370.com-雪缘网足彩比分直播| www.884483.com-福彩3d3胆预测| www.972034.com-北方老彩民-| www.lu6.com-人人彩是正规的吗| www.qv54.com-福彩几加几什么意思| www.10pm.com-新3d福利彩票攻略| www.87pa.com-淘宝可以投注彩票吗| www.b11.com-福彩2019030| www.64fh.com-福彩演播室主持人| www.2379.vip-七彩山鸡苗批发| www.901080.com-精英彩票平台| www.987339.com-汇彩网登录网址| www.hl76.com-彩票121走势网| www.94bo.com-易彩云彩票邀请码| www.114877.com-银河彩票贴吧| www.195956.com-快三推荐一定牛江西| www.433691.com-福利彩票的宝典| www.535116.com-今日福彩三地杀码| www.596051.com-2009年福彩和值| www.654740.com-七星彩大奖图片| www.517287.com-福彩万能五码走势图| www.91rw.com-佰萬彩票开始多久了| www.105076.com-那个彩票靠谱| www.236286.com-中国福彩客户端闪退| www.006469.com-彩神器-| www.088375.com-福彩门户资料| www.162792.com-甘肃快三豹子| www.022804.com-彩世界苹果app| www.s30.org-青海省福彩投诉| www.557560.com-神灯彩票登录| www.669494.com-彩票不赔的买法| www.481105.com-彩印中国移动| www.583313.com-韩国彩色漫画| www.666785.com-江苏快三计划公式| www.791138.cc-彩票建号大师| www.896996.com-36o彩票购彩大厅| www.991406.com-七星彩排除法| www.cw25.com-500彩是骗局吗| www.05rl.com-初级水溶性彩铅画| www.97fo.com-39彩票老品牌| www.35144.com-qq群玩彩票-| www.003773.com-彩之源正规吗| www.110967.com-春天彩票-| www.0921.top-彩票合买机会多吗| www.11lz.com-万福彩票网站| www.1100.cm-竞彩百家欧赔| www.du0.com-福利彩票甘肃快三| www.x98.cc-彩票棋牌app下载| www.pi58.com-足彩19024-| www.63rq.com-h5彩票系统-| www.1509.wang-今天七星彩开奖吗| www.8484.wang-彩八对战免费下载| www.27975.com-好彩票正规网站| www.dn7.com-安卓快三万能辅助器| www.qv68.com-pc是彩票的意思吗| www.083584.com-私彩平台制作| www.05uv.com-江苏福利快三走势图| www.024.cn-买彩票中奖查询结果| www.6363.cn-竞彩猫收费和卖群| www.139007.com-民政部福彩中心| www.79bb.com-三色彩票公司| www.979371.com-南通体彩中心在哪| www.hh60.com-山东体彩网官网| www.168231.com-湖北爱乐彩-| www.851292.com-智胜软件彩票| www.915180.com-淘宝上买彩票怎么买| www.970927.com-福彩3d字谜图片| www.gq7.com-北京快三跨度怎么玩| www.sm06.com-时时彩心态玩大必死| www.27lp.com-台州福彩官网| www.93kp.com-彩票宝和大发一样吗| www.2344.bid-福彩三d专家预测号| www.7658.shop-体彩销售台-| www.02384.com-大乐透彩票二元网| www.027040.com-福利彩票山东中奖人| www.112612.com-广州鸣彩有限公司| www.340136.com-登录九州彩票网站| www.441781.com-竞彩限售99倍投| www.028395.com-稳的彩票台子| www.100034.com-e乐彩票-| www.208432.com-福利彩票快三宣传语| www.295169.com-彩吧图彩第五版| www.378448.com-优乐彩彩票登陆平台| www.517165.com-彩票测算软件| www.md7.com-快三号码图表| www.xc57.com-体彩第19095期| www.512.com-qq群投彩-| www.521858.com-和彩印怎么取消| www.616621.com-足球体彩竞彩怎么买| www.707290.com-专业定制彩票软件| www.776210.com-5分彩全天计划群| www.837150.com-竞彩足球开奖谁赢了| www.893112.com-福彩3d之家彩吧| www.952676.com-乐和彩网址-| www.995906.com-体彩竞彩加奖| www.cd70.com-十分快三遗漏数据| www.914731.com-今日竞彩专家预测| 汇丰彩票www.hf0168.com| www.lm98.com-中彩网能不能买彩票| www.rx83.com-洗手池快三秒热水器| www.13sk.com-福彩今天开机号| www.2926.cn-老奇人彩图-| www.27698.com-cp533彩票官网| www.880561.com-大乐彩历史开奖号码| www.953940.com-快三追号打法| 爱上彩票www.ascp9.com| www.324716.com-福彩3d谜语解析| www.5448.cm-南方双彩3d试机号| www.14449.com-七星彩往期开奖号码| www.740077.com-澳博彩票网-| www.869548.com-海南七星彩投注网址| www.954257.com-八彩林亚珍国语下载| www.w63.cc-下载745好彩| www.89lj.com-衣服用彩漂泡一夜| www.335032.com-乐彩网3b-| www.235047.com-建行中彩啦-| www.ub32.com-网上买彩票合法| www.0681.xyz-厦福利彩票站点申请| www.007411.com-兰州福彩中心地址| www.101165.com-彩栗开奖查询| www.16ul.com-秦皇岛体彩-| www.277666.com-魔方彩票可靠吗| www.07081.com-体彩跟福彩什么区别| www.85if.com-彩票小大规律| www.98am.com-一出好戏什么彩票| www.3721.website中彩三地走势图| www.8811.hk-腾讯分分彩精准计划| www.32203.com-体育彩票排列3开奖| www.71476.com-跟着群里买彩票| www.065787.com-必赢彩票骗局| www.477225.com-体彩组3什么意思| www.097027.com-彩票投哪些注| www.rf29.com-香港快三是什么| www.18hb.com-付费彩票计划软件| www.974001.com-超级百万彩票| www.317955.com-彩票恒等式-| www.6196.net-惠民彩票导师| www.798135.com-海南省福利彩票官网| www.085240.com-预测彩票软件| www.gx60.com-鸿彩辉腾团队合法吗| www.d49.loan-大数据可以预测彩票| www.33sb.com-19017期七星彩| www.796.me-新3d彩定位胆| www.3417.vip-好彩13app-| www.033802.com-如意彩票平台靠谱吗| www.777589.com-易盈彩票苹果版快三| www.860697.com-高频彩票软件下载| www.810282.com-彩票走势图显示器| www.894860.com-天宏国际彩票真假| www.a98.win-小班彩虹伞教案| www.51kj.com-种彩那天-| www.0473.cn-亚洲彩票提款| www.083.date-鑫鑫彩票在线| www.229833.com-购彩大厅官方下载|