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天

知道了
彩票123现在叫什么名字 www.003456.cc-恒丰国际博彩| www.45yj.com-好彩香烟铁盒包装| www.274880.com-贵州快三开奖号| www.283189.com-七星彩怎样领奖| www.206433.com-合肥快三开奖走势图| www.434970.com-江西福彩投注助手| www.762543.com-香港彩富网最快报码| www.924901.com-秒速时时彩投注网站| www.cp0108.com-正规快三平台下载| www.4711.top-80彩票官方网站| www.59140.com-七乐彩11中4十0| www.642042.com-彩票会不会有作假| www.ij42.com-下载福利彩票| www.118233.com-18彩票官方下载| www.271912.com-中原彩票大厅| www.870038.com-人人彩票手机版下载| www.151828.com-怎么注册汇彩网| www.ks16.com-福彩33d开奖结果| www.512.biz-彩票跟群计划| www.027281.com-英国五分彩怎么玩| www.57hi.com-体彩今年何时开奖| www.16292.cc-足彩猜比分-| www.4329.biz-下载福彩在线app| www.51736.cc-中国福利彩票欢乐彩| www.051179.com-幸福彩票注册| www.184891.com-中国福利彩票手机买| www.09ho.com-开彩吧正板资料| www.997435.com-三分时时彩计划心得| www.964.tv-3d彩票怎么推算| www.69191.cc-买彩票倾家荡产复仇| www.53326.cc-菠萝时时彩预测软件| www.0521.com-彩票趋势网-| www.27527.cc-3d试机号宝彩| www.97652.cc-c61彩票注册登录| www.129469.com-好运来彩票主页| www.332805.com-彩票直播频道| www.hz29.com-网络彩票赌博套路| www.y01.cn-体彩排列5直播| www.265603.com-福彩3d技巧论坛| www.9611.wang-中国彩票造假事件| www.121572.com-福彩陕西福利彩票网| www.8895.vip-竞彩串关中奖概率表| www.075754.com-彩票价格表-| www.612356.com-南京雪中彩影| www.184633.com-彩神vll下载| www.38587.cc-大奖彩票官方网站| www.2145.cn-双福网福彩3d| www.03xd.com-体彩开机号码今天| www.066751.com-绿色正版u9彩票| www.95295.com-七乐彩为什么没人玩| www.674484.com-万通彩票官网| www.874786.com-k彩登录-| 500彩票www.66653s.com| www.vm36.com-查彩票中奖号码| www.110703.com-3d新彩网首页| www.592365.cc-彩票一等奖有多少钱| www.6655.loan-上海快三跨度怎么看| www.303382.com-七彩网彩票官方网站| www.cp7358.com-北京快三技巧| www.306908.com-福利彩票今年几号买| www.389768.com-石龙彩票店-| www.519457.cc-2018网售彩票| www.592810.com-彩虹直播序列号| www.753137.com-中彩吧2020黑网| www.854874.com-极速快三怎样| www.918232.com-网络彩票危害| 体彩网www.aa3890.com| www.319331.com-福建快3爱乐彩| www.117753.com-竞彩足球比500| www.cp000.com-江西福利彩票网| www.b69.net-浙江省福彩中心官网| www.138780.com-下载鸿彩-| www.72208.com-福彩3d笨笨大花猫| www.803717.com-百宝彩票可靠吗| www.911408.com-吉林快三推荐| www.971749.com-创彩网平台是真的吗| www.144984.com-福彩3d必出码绝招| www.n59.cc-加拿大彩票大奖号码| www.369860.com-云彩店哪里下载| www.524560.com-3分快三破解版下载| www.617196.com-彩票中奖到哪里兑换| www.307791.com-福利彩票时时彩| www.603137.com-58购彩网-| www.851153.com-香港6万彩开奖结果| www.567129.com-彩票社区数字达人| www.669817.com-超级彩票助手ios| www.751843.com-彩票辅助系统| www.815790.com-昨天彩票是什么意思| www.35vu.com-沈阳和平区体彩中心| www.1856.date-时时彩长期赢钱的人| www.360164.com-黑彩平台搭建| www.38559.cc-爱彩人软件下载| www.96731.com-有钱人会买彩票吗| www.089692.com-体彩销售话术| www.33302.com-廊坊双色彩票中奖| www.80035.com-华亿彩票-| www.031165.com-怎么买vr彩票包赢| www.506503.com-双色球最新彩迷天地| www.606101.com-彩神彩票怎么看走势| www.673883.cc-图书古建彩绘纹样| www.739509.com-重庆时时彩合买跟单| www.799800.com-送彩金白菜qq群| www.873942.com-双色球玩法彩票| www.82ae.com-竞彩历史最大奖| www.6868.com-大玩家彩票天猫兑换| www.644533.com-趣博彩票正规吗| www.795200.com-彩鸿彩票是真的假的| www.872626.com-哪个彩票好玩中奖高| www.651888.com-彩票收入-| www.808744.com-博众重庆时时彩软件| www.888565.com-安装网易彩票软件| www.948852.com-广东体育彩11选5| www.989415.com-快三有复式吗| www.dd34.com-41亿彩票-| www.uw00.com-大发系统的彩票平台| www.5ow.cc-安徽快三出来多久了| www.52qu.com-秒速赛车彩票网站| www.0471.cn-g购彩彩票-| www.189708.com-福彩3d开机试号| www.sh49.com-老彩票app-| www.846306.com-体育竞彩资讯| www.dn2.com-江苏快三开奖纟结果| www.tt22.cc-网上刷彩票-| www.yw27.com-吉林彩票主任| www.637938.com-彩票公益金绩效| www.716464.com-彩铅星空画-| www.777352.com-e球彩中奖助手| www.850292.com-竞彩足彩6串1算法| www.927990.com-二分快三在线计划| www.394133.com-极速时时彩开奖视频| www.503912.com-体彩18130期| www.583527.com-公益彩票下载安装| www.654069.com-菲律宾1.5彩票| www.587973.com-a3彩色复印打印机| www.126372.com-二分彩属于什么彩| www.568120.com-中彩网站-| www.89209.com-意彩平台-| www.077995.com-玩彩乐客户端| www.507153.com-非凡彩瓦-| www.663144.com-凤凰彩票网怎么登录| www.768628.com-彩票网站的搭建| www.872063.com-彩票双色球查询| www.980983.com-七彩的寓意-| www.ra51.com-35彩票网-| www.76jl.com-彩经网七乐彩开机号| www.366663.cc-甘肃省体彩官方网站| www.616210.com-足彩的最佳买法| www.57hi.com-体彩今年何时开奖| www.826768.com-银川体彩-| www.70021.com-十一运夺金彩乐乐| www.6990.vip-各种彩票-| www.823993.com-体彩竞技500| www.217221.com-彩客彩票老版| www.cai958.com-湖北福彩快三走势| www.736904.com-上海福利彩票站点| www.831070.com-577彩票计划网| www.944598.com-百万彩票平台官网| www.111103.com-3d新彩网藏机图| www.100520.cc-乐彩客手机-| www.093968.com-合法的高频彩票| www.7224.vip-七乐彩技巧大全| www.155481.com-福利彩票分析中奖| www.027315.com-k彩有几年的历史了| www.0532.org-买彩票真的能中奖吗|