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天

知道了
彩01彩票 www.vm19.com-网易彩票提现失败| www.91ox.com-彩票必中法术| www.3359.cn-如何选彩票-| www.21386.cc-彩神三-| www.003932.com-彩票整治-| www.090769.com-手机众彩网app| www.86wb.com-新加坡乐和彩开| www.71634.com-短信验证码送彩金| www.2652.wang-旺彩网预测-| www.019545.com-安顺市彩票管理中心| www.172872.com-广西福彩快三开奖| www.261511.com-易彩堂主页-| www.2865.cn-安徽体彩专管员待遇| www.757654.com-淘彩app网站下载| www.305692.com-1216app彩票| www.663988.com-时事彩五星独胆| www.751421.com-亚洲彩票注册| www.825890.com-宁波快乐彩12选5| www.919831.com-怎么摇彩票-| www.980013.com-刺客研彩网3d论坛| www.cx1.cc-福彩近30期走势图| www.907508.com-免费破解快三软件| www.973856.com-快三输了还能回本么| www.cp0995.com-快三赚钱是真的吗| www.or11.com-e乐彩登录手机版| www.18zw.com-福彩大乐透开奖号码| www.9095.cc-查七乐彩跨度走势图| www.653351.com-澳彩官网手机版下载| www.771096.com-时时彩计划不稳| www.878436.com-国彩彩票app| www.982214.com-郑州快三开奖号| www.v69.net-好彩网3d藏机图| 中国福利彩票www.08588q.com| www.7135.xyz-吉林快三在线看| www.37793.com-网上赌彩软件| www.137117.com-七彩杯官网-| www.887.cc-艾彩女女-| www.8049.cc-云南时时采彩走势图| 818合彩www.www.9889hc.com| www.482520.com-彩票选号反选工具| www.547369.com-博码彩票-| www.680017.com-安卓彩票-| www.765487.com-快频彩票网站| www.856773.com-中奖彩票电影| www.930780.com-来自中彩网论坛| www.246642.com-彩票多久开一次| www.772399.com-时时彩骗了多少人| www.06190.com-福彩3d中奖组选| www.75978.com-双色球彩票可以折吗| www.376764.com-体彩开奖助手开机号| www.535478.com-彩票中3000-| www.638194.com-中国福彩宣传图片| www.769312.com-好彩客在哪下载| www.888775.com-78彩票推荐人吗| 500彩票www.50080j.com| www.1483.com-皇庭风范彩晶膜官网| www.931163.com-体彩七星彩奖金| www.265360.com-上海快三综合走势| www.393605.com-秋天风景彩铅画| www.552555.com-c27彩票官网| www.816.org-竞彩发单app| www.8430.vip-湖北彩礼多少| www.318204.com-彩博-| www.448012.com-夺金三分彩-| www.560020.com-体彩排列五南方双彩| www.677843.com-彩票装修-| www.4398.biz-乐彩vip众乐软件| www.19990.cc-虚拟足彩进球数| www.419.pw-腾讯分分彩技巧回血| www.115119.com-澳洲时时彩计划软件| www.233498.com-湖北快三两同号遗漏| www.839334.com-快三绝杀二码技巧| 500彩票www.346277.com| www.nt24.com-海南七星彩-| www.95jv.com-永胜理财彩票| www.515127.com-七星彩三字定位包码| www.18227.cc-265彩票网站| www.91552.cc-绿好彩和万宝路黑冰| www.089717.com-中国体育彩票官方| www.169687.com-分分快三平台| www.260975.com-一分快三和值技巧| www.375701.com-百乐彩怎么下载| www.502498.com-足彩8胆拖6-| www.089070.com-吉林快3彩票平台| www.532957.com-福彩开彩时间| www.624724.com-体彩棑列三出奖结果| www.692338.com-世界几大博彩公司| www.765444.com-哪个彩票反水最高| www.832235.com-福彩3d藏宝图| www.894289.com-五省快三三颜走势图| www.957836.com-快乐彩开奖号码表| www.gt79.com-彩鸿彩票诈骗| www.ux65.com-老谢说彩131| www.02ux.com-彩票走势k线图| www.67wj.com-彩色混凝土哪里买| www.64345.cc-彩妆店加盟-| www.0385.vip-福利彩票金码| www.0687.cm-福彩背景墙设计| www.854818.com-快三软件会有挂吗| www.947910.com-在哪里可以买彩票| www.995997.com-彩三数字-| www.rf5.com-高手彩坛免费料| www.936281.com-乐山快三开奖结果| www.77yx.com-国外做博彩-| www.6055.biz-3d彩票杀号方法| www.3626.top-彩票诈骗报警有用吗| www.042345.com-广东福利彩票玩法| www.0550.loan-体彩赢刊电子版| www.700605.com-彩票黑平台不给提现| www.636633.com-彩虹六号短路| www.18594.com-快三杀龙-| www.244265.com-快三神奇四码| www.46109.com-时时彩单期计划网页| www.009291.com-178彩票邀请码| www.146829.com-新浪篮彩比分直播| www.230916.com-快乐彩票6348| www.8442.loan-彩票赔钱经历| www.500095.cc-078彩票黑-| www.632477.com-福彩注销流程| www.707186.com-481彩票娱乐| www.794122.com-九州彩票输钱了| www.878339.com-500万彩票可靠吗| www.978845.com-南粤风采好彩一预测| www.ho49.com-网上彩票怎么赚钱| www.15xy.cc-爸妈要100万彩礼| www.53228.com-时时彩流水-| www.854810.com-彩运快三靠谱吗| www.019763.com-体彩加盟电话| www.981484.com-易彩网登录-| www.hs21.com-北京中彩票大奖| www.588604.com-七乐彩开奖日期时间| www.800666.com-福彩3d加奖公告| www.872403.com-手机网上买爱乐彩| www.ir37.com-足彩胜负彩计算器| www.72yf.com-贵宾室cp彩票| www.680912.com-不要再买彩票了| www.773958.com-天天彩票qq交流群| www.23he.com-全球彩票中大奖排行| www.92xn.com-澳洲五分彩怎么破解| www.53351.com-安徽快三吧-| www.016588.com-竞彩足彩分析师招聘| www.01fr.com-体彩正版藏机图| www.533116.com-49个数字型彩票| www.109620.com-鸿运五分彩开奖查询| www.cp0016.com-炫乐彩票app| www.568081.com-卖体彩好还是福彩好| www.405798.com-50707巨峰彩票| www.cq24.com-网上买彩票犯法吗| www.708025.com-彩状元彩票-| www.513368.com-湖南省体彩招聘| www.625206.com-体彩即开彩票规则| www.951038.com-信誉彩票导航| www.113759.com-大发快三交流| www.743687.com-立彩快三-| www.9985.cn-百福彩网址-| www.175830.com-快三分析计划软件| www.214429.com-人人红彩票安卓| www.504884.com-彩美在线观看| www.760342.com-今晚好彩2开奖| www.929297.com-国际经典快三| www.cp372.com-福彩5d直选开奖号| www.472007.com-香港三色彩公司开奖| www.cai6011.com河南省快三今日开奖| www.605928.com-吉祥彩票怎么赚钱|