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天

知道了
亚洲28 www.200878.com-一定牛彩票网手机版| www.358210.com-老彩票下载手机版| www.501518.com-网昜彩票-| www.585953.com-现金彩票靠谱吗| www.669510.com-彩凤双飞的的意思| www.761778.com-山东省彩票兑奖地址| www.943317.com-重庆彩票网官网彩| 亿彩堂www.87668f.com| www.iw17.com-彩票大赢家官方软件| www.l98.shop-七乐彩票网是真是假| www.57uj.com-22598彩票-| www.1103.tv-时时彩怎么判断长龙| www.09339.cc-广东彩票手机客户端| www.61172.cc-wj万家彩票-| www.037589.com-河北快三和值迷谜| www.134712.com-快三回血贴吧| www.226763.com-彩20app-| www.313925.com-彩吧彩报-| www.396626.com-安装多彩宝-| www.566812.com-体育彩票单式票玩法| www.654273.com-江西省彩票管理中心| www.769877.com-好彩138-| www.858448.com-彩票信用玩法| www.939263.com-多彩网彩票官网| www.992024.com-彩票全天计划记录| www.ws1.cc-甘肃快三明天预测号| www.ty64.com-彩票平台怎么刷流水| www.15le.com-明星彩票app网址| www.701.cn-官网时时彩助赢计划| www.5408.me-儿童简单彩铅画图片| www.16020.com-中国福利彩票彩吧图| www.65639.com-彩票随机模拟器| www.067628.com-宏图娱乐彩票骗局| www.141200.com-m5彩票平台登录| www.225854.com-刷彩金-| www.309158.com-微信买彩票群| www.388146.com-北京回华彩置集团| www.565783.com-河南帝彩快3真假| www.648268.com-新的彩网-| www.755468.com-彩友会官网-| www.837164.com-乐彩33平台众飞| www.902233.com-福彩3d黑彩-| www.971460.com-彩九怎么下载| www.hf13.com-一网彩票下载| www.c78.com-利博彩票app| www.40kd.com-重庆时时彩注册代理| www.1519.com-中国体育彩网排列五| www.8735.com-台湾六福彩总站直播| www.45616.com-中华彩票网兼职| www.95781.com-公益福彩大爱| www.065483.com-信阳合买彩票| www.178577.com-五分快三计划软件| www.265915.com-宁夏福彩中心在哪| www.376058.com-双彩论坛3d字迷区| www.561257.com-下一期体彩预测码| www.639298.com-竞彩网点怎么盈利| www.746039.com-彩神pk10破解版| www.825639.com-购买私人彩票| www.900240.com-快三最长龙多少期| www.972062.com-体彩排五走势图| www.bq56.com-人人快三app下载| www.uh13.com-福彩360安全购彩| www.11wx.cc-新粤彩每期报纸| www.86lg.com-彩票2元网排5| www.2473.vip-福利彩票开设费用| www.8543.vip-福彩大厅游戏机| www.66991.cc-福彩销售点-| www.027130.com-078彩票登录| www.107938.com-2018彩票站前景| www.182527.com-北京快三计划| www.258973.com-福彩3地图迷汇总| www.334813.com-福彩3d彩500| www.418896.com-广西十分彩快乐十分| www.524996.com-乐透型彩票指标算法| www.673318.com-古建彩画图案| www.753849.com-金利彩票是骗人的| www.860088.com-5050彩票下载| www.926329.com-江西体彩官网app| www.984720.com-福利彩8软件| www.db75.com-彩票坐庄一定赢钱吗| www.vy31.com-青海快三奖金| www.15as.com-嬴彩天下与你同行| www.503.tv-江苏快三过年停几天| www.4405.cc-彩票计划9cb下| www.9882.cc-汇丰彩票手机app| www.66691.cc-福彩3d助手合集| www.027764.com-80彩票平台正规吗| www.107041.com-澳洲五分彩官方开奖| www.179029.com-安装安徽快三彩票网| www.254474.com-安徵快三时时彩| www.328688.com-新版的精英彩票| www.400506.com-亿彩堂干嘛的| www.576407.com-彩霸王资料-| www.650301.com-水彩画花朵-| www.752366.com-福彩3d杀码村| www.839518.com-胜负彩14场走势图| www.910052.com-tt快三直播走势图| www.972642.com-彩铅画景图片| www.ky8.com-山东体彩扑克3| www.qh70.com-好彩香烟有几种| www.06qw.com-吉林快三不输方法| www.77hb.com-时时彩第72位| www.1686.cc-下载中彩娱乐网| www.9677.online福彩三弟独胆预测| www.51322.com-彩票站转让合法| www.92991.com-彩经双色球杀号专家| www.054242.com-yy彩票注册链接| www.222281.com-赌彩票输了4万| www.297960.com-彩票图片-| www.366752.com-多赢吉林快三手机| www.459633.com-彩票2019新规则| www.545144.com-武汉福彩店转让信息| www.670097.com-南国彩票开心论坛| www.742548.com-掌聊彩票怎么样| www.815083.com-山东体彩手机版官网| www.885989.com-中国体彩app中奖| www.983684.com-快三站-| www.ag5.com-网易新快三黑庄赌博| www.oa59.com-98彩票怎样-| www.4gc.cc-湖北快三技巧| www.58nw.com-彩票趣闻-| www.0152.vip-彩9彩票邀请码| www.18698.cc-永盛彩票网-| www.58799.cc-楚天福彩30选5| www.021801.com-快钱彩票app| www.088059.com-双赢彩票导师是托| www.154786.com-足彩任九奖金最高| www.262002.com-卓易彩票以前版本| www.348605.com-搜索乐彩网| www.421907.com-博友彩有规律吗| www.519044.com-神马彩票预测| www.584783.com-47彩票-| www.654416.com-南昌彩票店合作| www.777449.com-皇冠彩票是真的吗| www.861162.com-福彩三d字谜解释| www.921608.com-福利彩票有假吗| www.975377.com-外国数字彩票破解术| www.ih2.com-快乐彩-| www.ni67.com-极速快三走势图今天| www.x36.cc-时时彩一条龙| www.50ah.com-福彩字谜图谜查询| www.789.mobi-海南彩票规律直播室| www.4555.vip-七星彩历史中奖记录| www.9536.biz-海南彩票网彩版下载| www.73319.com-掌中彩官方投注| www.022549.com-省份快三是什么彩票| www.088941.com-分分快三中奖号码| www.150813.com-彩票818app-| www.266180.com-河北福彩排列期开奖| www.347387.com-流文溢彩优美散文| www.420262.com-彩票投资盈利| www.512796.com-王者彩票wz478| www.576549.com-正规手机彩票app| www.645683.com-珐琅彩工艺-| www.769731.com-好彩香烟绿色宝珠| www.848915.com-万彩吧彩票开奖| www.906213.com-有彩色复印吗| www.964341.com-足球彩票网比分直播| 万利www.32123i.com| www.di19.com-福彩作假-| www.sv73.com-七星彩怎样领奖| www.19td.com-推荐几个购彩软件| www.96py.com-有没有玩彩票的群| www.2605.com-体彩十一运夺金规则|