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天

知道了
彩39彩票安卓 www.111576.com-1515彩票-| www.9821.org-3月28号的彩票| www.185154.com-快三是什么意思吗| www.327591.com-湖北省快三开奖查询| www.730654.com-竞彩足球胜负彩预测| www.819483.com-买了彩票怎么查看| www.944568.com-上海彩票店利润| www.cp1.com-七彩奖开奖结果查询| www.si42.com-福彩3d出号规律表| www.01zr.com-关于彩虹的说说| www.pr39.com-933彩票官网下载| www.7487.cm-上海福利彩票店| www.506166.com-彩票黑客论坛| www.111826.com-高德彩票靠谱吗| www.699844.com-福彩今天开奖公告| www.814933.com-球彩怎么买-| www.905939.com-嬴彩天下720| www.973834.com-模拟彩票投注技巧| eight:28px}@mediaonly体彩快3走势图screenand(max| www.773758.com-福到彩票双色球开奖| www.970491.com-燕赵福彩排列期开奖| www.cp0991.com-大发快三大小技巧| www.947291.com-彩票怎么查询开奖| www.41644.com-彩神彩票平台| www.mr84.com-河北快三中了多少钱| www.341848.com-体育彩票有中奖的吗| www.567951.com-迅赢彩票-| www.pz21.com-彩9下载安装| www.193.live-零基础学彩铅画入门| www.477947.com-银行积分兑彩票| www.88ab.com-福彩天中图库首页| www.9790.biz-彩票太难中-| www.67jw.com-太原体彩销售点| www.9577.club-今日福彩谜语| www.199100.com-湖北快三一天几期| www.483155.com-吉林快三微信群吧| www.952476.com-彩票验奖app| www.dw2.cc-重庆时时彩最新规定| www.y96.top-福彩61中奖规则| www.62pj.cc-彩票中奖税费多少| www.1952.live-福彩3d预测詹天佑| www.661668.cc-红旗彩票怎么下注| www.918252.com-苹果能玩的彩票软件| www.994446.com-非法经营彩票罪分析| www.46027.com-时时彩宝典app| www.916.cm-昆明彩票机怎么申请| www.562197.com-中彩啦软件下载| www.650619.com-玩彩虹伞音乐| www.730802.com-彩票走势网页首页| www.763356.com-足球彩票网怎么选择| www.949660.com-互联网彩票何时解禁| www.hs48.com-足彩北单比分| www.22rm.com-彩票假新闻-| www.62390.com-极速彩票技巧| www.751422.com-彩票站最高邀请码| www.930190.com-竞彩篮球彩票的玩法| www.cd68.com-吉林省福彩快三走势| www.139942.com-彩16安卓版-| www.78394.com-wps做彩票走势图| www.088524.com-多玩彩票快三| www.119509.com-彩61破解-| www.3662.xyz-彩票开奖七乐彩查询| www.149554.com-副利彩票开奖办法| www.238830.com-套彩金犯法吗| www.313592.com-安徽快三走势下载| 中国福利彩票www.08588c.com| www.274725.com-五分快三的玩法| www.355814.com-欧洲彩票税率是多少| www.439213.com-彩圣网免费资料大全| www.525691.com-体彩网上兑奖| www.588799.cc-汇彩网快三-| www.654910.com-帮朋友买重庆时时彩| www.vo85.com-江苏快三走势图预测| www.819140.com-打彩票工资-| www.878639.com-被幸运彩骗了怎么办| www.947060.com-全国高频彩票有哪些| www.996715.com-彩票站app官方网| www.ka0.com-福彩42期中奖号码| www.656635.com-彩票机转让-| www.no78.com-福彩兑奖流程| www.687605.com-武汉福彩作假| www.863388.com-哪种彩票中奖率最高| www.876255.com-彩票大神跟单| www.945130.com-体彩阿四提供| www.21pf.com-福利彩票中不了| www.259.in-中国彩安全吗| www.026932.com-倍投彩票-| www.kd19.com-福彩站有快三彩票吗| www.975860.com-驻马店娶媳妇彩礼| www.820008.com-在小镇开彩票店| www.971276.com-彩票投注有啥规律吗| www.11vp.com-7号彩票平台怎么样| www.434443.com-体彩中心公告| www.560111.cc-体育彩票足彩怎么买| www.640072.com-体彩大乐透在哪兑奖| www.737132.com-中国体彩大乐透安装| www.811041.com-彩云易散-| www.885057.com-955彩票app-| www.953159.com-用手机买彩票安全吗| www.999688.cc-100彩票网-| www.ot08.com-手机购彩下载安装| www.021793.com-258竞彩网手机版| www.22532.cc-东北娶媳妇彩礼| www.zh37.com-快三独胆计算公式| www.gm60.com-河南快三必中技巧| www.135303.com-快三在线预测| 500彩票www.501354.com| www.0584.org-彩吧图谜4-| www.163308.com-腾讯十分彩开奖软件| www.947899.com-金山彩票下载安装| www.cai1232.com福彩快3官网| www.202597.com-贵州福利彩票双色球| www.wa83.com-好123彩票-| www.352270.com-网易彩票提现流水| www.k64.me-上海快三安卓版下载| www.780006.com-彩铅手绘星空| www.971290.com-定胆彩票分析基础| www.42sn.com-彩票怎么玩视频| www.560775.com-彩票今期开奖结果| www.662754.com-中金计划彩票| www.786119.com-排三彩凤网-| www.937337.com-彩福大厦为什么便宜| 福彩网www.60007v.com| www.qz13.com-也买彩下载-| www.28gn.com-网络彩票还能开售吗| www.836258.com-丰彩app-| www.933673.com-分分钟彩票正规吗| www.984479.com-爱乐彩官方网站| www.67vt.com-彩钢夹芯板安装视频| www.0751.site-幸运28彩开奖号码| www.7144.com-顾乡凯德七彩影城| www.38113.com-购彩好平台-| www.74609.com-中超竞彩足球| www.120725.com-下载体彩481| www.192994.com-天津福彩-| www.136389.com-正版福利彩票一定牛| www.16364.com-彩神lx1011| www.em13.com-体彩大乐透走势图表| www.0su.com-彩客彩票4.7版本| www.122616.com-彩神512i喷绘机| www.277197.com-1赔1的彩票-| www.5ki.com-溧阳彩票站转让| www.259627.com-广西福彩软件| www.699294.cc-中国福利彩票大乐透| www.99go.com-今日竟彩结果| www.017832.com-怎样购买双色球彩票| www.5ca.com-大彩网董事长黄孟杰| www.188666.com-内蒙古彩票快三| www.66856.com-彩票兑奖必须凭票吗| www.mk95.com-北京快三-| www.688172.com-短信购彩-| www.588549.com-六安福彩中心地址| www.666676.cc-和乐彩票平台合法吗| www.487055.com-足彩拉力歧化指数| 六冠彩票www.liuguan000.com| www.9353.loan-国际福彩是什么| www.401369.com-百万彩票是什么平台| www.419007.com-彩票网赚平台靠谱吗| www.73525.cc-彩票代购平台合法吗| www.019582.com-下载山西体育彩票| www.098797.com-购买彩票的软件| www.143714.com-竟彩足球360| www.227871.com-福彩网下载-| www.192666.com-体彩11选5app|