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.807019.com-彩票折叠-| www.947301.com-快三口决-| 财神网www.29277q.com| www.in97.com-齐鲁彩票开奖号码| www.i09.cn-彩经网旧板走势图| www.48lq.com-文星彩-| www.0070.vip-福彩3d是国家的吗| www.159466.com-13人彩票分析网| www.272779.com-今日新鲜事彩票3d| www.383318.com-彩票2019034| www.533979.com-7星彩在哪里领奖| www.648840.com-彩宝的种类-| www.761741.com-福彩3d和值谜总汇| www.858134.com-福彩时间开奖时间| www.928553.com-七星彩买法-| www.979476.com-彩金多少钱一克| www.wp54.com-3d智能杀号彩经网| www.19qn.com-更多精彩的鲨鱼是| www.247.net-中国福彩官网网址| www.6573.top-三d中奖彩票图| www.22652.com-七星彩机选五注| www.68608.com-竞彩平台快三| www.063773.com-时时彩娱乐-| www.148476.com-有什么购彩软件| www.237423.com-中国福彩双色球预测| www.951197.com-立彩彩票骗局揭秘| www.cai3233.com安徽快三投注平台| www.sv76.com-大学生玩彩票| www.21sp.com-怎么举报天天中彩票| www.374.mobi-彩票双色球谜底| www.4258.biz-四季发财彩票| www.9866.me-彩票带打群-| www.65593.com-天天中彩吧3d图迷| www.025087.com-爱彩通网站-| www.100065.cc-彩票周周签到| www.169313.com-快三赌博骗局| www.265792.com-快三不倍投-| www.365519.cc-即将开彩-| www.458068.com-双彩票几点开奖时间| www.555480.com-七乐彩三区走势图| www.624001.com-体育彩票排例5| www.695801.com-竞彩7串8-| www.773227.com-澳门时时彩开奖网站| www.904982.com-伯爵彩票官网| www.969206.com-天天中彩票倒闭了吗| www.kq5.com-体育彩票快三走势图| www.pp87.com-爱彩乐彩票网正规吗| www.01vd.com-彩虹简笔画-| www.70ey.com-乐博彩票正规吗| www.0936.me-4场进球彩-| www.8624.loan-百宝彩票电视走势图| www.38935.cc-彩票邀请码有什么用| www.84733.com-广西快三停售| www.035868.com-最牛福彩店广告语| www.138180.com-福彩销售站点查询| www.213208.com-网上凤凰私彩平台| www.283708.com-7星彩2个号有奖吗| www.385658.com-体彩出什么号了今天| www.506714.com-3d久久彩吧-| www.855585.com-釉彩大瓶鉴赏| www.945320.com-双福彩票网-| 幸运众彩www.108067.com| www.hc61.cc-福利彩8的老板是谁| www.xy72.com-体彩官方app停售| www.22xn.com-杭州福彩领奖地址| www.0377.pw-彩票106-| www.6374.vip-北京易顺百顺彩票| www.14006.com-彩客网中国竞彩| www.55386.com-福彩买大小投注网站| www.97471.com-庆阳天价彩礼| www.057525.com-搜索福彩3d胆码| www.178095.com-体育彩票苏州快3| www.247813.com-七天彩是黑彩吗| www.317289.com-广西快三网易彩票| www.385208.com-七星彩下期杀号预测| www.523608.com-福彩七彩乐-| www.614813.com-众乐乐彩票网| www.683652.com-喜盈门彩票登陆| www.758302.com-体彩提成是多少| www.906612.com-彩票团队名字大全集| www.967704.com-手机彩票输了3万| www.hm7.com-湖北体彩新十一| www.oi76.com-体彩19023期| www.2sj.cc-金牛彩票真假| www.56oz.com-新狼彩票网-| www.826.tv-9号彩票骗局揭秘| www.4800.vip-吉林快三的玩法| www.9766.pw-七星彩新旧-| www.69776.cc-易彩乐平台-| www.025232.com-江西快三江西快三| www.095428.com-信誉时时彩平台推荐| www.155009.com-体育彩票足球怎么玩| www.256099.com-安徽快三实时走势图| www.322633.com-竞彩兑奖时间| www.385202.com-南国七星彩经典彩版| www.518258.com-中彩票大奖几率| www.580614.com-彩票提不了现怎么办| www.647406.com-好运来彩票聊天室| www.744682.com-彩之堂app234| www.809861.com-赢彩网是正规的吗| www.875920.com-买彩票会中奖| www.964850.com-海南福彩网-| 彩世界www.99788q.com| www.eq41.com-炫乐彩票被黑十二万| www.tu01.com-快3彩票江苏| www.9ag.com-彩票预测的微信团队| www.60aj.com-玩时时彩输了怎么办| www.852.space-七星彩铁公鸡解梦| www.4308.in-彩票兑奖中心地点| www.9053.vip-中国体育彩票购物站| www.75229.cc-福彩刮刮乐中奖技巧| www.022614.com-快三爱乐彩开奖结果| www.088930.com-找快吉林快三| www.142979.com-彩虹8彩票平台| www.207028.com-七乐彩票平台可靠吗| www.269364.com-掌上七天彩-| www.391422.com-三彩品牌-| www.504722.com-88爱彩邀请码| www.567296.com-江苏福彩六加一开奖| www.631188.com-广东彩票官网客户端| www.690252.com-竞彩足球今日单关| www.758399.com-中彩沦坛-| www.871611.com-福彩3d过滤缩水器| www.931826.com-中彩网贺老师| www.979419.com-铁盒好彩蓝莓双爆| www.ni6.cc-网易彩票手机版| www.mw90.cc-下载人人中彩票软件| www.r21.org-境外黑彩-| www.37re.com-福利彩票3d胆吗| www.892.win-澳门全天彩-| www.4165.net-彩虹六号标准版| www.8701.vip-体彩七星彩大奖| www.44475.cc-西宁体育彩票高频彩| www.82192.com-77彩票提款靠谱吗| www.025025.cc-河南福彩开奖走势图| www.086018.com-幸运星彩票是骗局么| www.137487.com-易彩网官-| www.198790.com-吉林快三38期| www.256538.com-体彩app官方下载| www.313488.com-快三买哪个-| www.376098.com-体彩排5跨度走势图| www.613263.com-网上买彩票被骗过程| www.671990.com-足彩精灵-| www.733903.com-彩票趋势软件安卓| www.792901.com-郑州福彩中心| www.854745.com-广西快三改时间| www.906036.com-国彩网投怎么玩| www.959748.com-怎样下载盈彩网| 金彩网www.jcai5.com| www.oy8.com-19022七星彩| www.mb25.com-江苏快三怎么玩的| www.zr08.com-14胜负彩复式表| www.14eb.com-福彩福利直播间| www.474.in-河南中原福彩网| www.3021.vip-众彩票线路导航| www.7364.net-鑫彩网彩票骗局| www.12947.com-体育彩票大奖得主| www.46614.com-快彩11选五陕西| www.81865.cc-时时彩单号遗漏最大| www.021676.com-江苏快三群-| www.078638.com-全国开奖安全购彩| www.130820.com-福彩3d怎么手机买| www.190176.com-福彩三d开奖结果| www.247605.com-快三守号翻倍公式|