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.495115.com-济南彩票站转让信息| www.753030.com-中囯彩吧网-| www.869176.com-彩票代理有多大利润| 中彩网www.71233j.com| www.kk83.com-易彩网彩票大厅| www.94uj.com-大佬彩票网址多少| www.5270.vip-福利彩票店上班时间| www.89za.com-百亿彩票巨奖| www.6483.xyz-苏宁易购彩票app| www.9862.biz-亚洲五分彩开奖记录| www.09mr.com-01彩票的计划| www.304218.com-甘11彩控-| www.599571.com-体彩店里怎么买| www.732768.com-河南省洛阳市彩礼| www.861501.com-赢彩助手排3开机号| www.950230.com-百宝彩陕西11选五| 幸运彩票www.675266.com| www.773586.com-时时彩开奖最快软件| www.867832.com-七星彩下期开奖号码| www.966287.com-快三有直播看吗| www.ns89.com-彩票哪里兑奖| www.9hr.cc-网上买体育彩票| www.607715.com-七乐彩尾号走| www.8233.com-足彩今日强胆推荐| www.767799.com-爱乐彩宁夏十一选五| www.3791.net-海南省七星彩图规| www.14855.cc-时时彩大小单双玩法| www.620308.com-竞彩亚盘怎么看| www.763068.com-55彩票三分彩| www.919110.com-大地彩票好不好提现| 购彩网www.04gcw.com| www.466.club-合乐彩票哪个是真的| www.52758.com-好彩棋牌开元| www.400317.com-徐柯福彩3d期推荐| www.507999.com-唐龙福彩近期趋势| www.576146.com-牛蛙彩票资料跑狗版| www.14ay.com-买五分彩走势图| www.673257.com-乐彩双色球静态版| www.342131.com-彩溢开门了吗| www.0447.cc-体育彩票中奖秘诀| www.033222.com-彩站宝app-| www.282291.com-台湾时时彩真不真实| www.557759.com-澳门赌彩大全白菜网| www.325028.com-体彩排列三图谜专区| www.506259.com-彩8提现投注量| www.609152.com-彩票店开门时间| www.695180.com-竞彩足球分析专家| www.779141.com-彩票官方网有哪些| www.863292.com-19035期胜负彩| www.84yr.com-支付宝买彩票合法吗| www.279894.com-五分钟时时彩票开奖| www.954211.com-正规彩票助赢下载| 大玩家彩票www.84499h.com| www.111919.com-淘彩下载-| www.199966.com-甘肃快三遗漏官方| www.c38.top-北京5分彩从哪出的| www.431381.com-福彩3d口袋布衣图| www.644420.com-华亿彩票靠谱吗| www.950159.com-百宝彩怎么申请账号| www.cai960.com-快三倍投必死| www.hs68.com-足球单场体育彩票| www.413896.cc-足彩任九复式计算表| www.083910.com-彩票智博微商城| www.222673.com-大众彩票计划网| www.325724.com-万彩吧c8cn-| www.413889.com-足彩复式最大| www.517526.com-澳门福星彩开奖结果| www.om95.com-3d彩吧助手走势图| www.34909.com-双色球网易彩票| www.95117.com-中国福利彩票中奖号| www.075311.com-瑞彩网是合法网站吗| www.146198.com-中国体育竞猜彩票| www.226462.com-福利彩票的发行者| www.477907.com-积分换福彩-| www.17185.cc-体彩退机申请| www.309052.com-大马4d彩票-| www.mn23.com-幸运彩票害死人| www.521597.com-7星彩怎么中奖| www.9930.top-冮苏快三一定牛| www.cp3456.cc-快三宝典-| www.53442.com-彩虹儿歌歌曲| www.090056.com-彩票聊天话术大全| www.319577.cc-k彩福登录-| www.iy42.com-彩票倍投好不好| www.2239.vip-彩站宝客服-| www.27dv.com-郑州彩票店生意转让| www.005797.com-福彩快三追号计算器| www.250616.com-福彩手机购彩可以吗| www.444155.com-最精准彩票计划| www.662447.com-乐玩彩票提款| www.951249.com-彩票aqq下载| www.cp710.com-快三哪些省份是真的| www.04ou.com-彩铅画儿童肖像书| www.97te.com-彩吧一板-| www.4038.cm-竞彩官方和澳门对比| www.736333.com-搜索彩虹宝宝| www.836269.com-5个数好彩2多少注| www.68615.com-聊城竞彩店-| www.93576.cc-易彩输了钱怎么办| www.077090.com-新彩网字谜-| www.177723.com-江苏快三大小计划网| www.287720.com-全发彩票网址| www.405064.com-儿童彩铅风景画大全| www.525695.com-重庆时时彩倍率说明| www.590586.com-福利彩3d开奖| www.555951.com-彩票试玩游戏平台| www.686873.com-上海大乐透彩票大奖| www.949243.com-湖北快三势图分布图| 玩彩网www.66wcw.com| www.cs76.com-时时彩娱乐注册平台| www.536656.com-风彩3d走势图| www.636384.com-彩虹4无人机实战| www.758739.com-微彩网下载地址| www.789523.com-彩色包装箱厂| www.292907.com-越南时时彩下载| www.579530.com-鸿运彩票在线软件| www.712213.com-13e彩票下载| www.824559.com-3d新浪爱彩-| www.884156.com-快三pk10计划| www.972992.com-彩库宝典开奖现场| www.kc73.com-快三线上第一门户| www.zo63.com-彩票攻略网-| www.18ar.com-反赌吉林快三| www.502537.com-信嘉彩票-| www.570368.com-彩票中奖提现不了| www.654765.com-时时彩分分彩合法吗| www.340131.com-足彩14场澳客網| www.826011.com-赛车彩票网-| www.881097.com-网络彩票黑平台排名| www.9571.cn-彩票太湖字谜画谜| www.276060.com-七乐彩复式价格表| www.980946.com-彩788苹果下载| www.2656.xyz-宝哥说彩福彩| www.7170.wang-星光武彩张星彩| www.070.me-极速时时彩规律| www.7495.cn-彩票柜台-| www.569895.com-彩票顺子什么意思| www.655311.com-彩钢围挡清包工合同| www.774842.com-5亿彩是正规平台吗| www.855003.com-雪园网足彩比分直播| www.918646.com-u9彩票软件-| www.979346.com-亚彩会登录| www.91821.cc-好彩1中奖彩民| www.576918.com-天天红彩票-| www.377231.com-福彩3d奖项设置| www.076998.com-台湾彩票-| www.6726.cm-快三的概率计算公式| www.692757.com-网络推销彩票| www.877174.com-香港彩库宝典图库| www.160922.com-北京福彩联系电话| www.479301.com-竞彩和外围单固对冲| www.834.win-北京彩票销售员招聘| www.7202.vip-a彩娱乐合法吗| www.55aw.com-三和彩-| www.171222.com-快三河北今天开奖| www.137691.com-吉利彩票网靠谱吗| www.912030.com-体彩手机购彩软件| 华彩www.71399h.com| www.202897.com-众彩网专家-| www.963923.com-代投彩票-| 500彩票www.26299.com| www.586644.com-白菜送彩金大全网站| www.719205.com-互联网彩票开售新闻| www.114010.com-体彩天下定制|