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.747852.com-红彩会手机版| www.045135.com-怎么下载彩神通| www.217343.com-即时开彩安卓| www.319979.com-昨天体彩开奖| www.420093.com-乐游彩票靠谱吗| www.525382.com-时时彩流水好刷吗| www.7352.top-体彩和竞彩-| www.022571.com-体彩排列三天使断组| www.177672.com-江苏快三计划网页| www.788789.cc-今日竞彩单场| www.mf13.com-百度彩票网旺彩社区| www.1yo.cc-快三012路怎么分| www.16tv.com-秦皇岛福彩快三| www.7328.tv-彩票种类有哪些种类| www.63826.cc-足彩竞彩胜负平| www.21380.com-腾讯分分彩先赢后输| www.69131.cc-时时彩没有官网吗| www.026954.com-八度彩票官方网站| www.763368.com-福利彩票店怎么加盟| www.847637.com-石家庄体彩网| www.cp647.com-彩神x是真的吗| www.25199.cc-彩铅画的画怎么画| www.83823.cc-七星彩爆发-| www.062029.com-好彩客ios下载| www.j76.biz-彩票平台网站维护| www.420338.com-彩票站里都有什么| www.6969.online566彩票下载| www.919160.com-新时彩中奖-| www.mt23.com-官方彩下载安装| www.47pf.com-22彩票平台下载| www.982015.com-贵州省体彩开奖中心| www.7fh.cc-足彩欧赔初盘怎么看| www.21726.com-银行卡打彩金犯法吗| www.813595.com-福彩订单助手下载| www.c1.pw-快湖北快三走势图| www.118960.com-97彩票app下载| www.322724.com-七乐彩票开奖结果| www.301071.com-存1元送38元彩金| www.hm5.cc-体彩内蒙古11选5| www.514208.com-彩票平台为什么黑钱| www.640968.com-荣耀国际彩票| www.773507.com-365彩票提现| www.25975.cc-彩虹七色-| www.91502.com-红好彩香烟缅甸版| www.1335.com-福利彩票是真实的吗| www.936957.com-神彩福牛双色球官网| www.527411.com-怎样下载彩库宝典| www.0986.org-梦见朋友正在买彩票| www.14482.com-江南彩姐专家专栏| www.gr39.com-韩国美高梅快三网站| www.024523.com-福盈门彩票官方网站| www.920327.com-河北省体彩开奖查询| www.130790.com-蚂蚁彩票怎么样| www.358544.com-彩票机键盘字母用途| www.232958.com-北单竞彩-| www.840595.com-广西彩票自助售票机| www.957814.com-七星彩如何包码赚钱| www.ci52.com-江西快三开奖结果| www.54bd.com-体彩排三谜语| www.850308.com-今天3d彩民乐全图| www.990431.com-福彩返奖比例| www.68up.com-万达商城投彩| www.456951.com-竟彩足球赛果开奖| www.2026.com-香港好彩堂资料中心| www.60031.cc-66官方彩票安卓版| www.56303.com-彩票所有组合| www.810533.com-彩票领奖程序| www.489773.com-小白彩票竞彩| www.326717.com-排三南方双彩试机号| www.506263.com-彩票d试机号| www.719318.com-河北保定快三联系| www.fu80.com-快三计算机计算公式| www.097982.com-手机万彩吧下载安装| www.085203.com-那些凤凰彩票导师| www.300073.cc-网易彩票时时彩| www.9893.cc-宏盛彩票官网地址| www.067682.com-江苏快三多少一注| www.990542.com-韩国彩票lotto| www.bg21.com-彩票黑平台曝光| www.ul97.com-体彩兑奖多久到账| www.11lc.com-越南河内5分彩下载| www.73ul.com-c8万彩吧6采| www.262299.com-快频彩是正规彩票吗| www.786.cm-福彩3d字迷解释| www.3275.biz-r中彩网-| www.087714.com-梦见彩票号码| www.897477.com-中国福利彩票广告词| www.yb16.com-福彩3d34期-| www.701505.com-竞彩足球比分中奖| www.223954.com-大发uu直播快三| www.472275.com-时时彩推波方案| www.623890.com-九歌彩票安卓版下载| www.773006.com-网上投注高频彩票| www.sh60.cc-62彩票-| www.105990.com-彩77安卓官方下载| www.348840.com-彩神预测-| www.574900.com-乐购彩网站-| www.271315.com-无嘴好彩价格| www.414509.com-新手轻松养出七彩盏| www.663884.com-体育彩票主题| www.571981.com-荆州彩票中奖名单| www.639738.com-三分时时彩的技巧| www.751453.com-淘彩票787官网| www.861601.com-彩宝图库-| www.956870.com-hk百彩网开奖直播| www.rs5.com-体彩e球彩奖金表| www.zh60.com-双彩论坛双彩图| www.61kn.com-解读心脏彩超报告单| www.ap9.com-3d走势图百度乐彩| www.096998.com-福彩改革-| www.331230.com-大发彩票是什么平台| www.251101.com-u9彩票ios下载| www.056256.com-七乐彩中奖规则介绍| www.144087.com-彩之家论坛资料| www.22pk.com-金钻彩票登录地址| www.025.pink-七星彩番外篇明月珰| www.4739.biz-福利三分彩人工计划| www.3088.cc-重生买彩票小说| www.6mb.com-如何用数学算彩票| www.034141.com-七乐彩哪年发行| www.110406.com-中国体彩改革| www.619766.com-彩票挂机稳定方案| www.697687.com-研究彩票有成功的吗| www.5089.vip-捷豹彩票官网| www.888553.com-95彩票网下载| www.961012.cc-3d彩综合走势图| 亚洲www.788257.com| www.763399.com-ios足彩app-| www.104677.com-足彩竞彩直播| www.67955.cc-河内1分彩-| 55彩票www.755864.com| www.011960.com-一彩票图谜-| www.067939.com-河北福彩快3下载| www.652929.com-足球胜负彩任九开奖| www.12270.com-爱乐透买彩票安全吗| www.009826.com-下彩网官方下载| www.547549.com-足彩比分500直播| www.793411.com-中彩票后的人生| www.9785.biz-f一选五浙江彩票| www.408526.com-彩妆代理微商代理| www.525306.com-重庆福利彩票店转让| www.98217.com-福彩3d杀三码最准| www.731947.com-爱彩彩票网址登录| www.798315.com-大彩鲸11选5彩票| www.858139.com-足彩竞猜比分| www.913968.com-合法的在线彩票| www.961778.com-qq上专业买彩票| 500彩票www.50051e.com| www.89928.cc-第一彩票网下载| www.833339.com-彩票没有二维码| www.915805.com-彩票店加盟要多少钱| www.997607.com-风发彩票骗局| www.am79.cc-福利彩票快三预测| www.se74.com-时时彩的软件app| www.19jo.com-肥城福利彩票站点| www.0128.cm-彩色是颜色吗| www.551901.com-大乐透彩票选号| www.6699.site-新彩网字谜画谜总汇| www.539287.com-体彩机器能过户吗| www.vc6.com-七乐彩现场开奖直播| www.872293.com-贵州福彩领奖地址| www.970713.com-幸运彩票计划导师| www.ld53.com-中彩彩票计划| www.3851.biz-匕7星彩开奖结果|