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天

知道了
彩01彩票 www.355787.com-常州体彩中奖号码| www.635157.com-七彩音符加盟| www.2824.cm-乐凯彩票人人猜球| www.06002.com-cp36彩票-| www.2600.cn-爱音乐彩铃电信下载| www.99300.cc-五分彩胆个位| www.225291.com-彩神娱乐平台| www.6453.net-速8彩票正规吗| www.41wn.com-ios唯彩看球| www.515471.com-时时彩刷流水技巧| www.595318.com-福彩数字3-| www.679249.com-彩678怎么安装| www.763030.com-大学生中彩票两次| www.840311.com-500竞彩篮球| www.907099.com-富彩彩票app下载| www.978038.com-富彩彩票是骗局吗| www.c9.cc-彩票送彩金的app| www.nn96.com-京东彩票是正规的吗| www.4020.net-sb博彩公司-| www.0452.net-彩网cai5登录| www.105262.com-好彩爆珠多少钱| www.6458.vip-豪彩娱乐时时彩注册| www.516698.com-彩票漏洞公式| www.062441.com-网上彩票有什么漏洞| www.132153.com-河南结婚风俗彩礼| www.268950.com-长城彩票靠谱么| www.355936.com-章鱼彩票中过大奖| www.h75.net-彩票开奖走势图首页| www.271236.com-好彩烟黑黄-| www.690175.com-足彩凯利方差怎么算| www.793666.com-沉迷买彩票-| www.965026.com-刮彩票容易中吗| www.cp5168.com-大发快三技巧顺口溜| www.546528.com-体育彩票申请范本| www.718070.com-彩店宝彩票电脑版| www.929383.com-七星彩兑奖彩票图片| www.998973.com-竞彩篮球彩票| www.ie72.com-深圳福彩玩法介绍| www.w20.club-诺亚彩票不让提现| www.55ji.com-四川体彩领奖流程| www.455116.com-金冠彩票软件| www.820908.com-彩钢复合板-| www.009347.com-彩搜网-| www.03156.com-333彩票网安全吗| www.074399.com-500资讯彩票预测| www.169170.com-安徽快三遗漏数据| 大赢家彩票平台www.503662.com| www.46iu.com-香港彩金项链| www.590228.com-好客彩网站怎么样| www.689391.com-上海福彩中心银彩通| www.780822.com-谁有黑客彩票软件买| www.858743.com-体彩排列3遗漏查询| www.947751.com-爱彩乐黑网-| 3158彩票www.cp3158.com| www.252712.com-时时彩计划软件| www.335953.com-七星彩每注多少钱| www.416251.com-彩虹三无人机价格| www.567203.com-彩票平台会控制输赢| www.477884.com-佛山福利彩票| www.0746.me-圣地彩哪个国家彩票| www.7785.pw-陶瓷新彩技法| www.333757.com-爱彩a22-| www.461068.com-排三预测家彩网杀码| www.584798.com-中国彩吧网首页丶| www.659480.com-章鱼彩票-| www.724820.com-u9彩票u9.cc| www.792359.com-彩票油了-| www.900683.com-注册就送彩金的平台| www.962351.com-五福彩票苹果app| www.n14.bid-热购彩票登录线路| www.169067.com-河南彩三-| www.108209.com-玩彩票一直赢| www.381484.com-体彩19030-| www.286.tv-体彩竞彩店提成| www.814282.com-福彩双色球选号网| www.892055.com-体彩竞彩足球如何看| www.965572.com-体彩排列七开奖结果| 双彩网www.629012.com| www.ks00.cc-今日彩票快3| www.352773.com-网上不给买彩票了| www.476638.com-什么网站买彩票安全| www.15835.cc-彩铅星空画教程视频| www.847856.com-古建筑彩绘标准| www.974221.com-福彩3d彩图大全o| www.bx06.com-七星彩开奖视频| www.5203.com-云南福彩大奖| www.28962.cc-彩票11选5分析器| www.566284.com-彩世界彩票平台| www.809799.com-爱情头彩下载| www.913068.com-彩票中奖网站预测| www.cp426.com-吉林快三害死人| www.177196.com-江苏快三是什么套路| www.615151.cc-福彩新3d漏洞| www.062814.com-博盈彩票-| www.183418.com-河北福彩3d玩法| www.072756.com-4亿彩-| www.531650.com-彩票33网站网页版| www.669625.com-彩票中奖金额计算| www.40gk.com-天天彩票资讯| www.00094.com-乐58彩票手机版| www.24988.com-彩铅颜色搭配大全| www.hs88.com-黑龙江省体彩网| www.o86.win-赛车送彩金-| www.789956.com-福彩3d夜间字迷谜| www.866740.com-极速时时采彩走势图| www.922559.com-河南周口结婚彩礼| www.974072.com-熊猫在线彩票| 酷彩网www.773925.com| www.sd68.com-3d彩票群-| www.95dl.com-附近体彩投注点| www.06292.cc-福彩3d冷态-| www.8137.wang-必中快三软件免费版| www.97qn.com-竞彩混合过关中奖| www.654.org-3d福彩彩报第三版| www.095882.com-网上购彩正规网站| www.53318.cc-北京五分时时彩| www.102811.com-好彩1预测彩乐乐| www.782488.com-彩票163开奖结果| www.895516.com-网投体彩是什么| www.972519.com-彩铅画真人-| 大赢家彩票平台www.708286.com| www.lp59.com-高频彩票倍投技巧| www.i22.in-网易福彩开奖直播| www.61rg.com-利彩真的假的| www.262081.com-手机买彩票安全可靠| www.78cq.com-男朋友沉迷足彩赌博| www.270163.com-大发快三开挂的图片| www.19qo.com-七天彩票下载安装| www.974747.com-福彩购买-| www.dl89.com-体育彩票500| www.m44.in-鸿运彩票是骗局吗| www.62gw.com-如何在手机买彩票| www.1755.xyz-509彩票-| www.137968.com-四川体彩七星彩查询| www.261560.com-福彩网站app| www.376086.com-乐彩08app-| www.569176.com-体彩中奖多久过期| www.096331.com-牛彩专家-| www.268619.com-3d快三走势图| www.591.biz-时时彩开奖结96果| www.355276.com-智博微彩城专家主页| www.321096.com-皇都彩票app登录| www.397154.com-我下个福利彩票| www.515660.com-怎么玩彩票稳赚不赔| www.587379.com-奇门遁甲藏干测彩票| www.670119.com-海南彩票从哪里打| www.752477.com-腾讯分分彩挂机骗人| www.270658.com-彩票要分-| www.31id.com-星期日开什么奖彩票| www.024643.com-全国福彩积分| www.017565.com-广西福彩网-| www.566054.com-宏发彩票注册| www.ov91.com-e球彩玩法介绍| www.0329.loan-釉上彩茶具套装| www.354240.com-刮彩票中大奖视频| www.426814.com-福彩三d三毛图库大| www.195873.com-彩票开奖结果查绚排| www.aq88.cc-湖北快三玩法与技巧| www.039356.com-时时彩助手下载手机| www.785.cc-双色球牛彩-| www.772029.com-多彩贵州招聘| www.00zr.com-七星彩媒体预测汇总| www.u49.com-网上彩票免费送彩金| www.84vq.com-体彩店人群-|