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天

知道了
1分快三 www.201444.com-江苏快三每天| www.119987.com-幸运快三倍投技巧| www.211066.com-彩票网站平台| www.313268.cc-大发快3彩票骗局| www.305232.com-彩票能一次买多期吗| www.80799.com-彩票基本-| www.174051.com-新快三怎么玩| www.317596.com-职业彩民亏损| www.427213.com-邢台临城彩票中奖| www.813514.com-彩票网站代理加盟| www.946007.com-腾讯10分彩开奖| 易彩网www.99638h.com| www.bp16.com-广东体彩11选5| www.276214.com-体育彩票苏州| www.610353.com-龙江福彩app下载| www.xr79.com-福利彩票35期开奖| www.2914.cn-腾讯分分彩能不能刷| www.9916.top-网上彩票app靠谱| www.87415.com-中国长城福彩| www.980123.com-彩票销售员南京| www.gd78.com-单机新快三下载| www.7qo.com-网络彩票公司员工| www.800927.com-福彩3d天天黑白报| www.713839.com-旭彩网是不是骗人的| www.696223.com-爱彩投注可靠吗| www.vx09.com-玩快三赚钱的| www.83xq.com-博盈彩票骗人| www.3702.cn-足球竞彩彩票安卓版| www.5748.org-双数开彩打一生肖| www.33308.cc-俄罗斯快三查询| www.83699.cc-中彩票的星座| www.130674.com-时时彩宝典官方下载| www.236018.com-竞彩500篮球| www.332005.com-大发快三长龙助手| www.416416.com-今日竞彩足球推分析| www.517997.com-彩票投注平台导航| www.583620.com-看彩票走势有用吗| www.190810.com-体彩上海快三| www.295688.com-时时彩一天开几期| www.369083.com-投诉体彩中心电话| www.481258.com-喝彩中华方芳| www.562691.com-u9彩票网网站| www.629119.com-好的彩票软件| www.705116.com-中国体彩网现场直播| www.779002.com-彩报网资料-| www.635881.com-彩票之家是什么意思| www.313190.com-分分彩定胆期期必中| www.418198.com-盛大彩票333| www.569713.com-七彩捞腌菜怎么下载| www.657866.com-49彩票手机安卓版| www.768611.com-彩票指南报网址| www.531180.com-9彩是不是真的| www.733926.com-福彩双色球中4个号| www.827036.com-七星彩犯法吗| www.901411.com-彩票算法大揭密| www.969495.com-酷彩香港官网| 如意彩票www.833585.com| www.64107.com-足彩米客新浪博客| www.068720.com-下载福利彩票快三| www.150683.com-福彩黑彩网站| www.243600.com-福利彩票怎么选号| www.112744.com-安徽彩票15选5| www.016720.com-彩之云骗局-| www.4684.vip-彩票去哪里买比较好| www.45028.com-福彩能在微信上买吗| www.314485.com-足彩老盘任九| www.06vr.com-儿童彩铅简笔画| www.07477.com-中国彩票客户端| www.75986.cc-七号彩票邀请码| www.3534.vip-送彩金导航栏| www.821248.com-七星彩新浪开奖直播| www.910817.com-香港赢彩网-| www.974214.com-快3网彩票-| www.123895.com-同乐彩票平台安全吗| www.693718.com-吉林快三挂-| www.98vx.com-广西快三计划网站| www.4528.biz-体彩第19027期| www.963423.com-澳客网彩票| www.ji4.cc-北京快三前三直| www.884848.com-唐龙说彩是真的吗| www.974502.com-体彩大乐透下载| www.gr56.com-幸运快三开奖| www.67pr.com-七乐彩尾数分布图| www.346360.com-彩票走势图时时彩| www.785013.com-乐优彩票ios| www.888235.com-彩票137网站| www.965343.com-体育彩票多少个数字| www.cp0770.com-内蒙快三助手| www.yc07.com-派彩电子走势图免费| www.81yg.com-竞彩足球不好买| www.0429.cn-肌肉同志彩漫| www.9062.biz-福建11选5黑彩| www.68996.cc-乐盈彩票是黑平台吗| www.027763.com-彩票内部人员透露| www.108639.com-彩票输了无力还| www.179054.com-福彩三地走势图| www.253838.com-58彩票手机安卓版| www.318606.com-七星彩口诀与技巧| www.45lh.com-苏氏彩画-| www.5219.net-体彩彩票下载| www.52182.cc-赢彩吧主页-| www.004001.com-大庆彩票中奖| www.216262.com-足球彩票玩法| www.317085.com-黑龙江时时彩首页| www.7718.in-彩318平台-| www.8346.biz-局王版七星彩| www.165015.com-彩票012路走势图| www.723229.com-江苏彩票中奖| www.842358.com-福彩公益金项目| www.916252.com-中国足彩计算器| www.kf91.com-彩票中奖真人| www.0zs.cc-红彩网络直播吃饭| www.1868.vip-q彩的邀请码是多少| www.335979.com-体育彩票是怎么买的| www.868178.com-体彩七星彩跨度| www.996706.com-龙江体彩票-| www.db14.com-彩票店做私庄犯法吗| www.zb23.com-五福彩票app安卓| www.30kl.com-昨天晚上福彩出什么| www.703448.com-福利彩票湖南| www.778901.com-下载旺彩吧-| www.846434.com-福彩3d如何领奖| www.904798.com-福州南到福彩中心| www.958390.com-永信218彩票| 易彩集团www.25688j.com| www.07262.com-天津体彩app软件| www.004747.com-凤凰购彩平台app| www.065408.com-网易彩票被骗| www.126067.com-重庆福彩手机报下载| www.964610.com-博通彩票网站| www.3090.cm-七乐彩直播开奖结果| www.168514.com-湖北快三今日开奖| www.293983.com-买体彩大乐透| www.376969.com-彩票行业前景好| www.923504.com-正规彩票店买私彩| 盛大彩票www.an966.com| www.ih60.com-中国体育彩票竞猜吧| www.m65.cc-干体育彩票赚钱吗| www.52lv.com-江苏丰彩保温| www.33529.com-双色球专家说彩视频| www.457627.com-恒彩是不黑平台| www.539841.com-买国彩真的挣钱吗| www.605544.com-福逮体彩网开奖查询| www.669510.com-彩凤双飞的的意思| www.739677.com-快乐三彩票-| www.799760.com-送彩金的彩票手机版| 全民汇彩票www.52303b.com| www.jo73.com-一通快三赌博案| www.p83.org-提现正常的彩票网站| www.06044.com-宁夏快三app| www.085119.com-福彩三天计划| www.356946.com-朋友送的彩票中奖了| www.426367.com-福彩全部藏机图汇总| www.2396.cm-苹果彩票吧-| www.15133.com-生肖彩开奖现场直播| www.172975.com-新吉林快三走势图| www.321036.com-新3d彩票骗人吗| www.392838.com-派彩洗面奶代言人| www.43dm.com-彩色地坪施工| www.5782.xyz-亚上彩游戏官网| www.24241.cc-大发彩票是否合法| www.71335.cc-谁能制作快三走势图| www.101312.com-天天福彩官网| www.289901.com-深圳快乐彩走势图表|