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.160540.com-福彩3d和差推荐| www.8836.bid-重生之彩票专家| www.4642.cn-买彩票输了如何回本| www.89691.com-三月足彩-| www.273844.com-三分快三规则| www.022921.com-牛彩彩票好吗| www.557937.com-海南四码彩票软件| www.815074.com-3d彩吧预测总汇| www.958606.com-今天开七彩-| 盈彩票www.533551.com| www.1314.in-大乐透预测凤彩网| www.306808.com-第一彩票app| www.421250.com-彩票自助领取彩金| www.825546.com-云南申游快三是哪里| www.943401.com-福彩任选五胆拖玩法| 易盈彩票www.7793x.com| www.553787.com-凤凰天机六个彩资料| www.364477.com-足球彩票在微信上买| www.122075.com-英国时时时彩| www.043571.com-什么是七星彩票| www.143315.com-幸运选号彩票新浪| www.7523.pw-彩运宝体彩店| www.125119.com-合江中彩票-| www.92gi.com-t乐彩开奖信息| www.5978.me-体育彩票销售终端机| www.40623.com-手机群里打彩票| www.91339.cc-欧盟好彩蓝莓怎么样| www.056683.com-炫乐彩票北京pk十| www.153222.com-免费分分彩计划软件| www.ku.cc-安徽福利快三结果| www.fl25.com-彩票下载安装| www.x52.in-快钱体育彩票网址| www.967.mobi-七星彩随机选号软件| www.50398.com-黑彩都有哪些玩法| www.rz63.com-手机买彩票中五百万| www.8670.in-大发快三如何买豹子| www.53879.cc-世界十大彩票巨奖| www.928628.com-七乐彩的中奖号码| www.kl.cc-皇都彩票入口| www.b57.cn-凤凰vip彩票网站| www.42jz.com-七星彩中6个数字钱| www.854.me-超级彩票网址| www.5308.vip-分分彩后一计划| www.13431.com-足彩计算方法| www.55781.com-七乐彩复式怎么玩| www.39119.com-快三私彩-| www.291037.com-找回365彩票| www.858425.com-三彩丽雪官方旗舰店| www.974625.com-网上怎么买体彩| www.kn47.com-3d杀码凤彩网| www.198445.com-内蒙古快三遗漏豹子| www.649837.com-彩跑开始词-| www.181763.com-彩票黑彩网址快三| www.632403.com-3d彩票今天开机号| www.710158.com-彩民之家总站| www.800847.com-福彩3d今天开机号| www.863262.com-19041期胜负彩| www.971178.com-幸运彩票官网app| www.fz07.com-江苏快三代理招收| www.zf07.com-福彩小小鱼图谜版| www.94ih.com-易彩堂能赢钱吗| www.6067.biz-体育彩票竞彩微信群| www.32030.com-快三时时采回血上岸| www.85dz.com-彩票行业领导者| www.96571.cc-怎样看彩票的奖组| www.790.club-七彩虹官方网站| www.83xq.com-博盈彩票骗人| www.551817.com-足彩军长推介| www.268560.com-北京快三查询| www.2948.org-彩金狮王游戏机二代| www.24683.cc-星空中的鲸鱼彩铅画| www.409876.com-米彩手表-| www.773954.com-英国分分彩-| www.zc09.com-甘肃福利彩票陇彩宝| www.68yf.com-博彩公司不开中超| www.640208.com-彩多多彩票-| www.766648.com-快三网合法吗| www.838887.com-彩809彩票安全吗| www.kn82.com-体彩十分钟一开奖| www.752183.com-怎样下载中国体彩网| www.829294.com-66网赌彩票-| www.911978.com-中国彩票直播频道| www.964782.com-分分彩倍投倍减打法| 财神网www.29277f.com| www.235581.com-山东彩票彩友沙龙沙| www.718513.com-彩虹象征-| www.793009.com-安阳彩民-| www.231084.com-快三三军玩法机率| www.662183.com-能买彩票微信公众号| www.801660.com-彩票打印不一样| www.797689.com-中国足彩网必发指数| www.18997.cc-彩票中奖助手下载| www.270037.com-快三速查表图片| www.359980.com-机选25注七星彩| www.194990.com-安徽快三开奖图| www.273135.com-体彩福彩哪个好| www.962747.com-3d彩圣字谜总汇| www.cp3.biz-遵义福彩中心地址| www.pt81.cc-韩国快三网-| www.759508.com-博乐彩票网-| www.314468.com-彩票秘籍-| www.398990.com-彩票平台帮忙做代打| www.237403.com-中国体彩网下载| www.2096.com-江苏福彩主页| www.13398.com-快彩走势图-| www.50nf.com-天下彩天下彩票与你| www.1369.vip-vr3分彩走势图| www.229053.com-欧盟好彩蓝莓双爆珠| www.349062.com-我中啦彩票网怎么样| www.440129.com-福利彩吧彩吧3d| www.iv00.com-竞彩足球比分预测| www.t19.club-七乐彩杀号澳客网| www.58df.com-足彩18077期| www.2688.cc-新彩网3d字谜推荐| www.03114.com-赌博彩票必输| www.184163.com-河北快三套选说明| www.242200.cc-快三和值表奖金图片| www.314482.com-14胜负彩复式表| www.373393.com-鼎盛国际彩票| www.499855.com-51彩虹登录-| www.097889.com-中国福彩在线| www.8110.top-福彩3d一等奖规则| www.62246.com-查七星彩中奖号码| www.019023.com-苏州福彩官网网址| www.088974.com-福利彩票复式4十1| www.140996.com-浙江福彩开奖公告| www.207988.com-99彩票app-| www.267637.com-中国体育彩票玩法| www.323400.com-海南七星彩头尾资料| www.377550.com-彩票门面装修效果图| www.635799.com-彩虹六号机票价格| www.689357.com-今年七乐彩开奖结果| www.911679.com-天天彩4基本走势图| www.964946.com-彩票拆分-| 幸运彩票www.5095i.com| www.88736.cc-现在能网上买足彩吗| www.185569.com-大发快3彩票软件| www.055344.com-彩票中奖符头像| www.177376.com-百盈快三怎么看| www.083148.com-连中彩票下载安装| www.140097.com-河南福彩怎么兑奖| www.223110.com-福彩3d和值谜| www.65bp.com-比较好的彩票公众号| www.05679.com-义乌体彩申请| www.964578.com-送彩票不限ip| 博友彩www.937652.com| www.937451.com-福彩7乐彩复式| www.982901.com-盈彩是官网-| www.ze2.com-彩票本钱少很难赢的| www.576071.com-网络福彩举报电话| www.636532.com-彩虹四无人机多少钱| www.698157.com-6十1体育彩票下載| www.772923.com-下载app体验彩金| www.cp8711.com-快三平台合法吗| www.jl11.cc-快3彩票app下载| www.wu50.com-万彩吧6合资料下载| www.15tw.com-福利彩票站几点关门| www.789635.com-七星彩最近十期开奖| www.857941.com-足彩比分推荐分析| www.927025.com-竞彩推荐31-| www.970354.com-地球人彩票网页版| www.050360.cc-河南福彩官网唯一| www.125279.com-一种彩票选号技巧| www.188285.com-安徽福彩快三遗漏|