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.854137.com-五分快三是真是假| www.959506.com-9090彩票网-| 500彩票网www.65707y.com| www.703338.cc-彩票33论坛-| www.812741.com-体彩线上培训| www.894343.com-彩经网旧版本走势图| www.974073.com-福彩快三有哪些种类| www.11rr.com-5050彩票网-| www.05bc.com-看福彩开奖现场| www.77tr.com-彩票服务器租赁| www.2795.biz-743好彩软件| www.792133.com-河南安阳彩票贴吧| www.883123.com-多彩投众筹是否合法| www.962624.com-3d凤彩网-| 天天彩票www.101220.com| www.42va.com-彩票开奖结果排列5| www.865835.com-彩票娱乐台子| www.947926.com-体育彩票的规则| 快彩在线www.2632o.com| www.891731.com-双色球彩票预测| www.971069.com-体彩中奖规则明细| www.cp7398.com-今日湖北快三开奖号| www.sh82.com-重庆时时彩已关闭| www.10jz.com-快三单跳双跳是什么| www.789613.com-福彩快乐十分山西| www.855175.com-彩票两元网安全吗| www.932113.com-网上彩票老师带赚钱| www.651702.com-黑彩平台那好信誉好| www.796570.com-印尼五分彩后开奖| www.7376.cc-色彩画风景简单图片| www.982805.com-谁有红彩网邀请码| www.368162.com-刚力彩芽的唇| www.448646.com-福彩演播室每期主题| www.578011.com-腾讯分分彩龙虎技巧| www.954330.com-时时彩助手手机版| www.df6.com-快三有没有假| www.41cn.com-哪里可以购买七星彩| www.3793.cc-七星彩社区高手论坛| www.09528.cc-体彩手机投注平台| www.92107.com-顺丰彩app-| www.079036.com-大玩家彩票靠谱吗| www.604525.com-时时彩案件-| www.9779.cm-七星彩专家上官燕| www.051305.com-彩票大数据分析系统| www.678143.com-易彩堂怎么样| www.817881.com-彩票走势图图片| www.929838.com-哪些省份售七星彩| 500彩票www.513477.com| www.x68.biz-大发彩票破解版| www.93zm.com-福彩5分彩-| www.6430.in-福彩3d包星图| www.72070.com-九盛中彩彩票终端机| www.124942.com-乐彩网35选7| www.737520.com-大发快三怎么充值| www.883806.com-88快三彩票-| www.gp1.cc-168彩票.com| www.935933.com-小彩神3d水心论坛| www.cp3372.com-江苏快三三-| www.4nw.cc-爱彩比分网-| www.0749.net-万彩影像大师破解版| www.557363.com-7号彩票娱乐邀请码| www.6473.vip-a2彩票-| www.087376.com-福彩3d余数走势图| www.cp6115.com-彩500下载-| www.5346.cc-福利彩票1月2号| www.79386.com-香港代退彩金被骗| www.036044.com-一分钟快三官彩| www.207576.com-彩票走势app| www.325308.com-苹果彩票线路导航| www.444964.com-凤岗福利彩票网点| www.996362.com-北单足彩上下单双| www.jc59.com-足彩比分预测| www.04mp.com-古风彩铅桃花画法| www.717032.com-彩铅绘画人物技巧| www.967796.com-百合网上男的玩彩票| www.cai4141.com彩票双色球大赢家| www.966133.com-全民快三是不是正规| 大赢家彩票平台www.910576.com| www.111074.com-国内彩票大奖排行榜| www.870369.com-官方彩是骗人的吗| www.gg59.com-彩客网完整比分直播| www.xg40.com-977彩票网站| www.797899.com-彩票源码分享| www.1180.xyz-秒速快三网页计划| www.272506.com-取消中国彩票| www.352386.com-金牛在线彩票平台| www.054770.com-中国彩app下载| www.166314.com-快三开奖结果走势图| www.266795.com-快三邀请码怎么获取| www.332955.com-500万足彩网| 福彩网www.055l.cc| www.14uz.com-体彩18143期| www.30955.cc-五次福彩3d奖金表| www.028936.com-通宝博彩-| www.122481.com-旺彩双色球预测下载| www.278144.com-qq快三开奖结果| www.360726.com-大旺彩票应用软件| www.445835.com-《彩票管理细则》| www.536207.com-彩票有哪些品种| www.114445.com-中彩网双色球全版| www.12jx.com-江西快三吧-| www.1859.wang-新浪爱彩高清走势图| www.31853.com-今日足彩竞彩| www.99112.cc-竞彩胜负过关| www.152625.com-彩票做号软件苹果版| www.298751.com-幸运彩票官网| www.466.club-合乐彩票哪个是真的| www.6140.vip-彩票会员账号| www.959086.com-彩票99安卓版下载| 凤凰彩票www.77803c.com| www.96ud.com-人生没有彩排感悟| www.57bu.com-铜胆中彩双色球| www.3662.cc-933彩票骗人| www.207.pw-菊花彩铅画-| www.107090.com-买彩黑客-| www.947077.com-望京彩票站-| www.997387.com-彩票360下载安装| www.ev05.com-k彩登录网站| www.xe84.com-7彩国际是真的吗| www.70hj.com-7k彩平台中心| www.874635.com-腾讯分分彩害死人| www.051658.com-顶呱刮彩票下载| www.572721.com-刚力彩芽结婚| www.719761.com-吉林省体育彩票管理| www.035034.com-u9彩票官网软件| www.182769.com-微信玩快三规则| www.591895.com-98彩票网客户端| www.4094.biz-彩虹无人机千亿市值| www.99004.com-时时彩斗牛怎么玩| www.076228.com-内蒙快三360开奖| www.872.me-鹿彩铅手绘-| www.134895.com-时时彩送彩金| www.267588.com-几点买彩票容易中奖| www.358446.com-时时彩龙虎源码| www.455297.com-风之彩彩票有风险吗| www.541286.com-四级彩票-| www.776771.com-重庆时时彩几点停止| www.df60.com-七星彩复式玩法规则| www.a87.com-北京快福彩快三| www.833.red-北京二八彩票| www.9590.org-老360彩票-| www.09427.com-南宁福彩十佳投注站| www.88364.cc-世界彩票中奖纪录| www.132736.com-世界杯足彩中奖规则| www.223752.com-官方福彩幸运快三| www.350598.com-a3彩色打印机报价| www.443896.com-牛蛙彩票开奖现场| www.532334.com-微信带你买彩票的人| www.601205.com-最好的买彩网| www.654922.com-有玩bb竞速彩| www.716912.com-彩铅幼儿画-| www.803020.com-福彩手机购买| www.905651.com-yy彩票登陆-| www.974600.com-中奖彩票软件下载| www.cy80.com-一分快三精准计划| www.yn47.com-吉林省时时彩| www.10jg.com-天佑风采彩票| www.0951.site-彩店宝下载不了东西| www.887325.com-彩票双色球字谜汇总| www.1549.me-上海彩经走势图| www.7993.cc-如何博彩-| www.79771.com-多赢在线彩票手机版| www.960001.com-高德彩票游戏| www.873672.com-掌上彩票软件|