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.095228.com-浙江12选5爱乐彩| www.232389.com-红旗彩票怎么玩| www.323453.com-7k官方彩票网站| www.413929.com-惠彩免费大全| www.530712.com-时时彩推荐打法| www.675270.com-久久彩票下载图标| www.765225.com-七星彩开心交流坛| www.867292.com-七星彩开奖结果论坛| www.935636.com-加微信彩票导师赚钱| www.999984.com-体彩大乐透资讯| www.co36.com-彩客网提款提不出| www.xe23.com-七星彩图规手机版| www.30lq.com-色彩头像图片| www.0716.wang-如何申请彩票销售点| www.7980.wang-特彩巴原之高手网| www.33880.com-怎么考取彩票分析师| www.84998.com-民政部彩票发行| www.047996.com-彩票网淘彩娱乐| www.180229.com-快三守号打法| www.262149.com-福建体彩网站| www.369443.com-福利彩票双色球| www.479987.com-体育彩票奖池| www.569385.com-双彩排列三三句话| www.653169.com-乐讯网吹吹七星彩| www.781467.com-66微彩是什么| www.865770.com-老快三遗漏数据查询| www.929443.com-分分时时彩稳中技巧| www.984152.com-今天3d彩涂-| www.vc01.com-博众快三软件| www.15ht.com-彩票咋看中奖| www.216.net-福利彩票买单双| www.4520.xyz-体彩直选票开奖| www.02397.com-体彩天下官网| www.72181.cc-运发彩票-| www.038386.com-彩票首存收集网| www.130678.cc-彩8在线-| www.212349.com-大发快三在线投注| www.290540.com-彩宝网排列三走势图| www.367621.com-简单彩铅樱花树画法| www.468886.com-一分彩是真的吗| www.559808.com-七里彩开奖今晚开奖| www.633550.com-99彩票网必中一肖| www.712196.com-e乐彩官方-| www.791581.cc-马云选彩票-| www.872204.com-贵阳市体彩管理中心| www.cai0138.com快三是不是骗人的| www.ls48.com-彩票网66-| www.n16.net-668彩票网站| www.48ik.com-七乐彩同尾数走势图| www.881.net-快三彩票止损方法| www.5285.shop-彩票机开机故障| www.07966.cc-高频彩长龙统计网| www.54601.com-白菜彩金论坛| www.001524.com-新浪爱彩买票靠谱吗| www.070816.com-凤凰公益彩票| www.139943.com-彩16怎么下载地址| www.220793.com-大奖彩票下载| www.303028.com-福彩三d走势图带连| www.376913.com-娶媳妇彩礼钱| www.662929.com-如意彩票手机app| www.738012.com-快三下注技巧| www.811201.com-六爻测彩票五行规律| www.884368.com-体彩彩票怎么玩法| www.980928.com-彩788反水时间| www.fi5.cc-拉人玩时时彩的套路| www.nh50.com-310足彩网-| www.08vd.com-三d试机号彩经网| www.78xn.com-竞彩管方欧赔| www.1715.cc-篮球滚球彩票| www.9679.wang-福彩试机号彩宝网| www.52665.cc-好彩门户资料| www.97522.com-福彩一二三等奖| www.062019.com-彩客网ios客户端| www.166624.com-快三网-| www.254797.com-拉人玩时时彩犯法吗| www.328097.com-乐彩论坛手机版| www.403335.com-林州市结婚彩礼多少| www.510155.com-无线幻彩控制器| www.581970.com-福彩8下载-| www.655174.com-重庆十十彩开奖号码| www.795572.com-新加坡天天彩资料网| www.871194.com-3d推荐星彩网| www.959153.com-快乐十分彩票下载| 中彩网www.71233hh.com| www.ey09.com-快三怎么投注稳赚| www.wm09.com-卓然彩票-| www.11xa.com-贵宾彩票-| www.78tn.com-中国彩吧安卓下载| www.1545.cc-包头青山区彩票中心| www.11830.com-移动积分换彩票短信| www.55787.com-彩78官网下载| www.98172.com-1分快三玩法| www.059257.com-福利彩票新彩网| www.173122.com-吉林快三怎么玩稳赚| www.258096.com-成功彩票vip| www.328978.com-福彩20-| www.393605.com-秋天风景彩铅画| www.537108.com-含有彩字的网名| www.620370.com-彩票幻圆图-| www.688185.com-体彩电子投注单| www.763152.com-官方彩票下载安装| www.869273.com-七星彩为什么没人买| www.941818.cc-福利彩票代理| www.992254.com-时时彩定胆5码计划| www.cp7918.com-时时彩跨度技巧规律| www.mg69.com-福彩快三赔法| www.w24.cc-四季彩票下载| www.48ej.com-天天赢彩票网| www.578.date-有什么彩票是压大小| www.4156.org-彩虹10无人机规格| www.9254.xyz-万达彩票的骗局揭秘| www.69521.com-e彩在线合法吗| www.025091.com-彩票5app-| www.092660.com-福建即乐彩开奖走势| www.153920.com-北京福彩代理| www.257338.com-微彩吧ios下载| www.323682.com-福彩双色球玩法介绍| www.388161.com-收福彩体彩开奖结果| www.526644.com-私自贩卖彩票| www.603813.com-足球彩票大数据分析| www.668876.com-怎么购买美国彩票| www.735969.com-新浪彩票、新浪网| www.802178.com-迷彩天地-| www.873386.com-中国体育彩票贵州| 鑫亿彩www.196087.com| www.fs03.com-北京极速快三官网| www.vo66.com-江苏老快三走势图表| www.03ai.com-中国福利彩票怎买| www.71jv.com-中彩缘网站-| www.0512.cc-购彩平台信誉好的| www.9428.cn-华彩考研-| www.42424.com-709彩票新版| www.82273.com-网上买彩票是骗局吗| www.028289.com-彩票验票码在哪查询| www.097260.com-安庆体彩店哪个靠谱| www.155460.com-上海快三精准预测| www.277534.com-快三彩票代理| www.356144.com-分分彩分析助手| www.426510.com-竞彩研究心得| www.514131.com-三地福彩-| www.574777.com-乐彩vip邀请码| www.637484.com-会计彩票公益金| www.760346.com-吉林时时彩玩法| www.834352.com-福彩3d全图总汇八| www.893289.com-l750乐彩网-| www.954179.com-足球彩票18101| www.990616.com-山东体彩即开订票| www.cp5332.com-安徽快三爱彩乐| www.kd14.com-怎么用手机买彩票啊| www.zj68.cc-我的彩票幸运号码| www.15zg.com-福彩上海15选5| www.307.tv-网上买彩票开私庄| www.3092.cc-体彩排列五中奖秘诀| www.7878.la-吉林快三总共几期| www.20358.com-彩票对打亏损刷分红| www.57749.com-韩国买彩票的app| www.038246.com-手机彩票软件靠谱么| www.117652.com-福彩幸运点半| www.176203.com-快三精确计算公式| www.261600.com-盛世彩票登录| www.337725.com-福彩3d杀号六码| www.397482.com-怎样网上买体育彩票| www.518929.com-发彩网赚钱是真的吗| www.577397.com-彩虹糖蓝色什么意思|