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天

知道了
彩票256平台 www.t60.cc-中国体育彩票新闻| www.776.hk-时时彩买什么挂什么| www.6371.cn-体彩排三定胆杀号码| www.24229.com-乐米彩票改名了吗| www.75678.cc-足彩入门书籍| www.034974.com-百策富论坛彩金| www.232169.com-旺彩奖金计算器| www.316637.com-新浪竞技彩票风暴| www.397026.com-神圣时彩计划官网| www.579268.com-ct彩票大全-| www.662905.com-e球彩技巧出号规律| www.735929.com-体育彩票分析师| www.807157.com-福彩三d天吉网| www.886971.com-被诱骗买彩票亏三万| www.tm14.com-福彩交流群公告| www.13am.com-乐享500万彩票| www.90bh.com-dota2电竞博彩| www.3316.vip-华宇装潢彩票怎么样| www.9440.biz-华人彩票是真的吗| www.73580.com-海南彩怎么玩| www.028960.com-三d体彩试机号| www.111607.com-1305彩票app| www.188385.com-安徽快三大小技巧| www.267511.com-福利彩票筛选器| www.402708.com-七星彩第四杀号| www.518962.com-网络彩票开售时间| www.595567.com-福彩3d千禧-| www.673122.com-七星彩兑奖有效期| www.759531.com-大中华彩票提现成功| www.891526.com-彩票术语怎么解释| www.959652.com-彩票内部计划| 九五彩票www.95555w.com| www.gt59.com-我要买体彩-| www.zo73.com-今日竞彩足球预测| www.31xe.com-绘画彩虹-| www.1325.cn-0365彩票app| www.8270.org-彩票ps-| www.33536.cc-凤彩网双色球字谜| www.81562.com-昨晚福彩开奖号码| www.036695.com-彩票榜平台-| www.160908.com-pk彩票登录-| www.254398.com-好彩投彩票-| www.333019.com-为什么彩票那么难中| www.416323.com-今日足球推荐竞彩网| www.523665.com-华美神器时时彩| www.643499.com-信彩娱乐登录注册| www.733747.com-山西竞彩快三查询| www.811556.com-优的足球彩票| www.885368.com-三宝生活体彩app| www.981873.com-安徽天天福彩站| www.io71.com-最新足彩分析| www.b77.pw-80彩票是否正规| www.33xm.com-七星彩直播网易网| www.0442.net-159彩票ios-| www.7116.xyz-七彩狐泳装集团| www.23566.com-彩票名称-| www.68608.com-竞彩平台快三| www.108679.com-体育彩票应用靠谱吗| www.181309.com-彩票投注app官方| www.256244.com-彩之乐app-| www.331027.com-棋牌彩票怎样刷流水| www.406132.com-甘肃张掖彩虹山形成| www.513215.com-时时彩二星杀号技巧| www.585225.com-快三单双数据分析| www.657815.com-在线预测快三| www.818056.com-海南七星彩头尾网站| www.890217.com-大发快三开奖号码| www.960159.com-菲律宾博彩真实经历| 多宝彩票www.75538a.com| www.fy49.com-福建福利彩票开奖| www.xx88.com-688彩票骗局| www.20ik.com-九彩僵神txt| www.955.pw-七星彩如何找规律| www.6488.net-cp909彩票网| www.16151.com-中国体彩竞彩| www.59551.cc-排列五走势图开门彩| www.033517.com-彩川ひなの番号| www.121076.com-合买彩票群起啥名| www.198059.com-快三所有号码图| www.268903.com-go彩票可靠吗| www.376231.com-玩彩票输钱论坛| www.496760.com-微彩站如何使用| www.567723.com-228彩票网-| www.635971.com-爱资科免费福彩门户| www.734567.cc-风釆和风彩-| www.851045.com-腾讯分分彩精准预测| www.923606.com-私彩做庄集中地区| www.979263.com-和玺彩画-| www.mx81.com-正规的彩票软件网站| www.q86.cc-吉林快三输了千万| www.44oj.com-500彩票网猜大小| www.472.bid-可靠彩票的网投平台| www.4110.biz-甘肃福彩时时彩| www.9217.me-彩票彩之家下载安装| www.69893.com-彩八app苹果版| www.027555.com-重庆五分彩开奖| www.100880.com-天天体彩app| www.163922.com-足彩容错怎么算| www.267848.com-彩票开奖查询彩宝贝| www.352879.com-彩票软件为什么停售| www.431998.com-福利彩票中奖10万| www.522057.com-5亿彩票可靠吗| www.587206.com-福利彩票返奖比例| www.657435.com-时时彩代理被抓判刑| www.783661.com-01cc第一彩票| www.854470.com-福彩3d在线投注| www.914314.com-优信彩神-| www.972463.com-优彩彩票可靠么| www.xl7.cc-快三坑死人-| www.py02.com-帝王彩app-| www.9vf.com-七星彩私彩打法| www.61wz.com-彩票开奖双色球| www.0020.online买彩票中奖窍门| www.7625.xyz-中国竞彩图标| www.21931.cc-刷彩是干嘛的| www.60609.com-双色球彩票开奖查| www.028811.com-合肥福彩兑奖中心| www.100334.com-互联网彩票牌照名单| www.160739.com-三d福利彩票走势| www.262016.com-福彩开奖结果是| www.395721.com-奇门测港彩波色单双| www.511876.com-彩票投注站转让上海| www.576446.com-ok彩票下载地址| www.639473.com-彩运宝体彩店| www.741062.com-125彩票-| www.805703.com-中国合法彩票种类| www.873902.com-贵州快三玩法和开奖| www.963664.com-兰州今天快三走势图| 500彩票网www.65707k.com| www.ds84.com-彩票电视走势图软件| www.tx19.com-彩票网址导航大全| www.8fn.com-彩网乐-| www.56uf.com-附近体彩站离多远| www.741.date-彩合网管家婆| www.4070.in-齐聚彩票app| www.8853.cn-七乐彩中几个数有奖| www.77217.cc-105彩票负面新闻| www.022540.com-吉林快三儿预测| www.086559.com-自助售彩机-| www.141254.com-彩之源下载-| www.208525.com-彩票店竞彩宣传语| www.270195.com-577彩票官网| www.398030.com-七星彩开奖结果图纸| www.515668.com-龙彩娱乐黑钱| www.576616.com-快三的和值表| www.637058.com-谁有时时彩做号软件| www.738208.com-金彩网是坑人的吗| www.800902.com-福彩3d大报-| www.866206.com-彩票投诉电话哪里找| www.921065.com-南方双彩最新版本| www.975957.com-环彩彩票-| www.hi29.com-福彩哪种玩法最简单| www.wt08.cc-人人中彩票打不开| www.04io.com-即时开彩最新| www.63oq.com-彩票平台搭建教学| www.940.bid-澳门6合生肖彩| www.4225.xyz-优乐彩app软件| www.8787.in-腾讯彩票平台登录| www.66394.com-京东如何投彩票| www.018910.com-彩富网最快报码室| www.082305.com-四季彩官方下载| www.135210.com-河南福利彩票新快三| www.199412.com-乐彩太湖字迷网| www.258720.com-竞彩交易量唯彩看球|