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.250608.com-51中彩彩票官网| www.380400.com-七乐彩一般多少奖金| www.492006.com-临夏彩票中奖| www.85018.com-体彩店有兑奖返点吗| www.086393.com-彩客彩票307旧版| www.220839.com-体彩排三定胆技巧| www.407560.com-彩3d三毛红五图库| www.527971.com-大六壬测彩票真经| www.630226.com-3000w彩票-| www.716654.com-唯美彩铅花鹿| www.791013.com-福彩福彩快3助手| www.873136.com-彩彩票网彩-| www.968543.com-瑞彩网论坛-| www.kw86.com-快三有多少省份| www.604711.com-彩九苹果版下载安装| www.4900.vip-3a彩票试机号今天| 环球彩票www.47d.cc| www.411.cx-史上彩票最大奖| www.560024.com-福彩网首页购彩平台| www.680441.com-彩票领奖可以代领吗| www.588899.cc-体彩七星彩那天开奖| www.820569.cc-七星彩直播现场视频| www.922644.com-彩8在线安全么| www.988674.com-期期中彩票合法吗| www.gv08.com-五分彩是骗人的吗| www.5vs.com-谁中过彩票大奖| www.121796.com-江西体育彩票网| www.57267.cc-锋彩直播苹果版本| www.987894.com-极速时时彩计划全天| www.ds54.com-时时彩是不是骗局| www.129142.com-陕西福彩双色球玩法| www.254379.com-好彩官方网下载| www.191021.com-中国快三网平台| www.ok1.com-福利彩票合法网站| www.5re.cc-体彩怎么打票| www.1575.vip-有人用彩宝彩票吗| www.742499.com-全国快三投注技巧| www.905647.com-福建省彩票管理| www.993649.com-足彩任九定胆技巧| www.cw72.com-必赢彩票退钱了没| www.0263.pw-时时彩高奖金平台| www.90409.com-手机扫码查彩票| www.055013.com-租彩票平台要多少钱| www.140203.com-99cc赢彩彩票| www.277581.com-彩票坊江苏快3| www.63791.cc-竞彩人气交易平台| www.228581.com-彩色压印地坪| www.300221.com-乐和彩518开奖| www.8355.loan-快乐十分彩票推荐图| www.496702.com-小米彩蛋-| www.8486.tv-彩贝捕鱼网站| www.69876.com-体育彩票浙江61| www.150768.com-709彩票靠谱吗| www.494422.com-抚顺出兑体彩租福彩| www.424134.com-张星彩强度-| www.333136.com-5分彩选号技巧| www.491469.com-体彩可以买世界杯吗| www.4745.vip-彩票造假领奖成功| www.089209.com-台北快三是官方的吗| www.45bz.com-排三杀号众彩网| www.yv89.com-红旗彩票-| www.533182.com-老彩民村高手论坛| www.800006.cc-福彩开奖下期预测| www.909192.com-福彩梅子今天预测| www.966358.com-福彩三d今天必下| 500彩票网www.61655s.com| www.428175.com-有哪些彩种是官方的| www.043529.com-彩票扫一扫-| www.72758.com-福利彩票小助手官网| www.cp483.cc-河北快三走势图昨天| www.579323.com-彩68app官网| www.275825.com-7星彩复式计算| www.828258.com-大豪客彩票-| www.915539.com-天吉电子彩报3d版| www.976480.com-咸阳彩票中奖| www.qa5.cc-长春逸彩快三走势图| www.wy33.com-彩票大师必中| www.16zj.com-鑫彩国际下载| www.88as.com-东方彩与大发| www.2008.cm-彩虹6号加速器北美| www.032960.com-乐彩神彩票靠谱吗| www.3667.com-竞彩十四场比分直播| www.37832.cc-234彩票网下载| www.88443.cc-3d选胆图彩经网| www.113134.com-竞彩猫今天直播| www.qv68.com-pc是彩票的意思吗| www.004566.com-褔彩开奖结果| www.101835.com-一定牛彩票停售原因| www.193043.com-贵州快三预测号| www.579496.com-雪缘足彩山分直播| www.667287.com-哪个彩票容易中奖| www.750199.com-鑫彩网app主页| www.815020.com-中国足彩网怎么样| www.885674.com-爱投彩票ios| www.993851.com-中国足球彩票第一期| www.dw66.com-易彩彩名福地| www.g99.top-彩宝app赌博| www.25wi.com-玩彩票是啥意思| www.96237.cc-中国彩票史-| www.060805.com-彩客吧-| www.078057.com-旺旺彩票能玩吗| www.144008.com-彩运8网址-| www.ii12.com-新彩吧福彩3d字谜| www.i77.date-国家福利彩票官方网| www.49wb.com-3d彩票中奖查询| www.95477.cc-体彩中超联赛| www.116647.com-福彩3d最准规律| www.220016.com-高频彩官网-| www.339485.com-破解速赢彩大小| www.789504.com-玩彩输了20万想死| www.865960.com-彩票怎么注册| www.926310.com-彩票748-| www.974787.com-南国体彩七彩论坛| 大赢家彩票平台www.760320.com| www.fn36.com-3d福彩试机号| www.672704.com-直播号网易彩票| www.771613.com-凤凰彩票官网方网址| www.898831.com-兰州快三彩票开奖| www.954636.com-彩票宝下载-| www.994431.com-彩票现场开奖| www.aj89.com-七星彩今期-| www.qy34.com-腾讯分分彩期期必中| www.42tx.com-今日竞彩结果查询| www.07887.cc-中彩那天的教案| www.776368.com-江西11选5彩票| www.861852.com-幸运彩票手机版下载| www.919282.com-时时彩做庄有风险吗| www.976068.com-广西彩礼钱-| 天下彩www.983480.com| www.638153.com-宜州足彩店电话| www.89ak.com-黄金叶乐彩多钱一盒| www.889067.com-彩站宝实体店app| www.957695.com-乐透彩开奖结果| www.997881.com-福彩和制图-| www.hh6.cc-安徽时时彩玩法| www.pd25.com-彩票入门与技巧| www.q11.website湖南福彩快三| www.80pj.com-下载九号彩票| www.003192.com-今天彩票中奖单号| www.062763.com-天天彩富网后一定胆| www.146557.com-易彩网彩票app| www.215227.com-易彩用户登录| www.278715.com-福彩3d杀5跨方法| www.332870.com-凤凰彩票是不是黑网| www.521835.com-时时彩代理获刑案例| www.120524.com-时时彩购买网站| www.z23.net-云购彩票注册邀请码| www.985.biz-体彩排列三五试机号| www.650002.com-博彩业的发展| www.qd26.com-8亿彩在线下载| www.wc74.com-内蒙快三最近50期| www.397229.com-福利中奖彩票怎么看| www.122722.com-彩神网高手论坛| www.097508.com-福彩3d12生肖| www.0rl.com-ibb娱乐彩票官网| www.55ai.com-时时中彩票安卓下载| www.oq14.com-彩票导师靠什么赚钱| www.393514.com-简单彩铅画多肉植物| www.513259.com-三彩家托管靠谱吗| www.247267.com-微信快三彩票群| www.3968.win-大富彩票网平台下载| www.9654.vip-开发个彩票软件下载| www.56651.cc-体育彩票平台| www.739074.com-极速快三辅助软件|