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.32353.com-大乐透走势图爱彩人| www.803379.com-qq彩票计划群号| www.893832.com-快三派奖-| www.964980.com-快三怎么用胆码计算| 500彩票www.904820.com| www.ou95.com-福彩3d图谜总汇汇| www.37.cn-快三半顺号技巧| www.80oo.com-什么网站买彩票安全| www.zf53.com-全彩本子库5d| www.658226.com-彩视为什么注册不了| www.012186.com-快三挂机稳赚| www.13yw.com-搜索七星彩结果| www.ud47.com-哪些私彩平台送彩金| www.84215.com-七星彩棺材码| www.054969.com-篮竞彩比分直播| www.155747.com-好彩客安卓版本| www.230767.com-8888a3彩票-| www.047997.com-体彩排3试机号| www.815312.com-体彩中彩网-| www.956906.com-hk百彩网-| www.68ji.com-乐彩国际论坛| www.523683.com-时时彩号码怎么预测| www.693707.com-体育彩票专业版下载| www.707215.com-彩票摇号器-| www.749779.com-天天爱彩票几天开| www.875087.com-十大正规竞彩平台| www.cai8888.cc-广西快三奖金| www.i40.hk-下面彩票开奖大全| www.861451.com-安徽体彩中心在哪| www.972553.com-彩铅山水画-| www.yi36.com-彩98彩票领导者| www.133.live-沂水彩虹谷景区| www.74323.com-买彩票有限额吗| www.64288.cc-足球竞彩软件有哪些| www.38022.com-潮信彩票群二维码| www.010226.com-彩票下期预测| www.5129.net-教肓电视台福彩| www.050604.com-吉林快三一共多少期| www.123481.com-广西快乐双彩复式表| www.228281.com-郑州彩礼一般多少| www.319.website乐彩赢下载-| www.191234.com-上海快三兑奖规则| www.286365.cc-天津福彩网-| www.362781.com-天上彩虹像什么| www.467056.com-足彩比分最准预测网| www.549118.com-彩票江苏快三怎样买| www.621827.com-海南七星彩头尾合| www.684442.com-极速快三选号技巧| www.762108.com-竞彩足球手机客户端| www.866959.com-周六什么彩票开奖| www.923132.com-彩钢瓦围挡价格| www.974131.com-彩研师荐双色球| 彩61www.653546.com| www.539499.com-上海快三组合图表| www.693561.com-体育彩票能中奖吗| www.984372.com-福彩双色球自己选号| www.237665.com-彩票信用玩法骗局| www.305779.com-彩票每期买多少合适| www.364547.com-刚力彩芽和上户彩| www.41bg.com-老海南七星彩投注网| www.131234.cc-开封市结婚彩礼| www.17581.cc-时时彩二星直选技巧| www.097091.com-体彩中奖助手下载| www.342.me-色彩所有颜色| www.dp66.com-河北快三今日开奖号| www.x11.me-网上彩票赚钱软件| www.95dw.com-今天体彩排三预测| www.5882.net-彩神通关金码关注| www.36793.cc-乐彩网手机版下载| www.550676.com-福利彩票购彩平台| www.691582.com-足彩19038-| www.806613.com-老猫出彩快讯下载| www.909233.com-七星彩当天几点开奖| www.981293.com-慧投竞彩推荐| www.cp5318.com-广西快三爱彩乐| www.ra02.com-淘宝如何买彩票| www.38st.com-七星彩360包码| www.088828.cc-今日头条彩票推荐| www.137807.com-买彩票的技巧3d| www.78bb.com-博彩和体彩区别| www.010616.com-熊猫彩票是什么| www.390191.com-撥发彩票-| www.561282.com-大财神彩乐园| www.682306.com-福建福快三-| www.865835.com-彩票娱乐台子| www.g46.club-内蒙古彩票巨奖| www.39330.com-旺彩彩票查询| www.019652.com-彩票迷-| www.929850.com-生肖彩票规则| E彩堂www.43818q.com| www.i90.com-河北体彩七星彩| www.3274.cm-下载购彩app下载| www.22936.cc-福彩三地三天必下| www.79924.com-听吉林快三-| www.084922.com-体彩机器外接显示器| www.140110.com-779彩票靠谱吗| www.208598.com-彩票助手手机版| www.263557.com-3d新彩吧图-| www.328870.com-今天七星彩开奖直播| www.383629.com-三晋福彩网快乐十分| www.465799.com-彩六玩法介绍| www.528935.com-体彩兑奖返点| www.583884.com-彩票88官方网站| www.632903.com-立彩助手闪退| www.680721.com-忽悠买彩票-| www.733039.com-连云港体彩中心| www.785597.com-中国体彩网官方篮球| www.842006.com-国足体彩-| www.886484.com-优彩社区-| www.935976.com-重庆时时彩漏洞骗局| www.973291.com-关于彩虹的图片大全| 易彩网www.36166u.com| www.er36.com-天天中彩网官网| www.wt43.com-中国福利彩票开奖网| www.10rp.com-时时彩是合法的吗| www.74ta.com-幸运彩票怎么提现| www.0152.vip-彩9彩票邀请码| www.7977.top-博彩众人什么意思| www.17323.cc-足彩对阵表分析| www.44460.com-我想加入买彩票群| www.73881.cc-欢腾彩票官方网站| www.223110.com-福彩3d和值谜| www.300090.cc-双色球彩票指南报纸| www.354399.com-16年彩票大奖| www.0335.date-幸运时时彩趋势图| www.48892.com-时时彩彩票计划| www.019270.com-我的彩票中奖查询| www.098477.com-gc国彩-| www.210724.com-吉林新快三app| www.323778.com-七乐彩选号-| www.417418.com-怎样才能开彩票店| www.533778.com-七星彩的千位数在哪| www.626097.com-深圳市鑫彩晨| www.740148.com-牛彩网排三开机号| www.837467.com-屠龙立彩-| www.937530.com-褔彩3d和尾走势| www.as04.com-彩票走势图入门| www.49bh.com-七彩莲花佛教的含义| www.5905.cm-晋中福彩管理中心| www.42416.com-2019年掌上中彩| www.58153.cc-大乐透彩票号码开奖| www.038895.com-信彩腾讯分分彩计划| www.139181.com-江苏快彩3-| www.247988.com-澳门3d彩报-| www.355702.com-竞彩交税规则| www.525032.com-天天乐福彩app| www.623061.com-体彩p3关注号| www.763543.com-明朝娱乐彩票| www.852966.com-e游彩票-| www.973176.com-新版彩虹代刷app| www.id11.com-玩彩票的下场| www.01mr.com-七星彩数据图表| www.258607.com-竞竞彩网-| www.369430.com-美国彩票新高| www.510928.com-带有彩虹的网名| www.617777.com-彩礼一般给多少| www.254085.com-精彩十分开奖| www.369158.com-好玩的彩票软件| www.477152.com-人人彩票安全吗| www.587967.com-佳能彩色复印机a3| www.690466.com-竞彩网大乐透走势图| www.812110.com-福彩双色球往期回顾| www.682601.com-彩吧红五图库| www.820.biz-中国最大双彩论坛|