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.123574.com-天天乐彩输的荡产| www.7402.vip-色彩搭配的技巧包括| www.515999.cc-胜负彩是不是骗局| www.p26.bid-体彩大乐透中奖公式| www.5298.cm-时时彩如何买龙虎和| www.33202.cc-彩票天下网站| www.202095.com-贵州省体彩兑奖中心| www.199657.com-时时彩票下载安装| www.542518.com-彩票大乐透中奖条件| www.664545.com-赢钱彩平台靠谱吗| www.344459.com-3福彩开奖直播| www.472133.com-财神彩票平台官网| www.589128.com-南围彩票论坛| www.680244.com-中国体彩软件| www.bb42.com-大发快三能挣钱吗| www.yv76.com-今期挂牌正版彩图| www.31356.com-买彩票那个软件靠谱| www.204671.com-今晚福体彩开奖结果| www.917199.com-88彩票是真是假| 818合彩www.www.9889hc.com| www.pq39.com-鸿彩官网-| www.28kb.com-天禧彩票网官方网站| www.283.website民权彩礼多少钱| www.4568.in-孕期35期七乐彩| www.13di.cc-好彩双爆葡萄| www.297873.com-七星彩预测今日| 博友彩www.985175.com| www.32zm.com-随时赚彩票打不开了| www.3326.cm-彩色装饰画图片| www.29872.com-福彩3d五行图用法| www.110165.com-极速时时彩是真是假| www.284909.com-靠谱的彩票软件网站| www.693655.com-博大彩票欢迎您| www.878824.com-江西快3彩票下载| www.994486.com-彩票五百万税后多少| www.wn12.com-福彩3d快三-| www.92wi.com-支付宝购物送彩| www.8924.net-天美彩票聊天室| www.76922.cc-彩金神龙游戏机程序| www.19pb.com-彩票中1万交锐吗| www.0468.xyz-彩票比分-| www.560793.com-彩票大师网3d杀码| www.3459.vip-双色球指彩票电子报| www.6075.vip-田伟足彩宝能赚钱吗| www.996490.com-彩票软件计划安卓版| www.91ld.cc-彩票单双必胜| www.288856.com-体彩术语大全| www.437377.com-福利彩票5等奖| www.596863.com-福利彩票返还率| www.558140.com-今日彩票手机版下载| www.cai2777.com868彩票-| www.289281.com-5分彩官网-| www.72484.com-福彩开奖杳绚| www.599021.com-福利彩票34期中奖| www.480043.com-体育彩票余额| www.672318.com-全民彩票官方下载| 500彩票www.50051h.com| www.i69.xyz-中彩吧更懂彩民| www.9334.cm-cc彩球网怎么开户| www.4560.vip-黑彩3d玩法说明| www.684672.com-6701彩票网站| www.787927.com-特彩吧app挂牌| www.855026.com-金冠彩票下载安装| www.922899.com-想接手一家彩票站| www.979758.com-一品彩票下载| www.cp810.cc-网上快三能玩吗| www.995843.com-彩票代刷-| www.ol80.com-双色球中彩网走势图| www.61fb.com-大庄家彩票注册| www.781740.com-彩票机多少钱一台| www.931494.com-致富彩票邀请码| 网易彩票www.07163d.com| www.085212.com-玩彩票是否能发财| www.751053.com-彩8ios-| www.877544.com-打开彩票开奖| www.963015.com-体彩绿翡翠9中奖率| www.6036.vip-500足彩网数据| www.26176.cc-雨后彩虹看图写话| www.72136.com-彩猫彩色的猫| www.011413.com-天津时时采彩开奖号| www.055710.com-今日快三出奖号码| www.ec2.cc-江苏快3彩票平台| www.vh.cc-网上买彩票-| www.rk41.com-各种釉彩大瓶价值| www.li0.com-福利彩票快三合法吗| www.pj45.cc-彩票10选3技巧| www.825826.com-宁夏福彩中奖号码| www.920102.com-江苏快三定毒胆| www.976060.com-林州市结婚彩礼| www.cai9595.com查一下福利彩票| www.326138.com-网上购彩票安全吗| www.977127.com-彩礼规定是几万| www.80io.com-北控国彩坑人| www.3823.cn-最准的足彩预测专家| www.9306.cc-打开彩票论坛| www.54141.com-博彩套利方法大全| www.006455.com-七星彩南国论坛了之| www.153633.com-代理广东福彩| www.235838.com-竞彩足球投注| www.323865.com-聚鑫乐彩-| www.426848.com-大成彩票骗局| www.542920.cc-体彩大热透游戏规则| www.363929.com-廊坊卖彩票在哪里| www.95ey.com-口袋彩店最新版本| www.254931.com-彩68下载-| www.193080.com-河南省快三开奖走势| www.741741.com-今天六喝彩开奖结果| www.47729.com-实时彩计划群骗局| www.99510.com-时时彩个位计算方法| www.074062.com-彩票平台代理犯法吗| www.0260.loan-彩票电视开奖直播| www.5370.pw-淘宝彩票合法| www.zw75.com-广西福彩选号器下载| 乐点彩票www.876488.com| www.1828.online阳光彩民乐探马图| www.202284.com-贵州体彩网联系方式| www.290042.com-福利彩票奖金分配| www.361786.com-东方彩票黑吗| www.456637.com-时时彩斗牛规则| www.632583.com-各种彩票-| www.631159.com-好彩3复式中4| www.44bn.com-高频彩是啥-| www.486.date-体彩票投注站利润| www.154475.com-百胜快三app下载| www.232489.com-足彩奖池-| www.308065.com-江苏福彩十五选五| www.373707.com-好彩香烟黑绿多钱| www.38se.com-19040七星彩| www.11486.com-足彩14开奖-| www.66553.cc-重庆时时彩网址推荐| www.25ch.com-出丧华彩-| www.080360.com-用哪个网买彩票安全| www.853742.com-山东专业玩彩| www.44914.com-彩票负盈利什么意思| www.tf52.com-江西省福彩中心| www.263568.com-福彩种类及规则| www.410072.com-幸运彩票骗局| www.623582.com-福利彩票6等奖| www.166446.com-正规的快三平台| www.iq56.com-宁夏快三开奖走试图| www.44up.com-体育彩票的店怎么开| www.293949.com-浙江福彩6+1| www.375038.com-福利彩票160| www.598331.com-福彩彩票3口| www.662599.com-彩票包赢技术| www.720219.com-幸运七星彩手机投注| www.778212.com-福彩图迷汇总八| www.846409.com-600彩票网站| www.892269.com-彩票榜app-| www.947882.com-现在买彩金的人多吗| www.990059.com-下载彩票缩水专家| www.el54.com-南宁快三走势图| www.yu22.com-釉上彩-| www.150237.com-下载苹果彩票软件| www.209553.com-正规的彩票合买平台| www.71sq.com-周六安徽体彩大乐透| www.012266.com-七星彩2280-| www.123258.com-彩票抓了几个人| www.102220.com-彩神争霸8官网| www.735679.com-互联网彩票开售了吗| www.ma85.com-百盈快三计划网页| www.l96.com-彩票走势图软件下午| www.119065.com-黑龙江福彩网官网| www.8396.vip-福运彩票app下载|