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.459235.com-彩票店帮买彩票| www.cy16.com-彩票app制作| www.961847.com-成都竞彩快三开奖| www.xg3.com-上海快三软件| www.xo77.com-福彩快三跨度图表| www.48zu.com-七彩丹霞图片| www.691913.com-彩票中心在哪| www.802652.com-北京福彩兑奖大厅| www.902779.com-大发快三辅助| www.984025.com-518彩票官网| www.cc82.cc-快三究竟能不能赚钱| www.c51.cm-七星彩规律-| www.47ue.com-中国移动彩铃设置| www.6872.cc-足彩竞猜专家推荐| www.069297.com-送彩金50彩票| www.188575.com-爱乐彩11选五| www.592336.com-乐彩33登陆-| www.35ip.com-周三开啥彩票| www.761096.com-好彩2复式表| www.879152.com-河南福彩幸运彩任二| www.990607.com-中体彩网官网| www.fp05.com-足球彩票怎么玩| www.881293.com-彩票不倍投稳赚| www.000788.com-数字彩票走势图大全| www.456855.com-时时彩牛牛号| www.571985.com-8888彩票pk拾| www.37wv.com-局王七星彩app| www.8013.live-中班彩虹伞说课稿| www.2675.in-世界杯彩票停止销售| www.2676.wang-福彩3d蜂巢配胆图| www.13753.com-今日竞彩结果| www.87792.cc-天涯社区论坛彩票| www.9475.cc-全国彩票统计软件| www.010093.com-体彩手机在线大管家| www.548699.com-海口七星彩画规软件| www.56aq.com-瑞士彩票最高奖金| www.09877.com-福彩微信公众号账户| www.382960.com-丰隆彩旸香江价格| www.548522.com-大发快三环球彩票| www.688174.com-福彩3d胆码论坛| www.52559.com-好彩网为什提不出钱| www.0137.cm-中彩网3d字谜论坛| www.qs56.com-贵阳福彩中心| www.868124.com-特区彩票论_坛| www.933896.com-今日彩票彩票| www.997074.com-体彩开奖排列五| www.al34.com-上官燕七星彩预测| www.4489.net-万彩吧排列五预测| www.594231.com-七彩汇app-| www.654679.com-500万彩票3d| www.610997.com-海南体育彩票视频| www.698617.com-怎么算快三-| www.784109.com-国乐彩用户注册| www.889765.com-体彩三天计划独胆王| www.974952.com-彩票查询双色球中| www.ar4.cc-吉林快三预测号| www.023168.com-体彩排列三杀尾| www.129418.com-体彩大乐透选号规则| www.508798.com-gpk彩票-| www.595444.com-k345cc天空彩| www.684739.com-中国体彩大乐透下载| www.791643.com-彩票兑奖大厅| www.876601.com-福彩3d中奖条件| www.949248.com-哪个平台可以买快三| 百姓彩票www.bxcp3.com| www.cp2108.com-一分快三稳赢技巧| www.mc59.com-爱彩乐快乐十分钟| www.329310.com-双色球牛材网彩摘网| www.732579.com-福彩客户端-| www.978028.com-彩钢棚图片-| www.fo80.com-快三大全第一门户| www.o65.com-员工年会彩票中奖| www.95px.com-多彩投类似的平台| www.35172.cc-沈阳快三查询| www.793716.com-一夜暴富彩票| www.874196.com-彩之牙彩票查询系统| www.950817.com-网络快三输惨| 500彩票www.50026r.com| www.gt16.com-新彩网-| www.a28.vip-广东时时彩快乐十分| www.60331.com-开黑彩网站-| www.56jj.com-爱彩乐上市-| www.0503.cm-乐彩网排列五推荐| www.85911.com-彩票三b查找开机号| www.121952.com-谁有时时彩群拉我| www.005100.com-彩票图查询-| www.295281.com-吉林省快三开奖说明| www.292337.com-双彩球开奖走势图| www.393323.com-彩铅画眼睛图片| www.24no.com-七星彩守号30年| www.795.club-彩票易购网-| www.792102.com-体育彩票好卖吗| www.925974.com-江西上饶体彩店转让| www.987872.com-正规售彩网站| www.jv61.com-大发时彩-| www.06gp.cc-彩铅叠色变深技巧| www.069.date-82彩票官网-| www.237485.com-福彩3d玩法说明| 众乐彩票www.237944.com| www.07zo.com-凤凰彩票怎么注销| 网易彩票www.332071.com| www.693520.com-大乐透命中中彩预测| www.898058.com-福利彩票宣传语简单| www.89382.com-福彩8676-| www.457418.com-恒彩娱-| www.504106.com-人生没有彩排事例| www.28799.cc-今晚福彩几点开奖| www.206381.com-下载江苏快三宝典| www.30zd.com-福彩每星期几开奖| www.805.mobi-宝岛彩票开奖网| www.7qx.cc-万博官方彩票网站| www.199669.com-厦门快三开奖结果| www.1821.tv-重庆时彩定位胆| www.47594.com-好彩妹是什么神| www.95365.cc-福利彩票公证员| 500彩票www.293788.com| www.936968.com-中彩网3d专家预测| 500彩票www.50051p.com| www.8528.biz-彩票中奖者-| www.534622.com-福利彩票机器加盟| www.259751.com-免费彩票选号器| www.390065.com-什么彩票能中几百万| www.523261.com-徐文轩彩票预测网站| www.821991.com-新浪彩票彩票竞技| www.66fa.cc-爱米彩票-| www.3199.cn-体育彩票送手环| www.426888.cc-快三预测网站| www.739070.com-彩神通代理软件| www.807172.com-棋牌注册送彩金| www.621302.com-快三分分彩下载| www.689738.com-彩66彩票网-| www.140.date-和彩虹有关的名字| www.dl5.com-时时彩开奖结果奖金| www.039763.com-中体华彩合法吗| www.598120.com-竞彩自由过关玩法| www.670980.com-赢网彩票-| www.737935.com-彩神喷绘机价格| www.807821.com-彩票开奖查询500| www.874463.com-新浪分分彩计划| www.44439.cc-福彩软件大全| www.282168.com-宁海体彩店-| www.771163.com-51彩票下载安装| www.547326.com-博发彩票怎么赚钱| www.764170.com-顶呱刮彩票图片| www.886665.com-今日体彩开奖直播| www.983624.com-七乐彩开奖| www.ue45.com-台湾5分彩走势图| www.29lq.com-重庆时时彩胆码计算| www.060810.com-快三彩票大平台| www.151459.com-爱彩通app下载| www.79922.com-彩票调整对实体店| www.7827.cn-竞彩学-| www.097635.com-你们买彩票中过奖吗| www.174741.com-那省快三-| www.973087.com-彩虹六号ps4| www.ep90.com-福彩三地开奖结果| www.ww63.com-南方双彩首页| www.258357.com-极速3b彩平台| www.684289.com-彩c02网站-| www.758653.com-彩票赚流水钱违法吗| www.856001.com-博彩反水-| www.911669.com-境外彩票网站哪家好| www.960352.com-京go娱乐是彩票吗| www.999806.com-广东好彩一最准预测|