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.539310.com-彩票店转让官司起诉| www.71hs.com-买彩票经典语录| www.24170.com-彩铅画画上色技巧| www.071763.com-秒速快三交流| www.m27.net-广西快三今天一定牛| www.425583.com-竞彩14场预测分析| www.137159.com-添点七彩鲜花| www.624358.com-彩333官网地| www.731928.com-欧冠足彩-| www.828939.com-多盈在线彩票官网| www.899221.com-彩神v1下载-| www.967061.com-足球彩票提成| 快3彩票www.783802.com| www.074776.com-天空彩票网址导航| www.245385.com-易彩堂官方网站登录| www.387238.com-重庆时时彩彩预测| www.588407.com-福彩群英会助手| www.728327.com-中国体彩网点查询| www.896959.com-中福网彩票下载| www.fd8.cc-老时时彩十位走势图| www.7ox.com-单位年会彩票| www.141.cm-乐迎彩票下载安装| www.zf.cc-快三买和值的技巧| www.064102.com-十分彩平台怎么赚钱| www.4032.cn-吉林快三提前开奖器| www.676591.com-多彩漆-| www.09559.com-彩818彩合-| www.392931.com-蓝彩推荐-| www.619366.com-云南省彩票兑奖地址| www.925533.com-旭彩美缝剂双组价格| www.581274.com-体彩任九开奖结果| www.844.cm-投彩网-| www.408802.com-中彩网囚牛行势走势| www.575644.com-福彩网3d-| www.690216.com-新浪爱彩欧洲杯| www.918358.com-900彩票网怎么样| www.cai4333.com上海快三开奖查询| www.333821.com-体彩的玩法有几种| www.518548.com-彩票号码dna软件| www.613096.com-天福彩票app| www.706218.com-发彩是正规平台吗| www.484186.com-多彩网合法吗| www.820712.com-彩钢瓦设备-| www.xc06.com-南国彩票七星彩图规| www.88et.com-冠彩是什么-| www.492177.com-七彩闪光灯软件| www.630044.com-体彩18151-| www.865717.com-快三龙多少期| www.71ay.com-七马彩四不像| www.5388.mobi-777福彩app-| www.202212.com-彩票重奖查询| www.378851.com-七星彩海南一色总版| www.912837.com-彩乐网4343us| www.811.cm-会员登陆8g彩票| www.635072.com-七彩国际影城凯德店| www.701758.com-1305彩票靠谱吗| www.771595.com-向日葵时时彩| www.400729.com-怎样看七星彩中奖| www.177733.com-江苏快三单期计划| www.262668.com-福彩中奖号码查询| www.412512.com-彩票代理计划员招收| www.590665.com-足彩胜负平中奖| www.727090.com-乐彩网站-| www.799113.com-亚洲彩票大发快3| www.878326.cc-六福彩票官方网站| www.965565.com-河南快三一天几期| www.cp230.com-如何玩快三赚钱| www.615900.com-彩609彩票-| www.726090.com-彩票工具万能倍投器| www.810256.com-体彩2019新规| www.890579.com-岚科彩票网-| www.975212.com-开心100彩票| www.md69.com-支付宝怎么买彩票| www.53od.com-怎样玩彩票能稳赢呢| www.3770.vip-118彩票手机下载| www.777433.com-159足彩下载| QQ彩票www.89894q.com| www.ng80.com-极速彩票娱乐平台| www.878696.cc-体育彩票大乐透论坛| 818合彩www.www.5666hc.com| www.045218.com-全球彩票官方下载| www.576414.com-福彩快三倍数| www.306789.com-吉祥彩最新版| www.787288.com-福建体彩即乐彩| www.23486.cc-谁知道彩票计划软件| www.739983.com-福彩今天出什么号码| www.5969.tv-体彩如何看结果| www.76855.com-安徵快三夸度走势图| www.87879.com-福利三分彩合法吗| www.0581.in-3d今天彩吧图版| www.174500.com-快三破解器下载| www.126710.com-菠萝彩手机版| www.286.me-3d天齐网彩票| www.393008.com-梅花图片手绘彩铅画| www.05617.com-义乌体彩店转让| www.000058.cc-乾特火箭彩票下载| www.064904.com-永盛国际彩票骗局| www.150302.com-期期彩票-| www.771097.com-国乐彩软件在哪下载| www.716664.com-彩铅调色谱-| 500彩票www.50051q.com| www.967629.com-领军彩票导师微信| 彩客网www.030310.com| www.ex61.com-uu快三是真的吗| www.939569.com-福彩网址下载| www.997589.com-传奇彩票-| www.gc11.com-福建体彩网11| www.59qp.com-九万彩票网址| www.774771.com-中乐彩官网8757| www.179372.com-分分彩害人真实故事| www.46sz.com-955彩票平台| www.456496.com-芜湖县福彩中心地址| www.562113.com-悠悠双色球购彩大厅| www.626418.com-全中彩票最多的人| www.2284.biz-正规彩票店买黑彩| www.251028.com-兴盈快三彩票| www.183950.com-河北快三新玩法| www.026550.com-电竞博彩怎么玩| www.111460.com-彩票稳定计划团队| www.186533.com-高频彩票十赌十输| www.326828.com-中国官网中彩网| www.09390.com-广东体彩中心网| www.wd3.cc-彩宝官方下载| www.562052.com-新彩计划群-| www.58151.cc-彩金是什么意思| www.518605.com-高频彩太害人了| www.732786.com-体彩19052-| www.822891.com-江苏体彩排列五| www.253955.com-快三作弊器-| www.740833.com-幸运28彩票网站| www.254408.com-淘彩app靠谱不| www.329726.com-南洋福利彩开奖结果| www.414198.com-竞彩胜平负如何计算| www.563091.com-爱米彩票网址进入| www.641369.cc-体彩柜台厂家批发| www.9670.in-讽刺农村彩礼的说说| www.83653.com-兼职彩票平台可靠吗| www.110188.com-彩票号444-| www.412283.com-查询彩票的软件推荐| www.876921.com-七乐彩历史比较器| www.353836.com-买彩票破产图片| www.751491.com-足彩14场胜负指数| www.226769.com-快捷彩票-| www.008304.com-泰安彩票中奖| www.001368.com-极速快三怎样| www.758048.com-网上快三倍投计算器| www.ol40.com-体彩七星彩玩法说明| www.8222.cc-中国体育彩官网| www.670011.com-海南七乐彩合法吗| www.798108.com-我爱彩票下载安装| www.914518.com-网赌彩票漏洞赚钱| www.7011.pw-3d彩票互数-| www.802379.com-福彩大师独胆就一个| www.514471.com-xr原彩显示-| www.662102.com-彩店宝彩官方| www.yl08.com-松原快三开奖结果| www.199175.com-快三助手软件下载| www.331828.com-大发快三怎么玩和值| www.459548.com-彩票1516-| www.8951.wang-重庆彩票兑奖中心| www.509231.com-鑫鑫彩票是真的吗| www.426010.com-彩票开奖易彩网| www.601150.com-水彩贴吧-| www.730936.com-临渭区福彩店转让|