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.010599.com-491彩票网址| www.162398.com-不买足彩-| www.311115.com-分分快三买单双技巧| www.396320.com-星期天哪些彩票开奖| www.548178.com-河北十一选五彩票| www.652411.com-北京体彩快中彩| www.753169.com-网易足彩推荐预测| www.856076.com-北京体育彩票彩票| www.32al.com-博友彩靠谱吗| www.792.win-河北福彩快三结果果| www.6346.tv-竞彩猫合买版| www.23128.com-国彩下载安装到手机| www.74275.com-台湾彩虹旗论坛网址| www.033970.com-彩票屠龙模式| www.181598.com-好彩网络骗局| www.267000.com-彩票是骗局揭秘| www.374196.com-湖北体育彩票大奖| www.542896.com-彩票网站账户| www.653739.com-如何申请开体彩店| www.753785.com-k彩娱乐地线路测速| www.840623.com-广西体彩农成| www.906771.com-江西快三是合法的吗| www.979541.com-晚晚好彩今晚图片| www.fj47.com-500时时彩彩票| www.zk97.com-88爱彩app-| www.36zs.com-竞彩足球九场奖金| www.1280.xyz-佳彩d669-| www.8503.cn-福彩3d走势图中彩| www.69705.com-今晚七星彩下期预测| www.040590.com-三千万彩票大奖| www.133698.com-体彩足球竞猜| www.218344.com-新浪彩票网-| www.302572.com-735彩票-| www.380795.com-微信有人带着玩彩票| www.545440.com-中奖彩票生成| www.693516.com-足彩胜平负3种猜法| www.782172.com-易旺彩票网站真的吗| www.868811.com-七星彩前四位预测| www.967873.com-体彩61怎么玩的| www.cai3393.com快三中奖金额| www.mw40.com-彩乐下载-| www.9gs.com-福彩3d之家| www.77uv.com-手机彩票代购合法吗| www.1995.in-彩世界彩票平台| www.7941.com-彩宝黄玉-| www.31631.com-五选三彩票下载| www.79927.com-红玺国际网上彩票| www.037886.com-爱彩乐用户注册| www.196482.com-中国体彩开奖查询| www.276156.com-中国体彩彩种| www.379266.com-竞彩足球分析师招聘| www.510501.com-超长彩虹屁-| www.587132.com-彩播app官网| www.662603.com-旺彩双色球大乐透| www.741699.com-彩宝店彩票官方网站| www.818604.com-彩票拉手合作| www.892511.com-福彩双色球预测汇总| www.963447.com-中国足球竞彩网下载| 盈彩www.yc7701.com| www.je16.com-网易竞彩是不是骗局| www.f44.top-国乐彩是什么| www.38fk.com-体彩排列5长条| www.1580.vip-最新彩票收藏交易会| www.8459.cm-星程彩票-| www.39511.com-豪彩官方注册| www.86876.cc-福骰快三-| www.042101.com-速赢彩票是合法的吗| www.151554.com-生日幸运数字买彩票| www.239811.com-关于王者彩票被骗| www.318677.com-彩九九官方网站| www.389128.com-家彩开奖专门提| www.525753.com-永利彩票服务器| www.624190.com-乐彩33平台-| www.695520.com-竞彩足球投注合买| www.773059.com-彩票中奖计算方法| www.909233.com-七星彩当天几点开奖| www.967154.com-神彩通代理会员专用| 快彩www.81678s.com| www.gd53.com-花田彩票托-| www.yr13.com-体彩说明-| www.22ph.com-3d电脑福利彩票| www.0322.net-许昌福彩体彩转让| www.6669.tv-福彩三d三字谜| www.17644.com-北京体彩官网| www.60133.com-彩票店兼营-| www.031931.com-黑彩代理可以拿平台| www.109677.com-足彩加官网-| www.181166.com-旺球彩店下载| www.252653.com-湖北快三带线走势图| www.325106.com-中国人在国外中彩票| www.398233.com-淘彩票账号怎么注册| www.572189.com-中国双色福利彩票| www.642462.com-福彩三地选胆图表| www.739050.com-数字三彩神通安卓版| www.809691.com-好彩网3d字谜图谜| www.874142.com-澳洲三分彩计划网| www.977543.com-吉利彩票怎么玩| www.oj44.com-吉林市福彩-| www.v78.club-体彩五字术语| www.49hp.com-利民彩票网站合法吗| www.717.tv-厦门彩票怎么样| www.4523.net-足彩倍投到黑10期| www.9858.org-古建彩绘图案丶| www.76138.cc-网上买彩票正规吗| www.026101.com-十分彩玩法-| www.098900.com-福彩3d独胆王毒胆| www.163772.com-中华彩票网投安全吗| www.279535.com-北京时时彩网址| www.365674.cc-彩铅动漫人物画图片| www.451511.com-买彩票用哪个软件好| www.539104.com-时时彩中奖多少钱| www.640540.com-麦久彩票网首页| www.731005.com-开福彩店多少钱| www.799051.com-顶尖彩票如何提现| www.871387.com-人人体彩-| www.964320.com-中国福利彩票500| 同乐彩票www.029781.com| www.fl46.com-支付宝如何买彩票| www.vr47.com-竞彩足球走势图| www.06ss.com-二年级上册彩铅画| www.71du.com-梦见买彩票没买成| www.0857.cn-优彩社区四不像论坛| www.9925.cc-福彩3a解太湖汇总| www.49908.com-福彩61生肖开奖| www.89758.cc-七星彩是怎么摇奖的| www.040218.com-福彩双色球合买大厅| www.137395.com-随机彩票会中奖吗| www.207744.com-官方合法的彩票软件| www.273511.com-福彩有哪些-| www.370884.com-陶瓷新彩画-| www.455799.com-奥马彩票-| www.536831.com-带有彩字的好听网名| www.635541.com-奢华彩宝-| www.713029.com-香港4亿彩-| www.781278.com-天津福彩2d玩法| www.851192.com-手机网上如何买彩票| www.910074.com-3d银海彩票-| www.967767.com-彩票历史开奖查询| www.er05.com-下载乐彩网app| www.uc04.cc-时时彩计划app| www.9aj.cc-体彩数字是什么号码| www.95303.com-福彩彩票刮刮卡| www.067513.com-黑客除黑彩-| www.128923.com-辛褔彩票-| www.222147.com-七星彩专家预测频道| www.288850.cc-彩票号码遗漏有规律| www.452561.com-华南地区火爆七星彩| www.536011.com-用户登录中彩吧| www.622611.com-福彩3d图片字谜| www.683801.com-恒彩app-| www.755663.com-旺彩双色球ios版| www.857623.com-梦想彩票苹果版| www.913211.com-中国重庆彩票官网| www.968296.com-8828彩票靠谱吗| www.cp785.com-用什么软件玩快三| www.jl90.com-彩票网站诈骗手段| www.yg72.com-玩分分彩有什么技巧| www.12yt.com-800彩票app-| www.72nu.com-竞彩容错表玩法| www.0410.pw-高频彩怎么玩都是输| www.8996.cc-乐彩彩票资料| www.37936.cc-顶级彩票登陆| www.76796.cc-中国官方足球竞彩网| www.021741.com-三地彩吧图库寻码图|