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.398356.com-彩票摇摇乐下载| www.34306.com-福彩三地更懂彩民| www.054887.com-参与黑彩的会判刑吗| www.633773.com-玩快三真的有计划吗| www.765130.com-彩甜糯333-| www.885348.com-360购彩大厅彩票| www.974262.com-彩票和值是什么| www.126025.com-福彩手机报下载| www.87kj.cc-彩民之家论坛高手榜| www.04335.cc-zhcw中彩网-| www.038146.com-爱投彩票ios版| www.187289.com-时时彩软件app| www.276309.com-七乐彩中奖查询表| www.358014.com-709官方彩票网| www.453236.com-彩钢夹芯板安装视频| www.757792.com-彩票双色球胆拖玩法| www.898112.cc-彩票扫码器-| www.981039.com-七彩意义-| www.ft8.cc-快三官方开奖网| www.sm02.com-中国重庆时时彩官网| www.14ow.com-网络购彩还没恢复| www.521.mobi-彩票出大奖投注站有| www.md45.com-好运彩快三平台| www.61pl.com-天际彩票注册网址| www.3870.cc-今日3d彩报第一版| www.783962.com-仿冒彩票网站最| www.939577.com-福彩在线注册大小| 开心彩票www.ck6787.com| www.124433.com-鼓励彩票-| www.828113.com-彩票2019035| www.5913.biz-泰国十分彩-| www.74099.com-福彩3d公式杀码| www.43eq.com-篮彩预测专家| www.2019.pw-旺球彩店最新app| www.8899.live-500体彩网-| www.876620.cc-体育彩票真假| www.985623.com-竞彩单场推荐周六| www.st76.com-时时彩打法-| www.579.me-分分彩怎么买大小| www.677956.com-福彩机器怎么换纸| www.p16.me-彩票和值振幅走势图| www.50ww.com-德国鲸彩漆-| www.ij93.com-福利彩票微信公众号| www.035032.com-火箭彩票aqq| www.58527.cc-9万彩票登录| www.950563.com-福彩3d杀跨-| www.wv2.com-快三号码表-| www.0369.top-时时彩前三跨度技巧| www.41967.com-中彩网北斗-| www.42704.com-经彩官方-| www.665703.com-七乐彩什么时候上市| www.767014.com-彩界联盟软件下载| www.838329.com-彩钢瓦屋顶多少钱| www.914282.com-黑彩平台报警可以吗| www.981400.com-q彩平台-| www.lp77.com-网络彩票可信吗| www.994224.com-7728彩票-| www.cx40.com-外围彩票平台哪个好| www.vn01.com-七乐彩走势图带连线| www.385182.com-吉祥彩登陆官网| www.704747.com-中国体彩网唯一网站| www.817672.com-福客来彩票网址首页| www.906308.com-微信黑彩快3群| www.973790.com-大奖网彩票首页| www.cp0928.com-江苏快三破解器下载| www.678427.com-胜负彩最新开奖结果| www.996263.com-北单体彩店-| www.sw4.com-福彩复式合买刷流水| www.sl16.com-重庆实时彩骗局| www.17rs.com-真的有人中彩票吗| www.686003.com-928彩-| www.167020.com-江苏快三计划群骗局| www.268218.com-随机选号福利彩票| www.117737.com-竞彩足球总进球数| www.277543.com-什么彩票稳赚不赔| www.432595.com-吉利彩票帐号注册| www.256233.com-中国彩吧论坛| www.357439.com-宝马彩票是真的假的| www.444580.com-牛彩纽约一分彩| www.117584.com-江苏足球e球彩| www.242880.com-昆山彩票大奖| www.271500.com-好彩1怎么玩| www.373752.com-泰版好彩薄荷香烟| www.932757.com-彩73彩票手机版| www.ah24.com-江苏快三骗-| www.338462.com-中山体彩最新转让| www.566627.com-必发彩票注册| www.685698.com-武威快三走势图| www.792033.com-彩票中奖去哪里领| www.892118.com-竞彩大奖历史| www.292583.com-湖北快三怎么玩法| www.431192.com-利彩网首页-| www.450440.com-北京七星彩开奖结果| www.575771.com-竞彩网购平台| www.640703.com-荣誉彩-| www.705018.com-福彩3d开奖软件| www.782905.com-卓易彩票中了不给钱| www.847504.com-古建筑彩绘价格| www.899586.com-中国福利彩票刮刮乐| www.956004.com-亚洲宝博彩票| 大赢家彩票www.570821.com| www.ga05.com-浙江省快乐彩走势图| www.649340.com-缅甸博彩业-| www.297275.com-怎么在手机上玩快三| www.378846.com-玩彩票输了100万| www.8737.space-彩票走势分析插件| www.258561.com-足彩14-| www.326451.com-排3试机号彩宝网| www.zh36.com-双彩论坛官网手机版| www.20608.com-新345彩票-| www.57558.cc-澳客彩店安全吗| www.522420.com-兴盛彩票-| www.618984.com-打彩票是啥意思| www.675359.com-福宏彩票是真的吗| www.289337.com-快三单式中两个号码| www.675531.com-时时彩等机会| www.813245.com-重庆寸时彩开奖视频| 爱购彩票www.3552n.com| www.ip33.com-足球彩票19054| www.c93.net-百宝彩收费怎么解决| www.26gv.com-买彩票图-| www.87pc.com-海南站七星彩图规| www.1288.org-美狮彩票推荐人| www.6011.com-云南福彩中心电话| www.22627.cc-来个靠谱平台玩彩| www.59961.cc-彩店宝彩票靠谱| www.342266.com-谁有江苏快三群| www.448921.com-高频彩种专业品牌| www.876607.com-体彩五d几点开奖| www.567629.com-高频彩票为何一定输| www.675034.com-鸿亿彩票平台| www.735844.com-斐波那契数列与彩票| www.796632.com-66彩票平台-| www.876540.com-大彩网3d走势图| www.931249.com-快三真有人控制吗| www.983461.com-计划员彩票-| www.es0.cc-优信彩票快3| www.999504.com-大运彩票网登录| www.fx03.com-天天中彩票平台诈骗| www.zb82.com-河北省体彩十一选五| www.83dx.com-喝彩中华报名| www.568111.com-彩票网投盈利项目| www.684268.com-潮款卖彩票500万| www.783022.com-o38彩票软件| www.854254.com-福彩旗下的高频彩| www.zo46.com-福彩7乐彩-| www.40ds.com-今期七星彩长条最新| www.231005.com-河南体育彩票| www.285129.com-福彩过户-| www.687378.com-139彩票安卓版| www.763329.com-福利彩票十分钟玩法| www.837099.com-体彩一定牛下载| www.314039.com-体彩兑奖流程| www.375475.com-彩虹六号刘醒介绍| www.452013.com-快三分分彩漏洞| www.520127.com-彩票预测app| www.575912.com-网上彩票停售多久| www.631261.com-好彩1生肖-| www.678591.com-足彩500胜负赔率| www.737256.com-彩票到哪领奖| www.792446.com-兑奖后的彩票给谁| www.845288.com-福彩文化理-| www.cp9766.com-福彩福建快三走势| www.pl32.com-体彩北京11选五|