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天

知道了
58福彩 www.77ua.com-网恋诈骗博彩群| www.7209.in-彩票打水对冲套利| www.33571.cc-环球彩妆学校| www.88973.cc-ok彩票下载官网| www.062533.com-彩票站出兑急急急| www.221963.com-百彩网开奖结果| www.309646.com-tt快三直播间| www.393283.com-秋天风景画彩铅画| www.552898.com-时时彩采集软件| www.651119.com-陈流风景水彩视频| www.753795.com-彩乐园lli-| www.859317.com-今天福彩体彩开机号| www.942684.com-广西福利彩票网官网| JJ彩票www.52001.cc| www.hr62.com-五百万彩票app| www.f41.cc-球彩台在线直播| www.48zv.com-时时彩单双计划网页| www.0389.vip-二元彩票图-| www.9890.vip-汇丰彩票登陆| www.60355.com-优选彩店app| www.028767.com-福彩好运三-| www.113764.com-下载火箭彩票| www.195512.com-快三推荐一定牛| www.278172.com-中彩网双色球手机版| www.405827.com-app凤凰彩票网| www.522120.com-老时时彩龙虎和计划| www.603790.com-足彩自动分析软件| www.688242.com-福彩官方微信公众号| www.778050.com-快频彩开奖结果查询| www.903882.com-彩票竞猜的金豆| www.974896.com-福彩图迷汇总牛材网| www.fb47.com-爱彩乐快三走势图| www.zp39.com-时时彩什么叫半顺| www.35sz.com-特区网彩票论坛| www.5168.biz-七乐彩尾号走| www.11514.com-彩票自动售票机| www.61054.com-三国邪恶星彩无惨| www.048928.com-皇都彩票的违规规则| www.137749.com-567彩票是真的吗| www.223746.com-体育彩票31选7| www.308286.com-体育彩票买法| www.388684.com-福彩双色球安装下载| www.555233.com-缅甸博彩工作安全吗| www.631412.com-丰彩彩票钱取不出来| www.710875.com-有人中彩票吗| www.794877.com-重庆彩票网公示| www.875454.com-快彩电子走势图| www.988695.com-全民中彩票官网网址| www.cf2.com-体彩26选5-| www.ql11.com-一定牛彩票停售| www.10pb.com-时时彩冷热号码统计| www.88ag.com-彩票009网正规吗| www.2752.org-彩界赌神-| www.8588.live-河内彩票开奖查询| www.64130.com-竞彩001历史数据| www.027040.com-福利彩票山东中奖人| www.110659.com-福彩3d开l奖| www.188259.com-江苏快三奖金规则| www.269100.com-人穷买彩票都不中| www.392735.com-初学彩色铅笔画教程| www.523785.com-时时彩对子出号规律| www.613441.com-买彩票的正规app| www.692515.com-幸运28购彩平台| www.777000.com-彩6官方下载ios| www.885577.com-利彩邀请码-| www.960666.com-天津快三官网| 凤凰彩票www.452815.com| www.jl34.com-九度彩票可以赚钱吗| www.d32.top-皇都彩票能提现吗| www.36it.com-彩客网c07下载| www.1456.cn-海洋彩铅画-| www.8357.cm-最容易中奖彩票平台| www.34942.com-意大利彩金在澳门| www.82532.com-聚福彩票安全吗| www.038506.com-内蒙古快三昨天| www.166682.com-快三倍投大忌| www.258745.com-足彩19039-| www.335323.com-广西快三网投| www.413355.com-快三在线开奖直播| www.525459.com-国家关闭重庆时时彩| www.651741.com-8828彩票注册| www.740797.com-a股博彩股票有哪些| www.817546.com-胜负彩必发指数分析| www.892572.com-有人知道彩票榜吗| www.960465.com-大发快3分分彩| 中国福利彩票www.3478f.cc| www.eq36.com-易赢彩票app下载| www.wj22.com-大发时时彩独胆计划| www.18ju.com-玩彩怎样才能稳赢| www.959.red-体育彩票怎么开奖| www.6303.cc-铝彩涂白色-| www.16123.com-无精选彩双色球专栏| www.61216.cc-众购彩票网网址| www.039203.com-彩票投资是什么意思| www.127436.com-日彩网合法吗| www.203443.com-福彩时时乐走势图| www.279468.com-彩500下载网页| www.385873.com-六十一体彩查询| www.509944.com-体彩办投诉电话| www.579902.com-如何加盟彩票投注站| www.654939.com-七星彩论坛下载安装| www.752113.com-ok彩票网能玩吗| www.854909.com-双色球专家开门彩| www.922193.com-人人彩票资料| www.979645.com-360彩票购彩票| www.yv34.com-山东体彩兑奖流程| www.29he.com-网上体彩投注有吗| www.695.space-购彩3下载-| www.4417.vip-青海快三推荐| www.9651.biz-云南农村彩礼多少钱| www.61126.cc-非法彩票查处| www.020990.com-体彩排三单双走势图| www.093383.com-北京体彩店-| www.160014.com-彩神争8ll网址| www.270996.com-彩77官方网登录| www.357673.com-彩票a8平台-| www.441052.com-炫彩粒子下载| www.529768.com-体彩奖金级别| www.631295.com-时时彩6-| www.697956.com-嘉兴福彩地址在哪里| www.772518.com-內蒙时时彩开奖结果| www.878732.com-南昌市福利彩票中心| www.959232.com-彩票中奖小说排行| 68彩票www.68682k.com| www.el13.com-正规的网络购彩平台| www.vo92.com-多乐彩-| www.07br.com-彩铅画多肉虹之玉| www.73tv.com-带彩票黄历今天| www.1026.ren-爱彩乐官方是真的吗| www.01827.com-博彩套利论坛| www.53882.cc-时时彩任三混选| www.96827.cc-竞彩必发大额交易| www.057451.com-七星彩几点开奖结果| www.158092.com-北单足彩上下单双| www.240898.com-彩客彩票能买吗| www.311102.com-中彩堂新址-| www.374744.com-体彩杀号定胆天气网| www.513770.com-网上买彩票怎样兑奖| www.579191.com-福建体彩泉州直播室| www.645682.com-珐琅彩釉-| www.750983.com-706彩票安卓版| www.815787.com-双数开彩是什么波| www.882882.com-彩票内部人员透露| www.965034.com-中彩网易彩快三技巧| 乐彩赢www.0014f.com| www.bx06.com-七星彩开奖视频| www.rv45.com-湖北快三对应码| www.10wh.com-足球官方竞彩app| www.76gc.com-七乐彩中六个好| www.1112.cn-nba竞彩分析推荐| www.8563.xyz-牛彩分分快三| www.35567.com-头条彩票首页下载| www.77312.cc-店之宝彩票网| www.023616.com-时时彩3第-| www.090654.com-5元彩票-| www.148681.com-福利彩票全国通兑吗| www.277788.com-彩票933-| www.358587.com-广东快中彩开奖结果| www.438076.com-腾讯分分彩平台排| www.559901.com-彩票可以收藏| www.659746.com-七天彩是个什么平台| www.777410.com-澳客彩票可靠吗| www.907268.com-四个数字的彩票推荐| www.965166.com-福彩网1分快3真假|