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.208444.com-浙江快乐彩票开奖| www.ty97.com-彩票里面所谓的长龙| www.210668.cc-快三代理平台| www.366848.com-天下彩网彩票资讯网| www.y11.cc-排列三乐彩字谜图| www.89zs.com-彩娱乐官方平台| www.5136.vip-买彩票时间段| www.49012.com-福利彩票中奖人| www.106226.com-多盈彩票苹果版| www.43777.cc-贵州省体彩大选五| www.036397.com-彩票33安卓-| www.199736.com-河南福彩22大河| www.78.win-香港六给彩开奖结果| www.391.tv-赢彩专家官网手机版| www.874858.com-竞彩推荐微信群| www.445777.com-篮球竞彩网比分直播| www.095883.com-微信哪里可以买彩票| www.182186.com-江苏福彩快三手机版| www.153878.com-快三9手必中| www.836911.com-江苏彩礼多少钱| www.i40.hk-下面彩票开奖大全| www.0995.site-高频快彩是什么| www.13552.com-胜负彩中奖计算器| www.73281.com-360福彩3d过滤| www.098899.com-快三遗漏数据江苏| www.191234.com-上海快三兑奖规则| www.272160.com-中国体育彩票开将| www.351783.com-中国体彩怎么买| www.439011.com-千里马团队阳光彩票| www.86pw.com-地方福彩官网| www.7341.shop-彩虹6号直播| www.41266.com-幸福彩手机报| www.968149.com-开户送体彩金88| www.219610.com-彩吧图库第四版| www.326965.com-鸿发彩票网址| www.388227.com-白银彩票电话| www.768792.com-天猫彩票是什么东西| www.846012.com-博纳彩票是骗子吗| www.176877.com-彩票导师靠谱吗| www.261662.com-时时彩后三胆码技巧| www.365771.cc-上海七乐彩开奖号码| www.474474.com-极速时时彩是骗局吗| www.553251.com-竞彩高手晒单| www.619000.com-信誉最好的搏彩平台| www.708311.com-正规qq时时彩群| www.778706.com-人人中彩票093| www.849494.com-体育福彩开奖号码| www.907616.com-七乐彩必出公式| www.966801.com-竞彩足球兑奖有效期| 大赢家彩票平台www.186972.com| www.607965.com-云南福彩中心| www.686846.com-中彩那天板书| www.764802.com-充值送彩金天天送| www.868398.com-七星彩第六位杀号| www.968410.com-澳洲时时彩开奖| www.bg25.com-黑彩票网站排名| www.xj07.cc-唯彩会彩票下载安装| www.460097.com-炫彩皮肤购买地址| www.06790.com-复式彩票如何算中奖| www.co57.com-浙江快三开奖| www.yq21.com-吉林省体彩中心位置| www.o09.com-体彩三句话试机号| www.170.red-时时彩预测ios| www.865528.com-腾讯时时彩彩票| www.236511.com-旺旺彩票合法吗| www.169122.com-快三一定牛-| www.666843.com-福乐彩票欺骗| www.1cn.com-彩票赢钱秘诀与技巧| www.94ud.com-捷报网足彩亚盘推荐| www.970914.com-彩票真能中奖| www.gx39.com-百盈快三邀请码| www.98817.cc-快三杀号的计算器| www.002357.com-福少时时彩-| www.85095.com-中国福利彩票点| www.082051.com-广州彩色纸箱印刷厂| www.44878.com-快三彩乐乐-| www.30433.com-体彩预测总汇| www.69773.cc-我爱彩票下载安装| www.032860.com-710彩票网站| www.519499.com-天天福彩是陷阱吗| www.70822.com-下期福彩预测| www.064377.com-黑客攻击黑彩网事件| www.153896.com-体彩排列五玩法说明| www.265367.cc-双彩网app-| www.206410.com-福彩快3软件有哪些| www.06529.com-盈佳彩票网址| www.1881.red-中彩彩票快3网址| www.669874.com-什么彩票4位数| www.757695.com-福利彩票讨论| www.821244.com-十分彩网app| www.957182.com-时时彩挂机软件苹果| 500彩票www.50054j.com| www.6984.xyz-中国体彩足彩玩法| www.332805.com-彩票直播频道| www.1243.xyz-星宇购彩怎么玩| www.185628.com-pc福彩是什么意思| www.690106.com-中彩网美媒体擂台赛| www.183958.com-河北体育彩票| www.338762.com-购采大厅网上买彩票| www.412372.com-玩彩票怎么做好计划| www.509196.com-新利彩票网注册| www.067477.com-体彩打印机出故障| www.174511.com-河北快三走势图新版| www.190629.com-体彩快三开奖结果| www.477474.com-3d福彩排例五| PK彩票www.www.23040.com| www.vl71.com-辽宁快三开奖查询| www.12ok.com-i8彩票在线平台| www.223840.com-竞彩比分网-| www.849880.com-体彩试机号码是| www.pp40.com-哈尔滨逸彩快三| www.67.link-下载福彩三地试机号| www.329321.com-梦到彩票中二等奖| www.872490.com-福建省福彩官方网站| www.952297.com-马来分分彩开奖直播| 500彩票www.155301.com| www.p63.com-网络彩票不能提现| www.12328.com-955彩票官网| www.90260.com-七彩图片大全| www.049980.com-福彩3d开奖号结果| www.366577.com-爱好48色彩铅色卡| www.456831.com-体彩排三图迷| www.560971.com-爱投彩票下载安装| www.621827.com-海南七星彩头尾合| www.677518.com-海口彩钢板围挡价格| www.736981.com-购彩群骗局揭秘| www.796420.com-吉祥彩票网是怎么玩| www.858726.com-黑龙江浩彩快三| www.909497.com-福利彩3d资料| www.961859.com-彩吧网更懂彩民| 天天彩票www.1035d.com| www.139811.com-合法足彩app| www.17575.cc-两姐妹买彩票被骗| www.81qd.com-竞彩网比分直播即时| www.2464.win-福彩3d字谜双彩论| www.8359.xyz-海南七星彩小精英版| www.31585.cc-麒麟竞彩下载链接| www.857865.com-今晚福彩3d开| www.960629.com-933彩票软件下载| www.cp6318.com-在手机买彩票平台| www.8270.cc-台州福彩官方网| www.27862.cc-3cp上彩票官方| www.63697.cc-沈阳快三彩票| www.015344.com-聚丰彩票-| www.382098.com-男子借钱买彩票| www.da51.com-快三属于彩票吗| www.3rp.com-彩票和股票哪个好做| www.377488.com-因为彩礼钱而分手| www.500955.com-希腊十分彩票| www.570172.com-时时彩复式计划网| www.628620.com-江西十一选五彩经网| www.720345.com-山东体育彩票网| www.789642.com-职业竞彩人心得| www.882403.com-易彩堂彩票是真的吗| www.966700.com-五分彩的软件| 凤凰彩票www.88266k.com| www.651002.com-创意水彩风景画| www.810275.com-彩票走势图显示屏| www.888157.com-假彩票站-| www.971411.com-高频彩票设计原理| www.ue95.com-内蒙快三查询| www.730995.com-怎样利用福彩店赚钱| www.794944.com-重庆时时彩牛牛计划| www.855897.com-七乐彩中六位多少钱|