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.pk10.com www.fw.cc-河北快三前三直遗漏| www.uh46.com-彩票是骗局-| www.120237.com-彩票店有大发快三吗| www.022565.com-e球彩复投-| www.111261.com-哪个平台买彩票正规| www.92ac.com-众乐彩票官方网站| www.sx26.com-彩票都是几位数| www.232.red-鸿彩一百可以提现吗| www.565163.com-广州彩票没人领| www.640989.com-彩票app图标| www.715400.com-彩票双色球技巧| www.789867.com-西宁彩票在哪里兑奖| www.867234.com-我想下个福利彩票| www.933868.com-25号彩票开奖| www.990889.com-彩之网互动交流区| www.ae98.com-福彩快三上海开奖| www.ug95.com-中国福利彩票奖金| www.09ij.com-70099彩票网| www.285348.com-福彩3d金码-| www.460906.com-买彩票中奖怎么办| www.612417.com-竞彩捷报推荐| www.750815.com-天天彩正规的吗| www.878739.com-中国福彩积分| www.983116.com-体彩手机在线| www.iv76.com-利博彩票-| www.03or.com-安徽彩票兑奖地址| www.236982.com-浙江体彩网下载| www.377360.com-917彩票靠谱吗| www.18oq.com-第19010期体彩| www.kk06.cc-安徽快三是什么| www.34si.com-玩彩代打-| www.194637.com-福彩3d和尾走势| www.276015.com-开门彩专家杀号| www.356175.com-瑞祥祥云彩票可靠吗| www.40934.com-亚慱彩票-| www.424158.com-6d彩乐网下载安装| www.331136.com-3d彩神通关注码| www.547946.com-福利彩票137| www.733817.com-彩票新规影响| www.880203.cc-包头福彩中心| www.cp434.com-快三技巧玩法教程| www.18ea.com-体彩排列五获奖结果| www.4307.com-虎扑体育足彩论坛| www.654729.com-欢乐时时彩是真是假| www.908987.com-彩神3怎么玩| 68彩票www.68689v.com| www.s80.net-鄂尔多斯彩票一等奖| www.hl10.com-足彩单关表-| www.98580.cc-腾讯五分彩开奖网| www.038015.com-49l彩票-| www.900223.com-辽宁十一选五爱彩乐| www.83.cc-22彩票提现不到账| www.2593.me-广西电信彩铃| www.222229.cc-今晚彩票开奖号码| www.365041.cc-菲律宾做博彩| www.677849.com-彩票机怎么装纸图解| www.397106.com-我要看一下福利彩票| www.325196.com-海南有什么彩| www.385846.com-助赢软件贵州快三| www.678735.com-电工制作彩票网| www.rw8.com-河北福彩三d走势图| www.892577.com-官方网上彩票软件| www.013511.com-七星彩昨天的图纸| www.134727.com-福彩票什么时间开奖| www.328234.com-南方双彩最专业走势| www.435092.com-昔日的彩票专栏| www.553190.com-体彩都有哪些| www.lt32.com-吉林快三有假吗| www.qk7.com-福建体彩选号技巧| www.43323.com-福彩3个位必中规律| www.128396.com-快三和值三个数相加| www.99019.com-彩票机选器大乐透| www.91277.com-彩票双色球数据下载| www.115107.com-三d彩神通预测| www.1693.top-爱乐透彩票安卓下载| www.22890.com-福彩彩票网-| www.732022.com-易彩快3大小单双| www.796182.com-印尼分分彩官网| www.869023.com-7星彩投注-| www.939568.com-彩票双色球机选投注| www.994247.com-彩票分析大师官方| www.bj10.com-黑客黑入彩票平台| www.365188.com-体彩31开奖走势图| www.484808.cc-彩票app那个好| www.545917.com-福彩投注站申请电话| www.707883.com-湖北快三开奖下载| www.774748.com-七乐彩3胆6拖| www.828804.com-218永信彩票| www.885429.com-近期彩票开奖结果| www.941757.com-广西体育彩票中心| www.983796.com-临沂福彩中心在哪里| 天天中彩票www.826927.com| www.585125.com-美国代购彩票| www.662617.com-中国福利彩票智能机| www.734768.com-百度福彩3d走势图| www.800155.com-全国彩票开奖结果l| www.882787.com-各国基诺彩-| www.966850.com-福彩3d顺口溜| www.cai926.com-江苏快三能赚钱骗局| www.32674.com-南京市体育彩票中心| www.6888.pro-福利彩票期数看哪里| www.44161.com-58彩票维护-| www.78677.com-乐彩论坛1-| www.062921.com-大乐透网购彩票| www.216511.com-体育彩票500| www.912130.com-中华彩票是真的吗| www.8011.bid-南京哪里有卖彩票的| www.924012.com-乐彩37-| 易彩网www.36166q.com| www.706358.com-福彩3d复式7码| www.77675.com-彩尊平台怎么样| www.380390.com-合买彩票群起啥名好| www.563272.com-优优购彩黑平台| www.630843.com-玩彩计划网站| www.119122.com-彩票机吧-| www.12326.com-app足彩不能买| www.28lk.com-信彩彩票登录| www.936048.com-时时彩聚宝盆app| www.767687.com-3d双彩图谜-| www.34vj.com-体彩不能网上购买| www.677176.com-福彩3d宝典八阵图| www.629101.com-国外彩票中奖新闻| www.581365.com-k彩客服-| www.859067.com-腾讯分分彩最笨买法| www.983975.com-开心七星彩彩版专区| www.we3.com-福彩网快3-| www.b61.org-江西福彩投注站| www.71xl.com-彩票012路表格| www.332029.com-十选五是正规彩票吗| www.519378.com-彩票开奖直播电视台| www.d15.org-足球彩票第二期| www.172128.com-湖北福彩5d走势图| www.279581.com-高频彩是不是赌博| www.503117.com-彩36的网站多少| www.023126.com-福彩3d速查表技巧| www.169067.com-河南彩三-| www.287831.com-福i彩开奖结果查询| www.380394.com-彩票撕烂还能兑奖吗| www.970463.com-彩票专业带赚种类| www.cai1345.com江苏快三开奖结果?| www.ia17.com-体彩排列五开将结果| www.zm01.com-大发彩票正规吗| www.16sn.com-k彩简介-| www.745727.com-中彩彩票万人牛牛| www.947342.com-福彩今天开奖号| www.33709.com-非凡彩票网官方网站| www.688571.com-体育彩票电话投注| www.789987.com-江苏快三雄鹿计划| www.870061.com-江苏快三最长多少期| www.978919.com-36选7好彩一预测| www.de60.com-中国福利彩票的彩种| www.579804.com-老彩票开奖官方网站| www.77ht.com-r8国际彩票如何买| www.377906.com-万豪福彩大转盘攻略| www.74fw.com-彩票怎么在手机上买| www.7676.pro-七乐彩开奖结果星| www.847.tv-二八彩票怎么看| www.909088.cc-澳门十二生肖彩| www.261827.com-博发彩票网页| www.596281.com-eg彩票极速飞车| www.589082.com-七星彩解梦册| www.173117.com-快三代理中心| www.344687.com-彩38是那里的平台| www.559081.com-3d安全购彩杀号|