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.108577.com-买彩票可以致富吗| www.xc3.com-青海福利彩票快三| www.356838.cc-彩票应该怎么看| www.14fp.com-福彩几个号码算中奖| www.43430.cc-彩票3d开奖查询| www.0404.cn-重庆五分彩怎么玩| www.589998.com-福彩3d进宝图| www.738336.com-彩票利用平均值选号| www.924906.com-买彩票好吗-| www.69dj.cc-彩票网网站怎么开户| www.2958.wang-福彩3d杀码图专区| www.69nu.com-区块链彩票深圳福彩| www.7700.cm-特彩吧齐中网论坛| www.008595.com-新浪彩票排列玩法| www.730508.com-天天竞彩官网首页| www.445629.com-彩票平台搭建教学| www.616464.com-双彩网体彩三句话| www.718352.com-强力巨彩彩票| www.848239.com-山西吕梁彩礼| www.934522.com-彩票动物总动员玩法| 500彩票www.346077.com| www.792556.com-查彩票开奖情况| www.908644.com-彩票试玩平台网址| www.996872.com-七星彩开奖机选| www.ll50.com-彩票22app-| www.569890.com-福彩快开调整| www.669618.com-海南私彩下期走势图| www.837099.com-体彩一定牛下载| www.932012.com-卖福利彩票怎么提成| 发彩www.50732h.com| www.09005.com-广东省体彩中心官网| www.48281.com-算局七星彩奖表划规| www.0078.org-福彩投注站好申请吗| www.19577.cc-中回竞彩网-| www.539028.com-5分钟新3d彩票| www.961762.com-福彩了3d计划软件| www.lh0.com-体彩快3选号技巧| www.qi67.com-找广东彩王-| www.416.tv-蚂蚁彩票app| www.04854.com-快三选号助手app| www.110956.com-玩彩网彩票登录网址| www.633340.com-手上买彩票这么买| www.543432.com-云乐彩票网站骗充值| www.23103.com-福彩三d走势图彩经| www.755092.com-中彩网北斗今日预| www.907025.com-体育彩票7位数| www.985852.com-福彩3d今天预测| www.lu78.cc-大中华彩票彩种| www.xx14.com-吉祥彩票网页| www.406452.com-微信彩票竞猜没有了| www.82933.com-新快赢481彩票| www.807.me-热门彩票开奖网站| www.8203.cc-辉煌彩票在线| www.929578.com-彩16app-| www.704270.com-手机福彩快三的讲解| www.78068.cc-500彩客服-| www.3805.cm-福彩预测号-| www.516716.com-色彩闻一多-| www.683082.com-彩票o2o模式风险| www.772962.com-彩吧助手app下载| www.857961.com-天下无敌版彩吧图库| www.927106.com-a23彩票网注册| www.993379.com-足彩2串1全包图| www.077909.com-福彩平台跟计划赚钱| www.66jp.com-大庄家彩票骗人的吗| www.5445.me-彩票站利润几个点| www.34527.com-福彩3b字谜总会| www.261311.com-凤凰vip彩票网| www.206404.com-利彩下载安装| www.311869.com-甘肃彩票查询结果| www.558582.com-玩时时彩合法吗| www.488478.com-公益彩票网可靠吗| www.737275.com-今日七彩奖开奖结果| www.582207.com-燕赵风采福利彩票| www.544300.com-黑彩代理怎么返点| www.626571.com-下载彩民之家app| www.537392.com-彩票旗舰网合买中心| www.671071.com-排三杀码凤彩网| www.502451.com-七星彩口诀之王| www.478213.com-综艺集团福彩| www.16692.cc-168彩栗-| www.017691.com-易彩票软件下载| www.804981.com-篮彩比分加时算吗| www.926464.com-手机上买彩票安全吗| www.987822.com-新浪彩票图表中心| www.vi.cc-微信买彩票-| www.6868.cn-大玩家彩票什么用| www.271884.com-中原彩票网-| www.160233.com-968彩票官网| www.5566.org-彩票每日首存上| www.506648.com-时时彩8码怎么赚钱| www.588376.com-五子彩球在线玩| www.675917.com-排五走势图彩宝网| www.767851.com-河北快三和值号码推| www.858597.com-竞彩二串一稳赚技巧| www.963471.com-简单彩铅画图片大全| www.dp68.com-118彩票真黑| www.xr35.com-赔率高的彩票平台| www.67ew.com-七乐彩历史开奖查询| www.213392.com-什么是幸运快三| www.137842.com-福彩3d直选机选| www.014776.com-7星彩中奖查询结果| www.244.net-时时彩五星复式5码| www.979828.com-恒大彩票网站| www.ic6.cc-快三中了两个号码| www.594370.com-七彩汇游戏下载| www.6969.site-彩天下恒泰-| www.899225.com-神彩通免费版| www.991198.com-cc彩票网-| www.039986.com-多盈彩票网手机版| www.119331.com-代玩快三兼职| www.804235.com-网上购买体彩| www.934087.com-台湾即时开彩下载| www.999946.com-在香港买彩票| www.ka89.com-彩票软件如何破解| www.5zi.com-龍之彩下载-| www.905707.com-快三有哪种规律| www.2uv.com-999彩票能玩吗| www.387728.com-赛果及派彩结果| www.179701.com-彩铅画-| www.277564.com-中福彩票属于诈骗| www.365274.cc-tt彩票靠谱吗| www.639352.com-天猫小店彩票| www.729543.com-江苏体彩和值2元网| www.816404.com-快三中了是多少钱| www.901939.com-快开彩票玩法| www.971156.com-体彩开奖公告七星彩| www.cp9.shop-福彩5d玩法-| www.3964.cc-中彩堂富甲1| www.540470.com-彩票预测有成功的吗| www.756512.com-如何看彩票票样密码| www.824525.com-我怎么买彩票| www.865561.com-福利彩票加盟多少钱| www.106114.com-安微快三形态走势| www.373448.com-鼎盛彩票网站| www.979130.com-七星彩彩经网| www.cp662.com-快三app哪个好用| www.099518.com-福彩777-| www.623018.com-七星彩网站投注| www.242241.com-168彩票正版| www.301745.com-上海快三官方版| www.358369.com-南京福彩3d中奖| www.417851.com-盛大国际彩票输死| www.4400.net-快三和值奖金| www.31621.cc-麒麟彩app-| www.184288.com-彩票怎么玩-| www.255801.com-燕赵福利彩票| www.11010.com-澳客网彩票触屏版| www.003554.com-彩之源官网-| www.5197.biz-体彩彩票开奖查询| www.269844.com-盈彩平台-| www.320009.com-福彩三d字迷东方朔| www.581567.com-福利彩往期开奖记录| www.37157.cc-i8彩票下载-| www.777808.com-爱乐透彩票新版网址| www.853296.com-黄鹤楼大彩真假| www.898466.com-微信彩票帮手扫一扫| www.956140.com-速盈彩票合法吗| 致富彩票www.zfcp3.com| www.662369.com-买篮彩大小分技巧| www.718293.com-2015彩库宝典| www.785645.com-49选7彩票统计器| www.836542.com-好彩1杀号方法| www.884432.com-五行绝算彩票|