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天

知道了
9彩注册 www.2656.pw-时时彩万位杀号| www.w88.me-大华彩票app下载| www.2627.live-惠普彩色打印机产地| www.07898.com-美国彩票巨奖| www.680781.com-怎样戒掉买彩票| www.91666.cc-青海省体彩任5| www.778206.com-精彩音乐汇歌曲名单| www.307030.com-天津福彩开奖结果| www.h22.org-七星彩专家推号| www.2212.org-玩什么彩票平台赚钱| www.905733.com-竞彩世界杯-| www.990947.com-彩民社-| www.dj79.cc-彩票的种类-| www.vp07.com-湖北快三杀号| www.o77.top-体彩彩票怎么看| www.89fe.com-新浪足彩首页| www.392689.com-彩票怎么推广方式| www.809987.com-沈阳彩票自助售票机| www.ol87.com-体彩与福彩哪个靠谱| www.45dm.com-体彩六加一今晚开奖| www.51733.cc-福彩三d藏机诗汇总| www.003471.com-下一期彩票中奖号码| www.097047.com-福彩发行管理中心| www.74cg.com-3d黑彩技巧-| www.7768.biz-青岛彩票兑奖中心| www.ka64.com-福彩快三购买技巧| www.07fo.com-新彩吧藏机图正版| www.u91.website石家庄体彩转让| www.65yc.com-篮彩竞猜258| www.152975.com-北京赛车送彩金| www.628304.com-七彩国际美容华联| www.332208.com-手机版10选5彩票| www.455894.com-一张彩票引发的故事| www.584933.com-彩票网在线-| www.677714.com-三地和值南方双彩网| www.815078.com-网络彩票网站| www.739453.com-好彩网址-| www.846818.com-唯彩看球免费直播| www.189496.com-北京快三网址| www.365373.cc-v8彩票注册彩| www.021890.com-世界博彩公司网站| www.306656.com-吉祥彩票主页| www.475148.com-体彩自助彩票机官方| www.614327.com-福彩世界网站| www.598742.com-排列三黑彩玩法| www.713910.com-体彩和值最大遗漏| www.32wz.com-竞彩计算让球胜平负| www.5533.live-万彩吧彩票双色预测| www.22618.cc-福彩3d全天计划群| www.204125.com-神彩争霸网址是多少| www.ld24.com-成功彩票app下载| www.600023.com-中彩票是运气好吗| www.188277.com-内蒙古福彩-| www.306789.com-吉祥彩最新版| www.539307.com-彩票是什么原理| www.684217.com-体彩顶呱刮5元面值| www.07020.com-福彩票双色球| www.pz07.com-709彩下载-| www.38881.com-旺彩娱乐官方注册| www.029156.com-网上彩票大厅| www.114355.com-福彩3d和数值表| www.k46.cc-福彩快三今天预测号| www.274572.com-快三是假的吗| www.983305.com-中超足彩app| www.144102.com-二分彩计划软件下载| www.318958.com-江西彩票中心地址| www.237571.com-幸运快三走势图软件| www.338312.com-福彩快三历史查询| www.328344.com-甘快三一定牛预测| www.958876.com-福彩3d彩吧图迷| 福彩网www.055520.cc| www.681018.com-怎么戒掉网络彩票| www.04891.com-广东省体彩发行中心| www.85548.com-台湾彩虹-| 大赢家彩票平台www.609719.com| www.m63.org-搜索南方双彩网| www.0354.bid-快三表演视频| www.352671.com-福彩3d布衣独胆图| www.027084.com-5分彩个位怎样选号| www.328552.com-福彩杀码太湖搜| www.902408.com-查彩票开奖公告| www.974477.com-福彩d开奖号| www.0937.win-app彩掌柜-| www.67990.com-高频彩种计划| www.6238.shop-竞彩之家怎么样| www.52603.com-好彩爆珠真假| www.353516.com-九州彩票软件下载| www.383973.com-时时彩php源码| www.507889.com-传诚彩欢迎您| www.658.red-黑彩能赢吗-| www.12324.cc-竞彩足球赚钱的多吗| www.167670.com-江苏快三彩票| www.242014.com-为什么彩票破解不了| www.j46.xyz-广西福利彩票双色球| www.816056.com-福利彩票角模式倍投| www.672855.com-彩票平台会员登录| www.19311.com-彩发发安卓下载| www.cai00.cc-快三怎么玩-| www.82dp.com-体育彩票怎么下载| www.1912.me-一个人领彩票| www.7083.xyz-叮叮彩下载app| www.16177.cc-申国彩票开奖结果| www.293692.com-天津福彩中心| www.3709.cm-乐优炫彩是腾讯的| www.9440.xyz-华人彩票有什么技巧| www.196508.com-百宝彩手机版快三| www.281920.com-快乐时时彩走势图| www.079.online-湖北省七星彩| www.vs09.com-福彩3d吧百度吧| www.64lg.com-最新福彩3d黑牛图| www.4110.biz-甘肃福彩时时彩| www.650143.com-博彩是什么工作| www.751624.com-掌优彩票赚钱吗| www.834352.com-福彩3d全图总汇八| www.903194.com-彩票开奖走势图查询| www.964149.com-中彩票概率-| 福利彩票www.99677x.com| www.co95.com-河北快三玩法说明| www.rh44.com-天津彩票时时彩| www.0eb.com-任九场胜负彩预测| www.381745.com-更多精彩的恐龙视频| www.lg2.com-甘肃省快三开奖遗漏| www.220612.com-彩票稳赢秘诀| www.234.hk-快三定胆技巧秘诀| www.5946.com-体彩杀号定胆天齐网| www.34471.com-彩票代打平台| www.84599.cc-体育彩票提现要多久| www.0174.vip-彩票买大小倍投计划| www.968.red-梦秘解图七星彩| www.813623.com-银川彩票店-| www.896131.com-甘肃快三走试图今天| www.957578.com-北京福利彩票有哪些| 五星彩票www.5xch.com| www.990069.com-下载送彩金58| www.kh29.com-易彩网怎么提现| www.zw00.com-建盏七彩光-| www.69tl.com-玩彩票输了两万| www.1617.top-kk彩票邀请码| www.088228.com-澳客体彩足球强哥| www.193388.com-体彩排列3玩法| www.256262.com-福彩快3网址一分钟| www.5ka.cc-常州体彩店转让信息| www.305831.com-陕西快三开奖结果| www.694434.com-头奖彩票最新情况| www.1417.vip-皇室彩票是干什么的| www.657425.com-两元两元彩票网| www.r27.com-广西福利彩快乐十分| www.42tb.com-体彩手机里怎么查| www.41ka.com-丹东彩吧图库| www.072999.com-福利彩票十大巨奖| www.058629.com-粤彩联盟彩图| www.126355.com-五分彩个位和值| www.655255.com-七星彩私彩-| www.773285.com-彩票中奖的真实秘籍| www.906198.com-下载黑彩快三| www.978919.com-36选7好彩一预测| www.cai93.com-快三贵州-| www.kn47.com-3d杀码凤彩网| www.q50.cc-广西快三诀窍| www.668854.com-英国彩票税率是多少| www.521691.com-新浪时时彩开奖| www.663098.com-双色球论坛双彩论坛| www.783922.com-航天彩虹股吧| www.932879.com-体育彩票第一期时间|