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天

知道了
百盈PK10 www.856234.com-彩票站点投诉| www.699234.com-七乐彩兑奖说明| www.23hq.com-彩漫-| www.082798.com-2分快三是不是真的| www.6969.bid-彩店宝停了-| www.858726.com-黑龙江浩彩快三| www.972295.com-七星彩彩票结果| www.8608.in-智彩11选5-| www.51565.com-彩塘镇创身厂招工吗| www.005463.com-体彩三十一选期开奖| www.123977.com-体彩356期家彩网| www.227600.com-快3彩票正规| www.348965.com-云彩宝官网下载| www.024598.com-有彩神通代理会员吗| www.621687.com-广西福彩快三今天| www.282447.com-微信快三群拉人套路| www.512096.com-冰蓝凤凰彩铅画| www.699010.com-福彩7十1开奖结果| www.913708.com-福彩神牛双色球预测| 尊彩www.083016.com| www.9501.vip-上海彩钢屋面防水| www.937903.com-云彩厅彩票是真的吗| www.mr0.com-快三高手app| www.766667.com-彩虹糖哪年开始生产| www.062789.cc-加盟中国福利彩票| www.332620.com-彩票被骗能追回吗| www.14yk.com-大福彩票网-| www.2089.vip-江苏福彩3d开奖号| www.53239.com-七彩山鸡养殖基地| www.076206.com-彩票达人图片| JJ彩票www.41855.cc| www.055793.com-重庆时时彩能赚钱吗| www.739041.com-福彩微信群-| www.26ia.com-今晚福利彩票图纸| www.0771.cc-易彩3的规律| www.526512.com-网络上买彩票违法吗| www.42546.com-搜狗彩票吧-| www.100268.com-非法经营彩票罪量刑| www.225554.com-可以合买彩票的平台| www.356496.com-最新中国竞彩联盟| www.003880.com-新盈彩平台登录| www.150735.com-网上打彩票赚佣金| www.272366.com-七星彩开奖号码是| www.457489.com-形容买彩票的诗句| www.282697.com-大发快三预测公式| www.387858.com-彩一万软件-| www.515952.com-中福彩票输赢有多大| www.63903.com-足彩购买技巧方法| www.768229.com-最赚钱的高频彩种| www.932713.com-118彩票不能提现| www.997354.com-app下载送彩金| www.dn52.com-贵卅快三开奖结| www.wg01.com-大发时时彩网页计划| www.14cx.com-九州体育博彩怎么样| www.0470.onlineyg彩票-| www.14lp.com-彩虹六号刘醒资料| www.4449.net-凤凰快三开投注技巧| www.39862.cc-彩46.apk-| www.019126.com-利彩快3玩法| www.130502.com-一定牛彩票足彩| www.234228.com-买快三为什么天天输| www.315587.com-安微福彩快三结果| www.388411.com-彩票骰子开大小双单| www.504649.com-钻石之王彩票| www.578933.com-福彩3d牛彩杀码图| www.3231.site-维彩看球预测| www.15451.com-彩铅房子风景画简单| www.145982.com-310足彩专家预测| www.789012.com-唯彩网下载-| www.053101.com-彩米彩票倒闭了吗| www.2024.link-彩虹六号战队皮肤| www.675950.com-青海省彩礼排名| www.801159.com-财经郎眼彩票| www.915091.com-竞彩专家推荐分析| www.974338.com-955彩票-| www.ez03.com-博牛彩票注册| www.i62.bid-彩乐网福中网资料| www.959806.com-时时彩对冲套利方法| 500彩票www.343277.com| www.751374.com-爱乐透足彩体彩| www.034570.com-谁有正规的彩票网站| www.218108.com-58彩票官方网站| www.291208.com-彩票500期走势图| www.946948.com-彩票816导师| 彩678www.c67801.com| www.024564.com-江西快三在线计划| www.442050.com-旺彩双色球怎么购彩| www.621775.com-福利彩票十分钟奖| www.760189.com-打一张彩票提成多少| www.890895.com-彩票至尊软件| www.12825.com-陕西体彩快乐十分钟| www.86917.com-山西大同快三查询| www.099959.com-中华彩票软件| www.219792.com-彩5app-| www.339140.com-彩票2元网杀号| www.492298.com-世界杯体彩网络| www.607950.com-彩友多怎么下载啊| www.28632.cc-股市与彩票-| www.171078.com-大发快三怎么抓和值| www.268953.com-3分彩的官网| www.377371.com-七乐彩杀号定胆2| www.03qu.com-购彩助手是怎么回事| www.444594.com-莆田市彩票店招工| www.588514.com-贵厅室彩票app| www.709987.com-5亿彩是不是假的| www.825278.com-有没有竞彩猫合买群| www.qp16.cc-pc福彩什么意思啊| www.94kt.com-飞腾彩票下载| www.4897.vip-谁有彩票代打群| www.033755.com-彩乃奈奈番号封面| www.159998.com-苹果彩票投注app| www.237947.com-北京快三技巧秘密| www.r16.shop-彩票顺口溜怎么说| www.98mq.com-黑彩举报网站| www.10mz.com-微微彩票首页| www.79wq.com-体彩排列三奖金| www.2521.pw-金彩彩票是正规的吗| www.9444.tv-1分彩计划全天计划| www.nb68.com-数学与彩票-| www.11gx.com-再添新彩-| www.94ly.com-500彩票违法么| www.6120.xyz-助赢彩票娱乐平台| www.06798.com-福彩蓝精灵21| www.006554.com-公众号好彩-| www.580724.com-福彩最大值走势图| www.wq63.com-彩票走势图管用吗| www.79584.com-新浪体育竞技彩票| www.829420.com-福彩速查图表| www.910410.com-彩99安卓下载| www.962054.com-360彩网-| 网易彩票www.091wy.com| www.291139.com-福彩五行走势图| www.003493.com-菲律宾博彩业安全吗| www.993037.com-彩神88网页版| www.26lb.com-快三怎么算下期| www.421224.com-幸运中彩票牛牛玩法| www.586985.com-welcome彩票| www.661620.com-快乐彩作假-| www.902036.com-国家打击黑彩的力度| www.k12.red-旧版中国彩吧更懂民| www.50yo.com-一分快彩-| www.749.in-时时彩三星直选口诀| www.876171.com-重庆彩票-| www.cw98.com-好的私彩平台| www.xj52.cc-福彩天地报在线| www.144208.com-时时彩人工计划网站| www.260887.com-足彩最新最快开奖| www.145.org-彩虹谷-| www.486836.com-足彩竞猜玩法图表| www.578973.com-亚洲杯彩票怎么买| www.655376.com-哪里可以买江西快三| www.799985.com-福彩7乐彩走势图| www.867010.com-v8彩票苹果版下载| www.931230.com-马来西亚褔利樂和彩| www.980714.com-彩票分析软件选号器| 500彩票www.937986.com| www.06pz.com-彩票投注站猫腻| www.91427.com-好彩柠檬好抽吗| www.142876.com-五分钟开奖的彩票| www.205228.com-北京快三走试图| www.0475.date-钻石彩票app| www.7532.bid-老梁说彩票造假| www.16845.com-福彩3d藏机字谜图| www.64146.com-彩票叫卖顺口溜|