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天

知道了
江苏11选5 www.271157.com-8亿彩票下载| www.530040.com-彩票中奖都是主任| www.686870.com-四年级下册中彩那天| www.778529.com-牛彩网杀号-| www.888778.cc-078彩票-| www.977432.com-世界杯彩票中奖规则| www.lo2.com-河北福彩3d试机号| www.ti53.com-彩票助赢软件安卓| www.13fz.com-鑫彩鸿装饰-| www.93qk.com-1寸彩照什么颜色| www.3525.xyz-老虎机送新手彩金| www.9699.wang-彩票实体店行业发展| www.86947.com-云南快三综合走势图| www.053830.com-19051期足彩| www.157586.com-足彩比分四川一| www.255155.com-彩票规律的计算方法| www.337211.com-福利彩票的购买玩法| www.432624.com-如意彩票网官方端口| www.536123.com-彩票位数-| www.660848.com-中国足球竞彩500| www.zv90.com-博彩众什么-| www.36ei.com-万彩网六彩-| www.0155.top-有彩色系有哪些| www.7418.vip-竞彩店址查询| www.38525.cc-88彩票预测-| www.90210.com-恒大彩票赢钱犯法吗| www.059033.com-福彩快三怎样推算| www.185009.com-a3彩票下载-| www.266733.com-河北快三走杀号| www.370388.com-分析时时彩源码| www.480071.com-体育彩票开奖怎么算| www.566645.com-凯发彩票官网| www.640133.com-开奖信息一福彩| www.761647.com-甘肃快三中奖秘诀| www.862815.com-体彩守号中奖故事| www.936287.cc-凤凰彩票网计划| www.998972.com-探探帅哥教你玩彩票| www.aa87.com-时时彩独胆方法大全| www.sy67.com-福彩双色球几位数| www.22dr.com-七星彩彩票-| www.873292.com-中彩网幸运快三| 中彩网www.71233c.com| www.ne01.com-709彩票网官网| www.12xj.com-ig统彩票-| www.95sm.com-香港赢彩网网址| www.33958.com-中囩彩吧更懂彩民| www.021184.com-大乐透彩票开奖号码| www.122284.com-福彩双色球作弊案| www.5956.cn-西安市体彩管理中心| www.50059.com-玩彩网在线-| www.011117.com-彩票投诉电话哪里找| www.097599.com-体彩排列五直播开奖| www.177328.com-幸运快三是哪里的| www.261102.com-竞彩倍投计划表格| www.346943.com-神彩网手机站| www.443885.com-体彩6+1开奖| www.533855.com-福彩三d胆码| www.768959.com-时时彩发展下线| www.889090.cc-彩票网站制作平台| 彩神购彩www.csgc2.com| www.fv13.com-福彩快三帮投兼职| www.752901.com-竞彩2串1赚钱技巧| www.911122.cc-信心彩路线入口| 彩乐园www.cly9.com| www.922395.com-招聘竞彩分析师| www.hq0.cc-爱彩乐app-| www.b91.cn-宁夏快三49下载| www.30jx.com-彩虹代刷官方授权商| www.9802.org-500万体彩走势图| www.69413.com-乐彩28-| www.020246.com-网易彩票在线购买| www.088023.com-新快三必中-| www.164831.com-彩票新闻有多少是真| www.247393.com-上海福利彩票选四| www.325779.com-香港6合彩开奖资料| www.400799.com-彩票怎么看中奖没| www.516824.com-中国福彩授权的平台| www.591005.com-徐州彩票中奖| www.669702.com-手机买彩票哪个正规| www.753849.com-金利彩票是骗人的| www.883412.com-彩票彩金大全| www.947265.com-彩吧首页i-| 吉祥彩票www.jx68.com| www.dt53.com-云发购大发快三下载| www.922832.com-福彩代销证变更| www.983278.com-盈彩是真的假的| www.co64.com-河北快三开奖奖金| www.wj55.com-q彩票是真是假| www.36qw.com-赢百万彩票下载| www.066335.com-一分时时彩是私彩么| www.575836.com-彩票为何停售一小时| www.670501.com-重庆十分彩开奖时间| www.759586.com-168彩票平台| www.z55.in-彩导航彩票平台集合| www.72jw.com-十一选五大彩鲸吧| www.0619.org-长沙福利福彩店| www.273019.com-五分快三全天计划表| www.395675.com-怎么样能中彩票| www.519293.com-开机号近十期家彩网| www.596169.com-福彩天地报下载| www.681339.com-爱买彩票的男人| www.755028.com-手机一定牛买彩票| www.936270.com-彩票彩客app| www.996196.com-彩友会拉人是骗局吗| www.hj33.com-福彩快开自助| www.578371.com-甘肃省11选5体彩| www.699159.com-云南时时彩-| www.772199.com-时时彩任三混合技巧| www.958618.com-七星彩奖池金额查询| 500彩票www.50788k.com| www.go21.com-分分快三投注技巧| www.701414.com-足彩比分结果查询| www.796864.com-举报黑彩有奖励吗| www.896888.cc-买彩票能中大奖真相| www.958444.com-ee彩软件-| 汇丰彩票www.hf0666.com| www.bb85.com-喜乐彩早上几点开机| www.uu93.com-高频彩哪个平台正规| www.01la.com-梦兆七星彩图册| www.62nt.com-河南彩票78人| www.211816.com-快三购彩平台| www.313745.com-慧扑彩-| www.388973.com-福彩35选七-| www.558083.com-江苏福彩抽奖活动| www.8ym.com-传统足彩的返奖率| www.380691.com-福彩是当天开奖吗| www.504005.com-彩排的彩意思| www.572877.com-彩票有几种购买方式| www.633899.com-大福彩票彩种网址| www.695783.com-竞彩m串n-| www.765176.com-黑彩都有哪些玩法| www.855892.com-定位胆是正规彩票吗| www.937788.com-快三胆码速查表| www.984041.com-彩99提现一万| www.ey8.com-重庆时时彩走势图| www.mr49.com-快三哪里可以买到| www.14ep.com-七星彩开奖在哪个台| www.705.cn-王者彩票网会骗人吗| www.5577.cn-d8彩票下-| www.12573.com-体育彩票缩水软件| www.57375.com-下载澳客网竞彩| www.091188.com-福彩排列三直播开奖| www.155884.com-今天安徽快三走势图| www.261042.cc-竞彩足球500彩票| www.318730.com-江西快三昨天走势图| www.375704.com-牛人选体彩排五技巧| www.458844.com-足彩任九贴吧| www.548261.com-彩票快三投注技巧| www.605241.com-网上购彩可以吗| www.662772.com-国彩怎么赚钱| www.720323.com-河北快三开奖走势| www.782342.com-乐和彩票下载安装| www.844505.com-浙江体彩排三论坛| www.896375.com-腾讯分分彩谁开的| www.952534.com-大奖彩票网跑了| www.994167.com-628彩票-| www.cp3382.com-江苏快三是什么彩票| www.lu78.cc-大中华彩票彩种| www.i44.biz-立彩彩票推荐号准吗| www.33sw.com-七星彩昨晚出什么奖| www.835.mobi-五行绝算彩票全文| www.4427.vip-拉萨福利彩票快三| www.9039.cn-体彩有nba-| www.32271.cc-188彩票网站网址|