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天

知道了
爱彩票 www.190652.com-彩票导师-| www.332112.com-搜索头奖彩票| www.295735.com-辽宁快三走势图查询| www.651957.com-r仁信彩票-| www.650041.com-app投彩-| www.721002.com-两元彩票走势图| www.812548.com-福彩3d技巧书| www.894860.com-天宏国际彩票真假| www.963474.com-网购足球彩票| 大赢家彩票平台www.131763.com| www.jo43.com-快三输钱了怎么回血| www.i48.cn-连红彩票app入口| www.49wv.com-网上买彩票怎么买的| www.979642.com-七天彩票网站升级| www.0960.cc-高频彩直播开奖网| www.86203.com-福彩双色球在线购买| www.134035.com-好彩2好彩3-| www.238339.com-下载手机买彩票软件| www.669500.com-买啥彩票是6个数| www.27or.com-捡彩票中502万| www.2918.cc-兰州开体彩店| www.789732.com-滚球和竞彩优劣| www.896969.com-江南彩姐大乐透预测| www.984654.com-八号彩票是不是真的| www.fw42.com-时时彩贴吧交流群| www.659678.com-彩票预测交流群| www.739437.com-竞彩足球久久彩票| www.819217.com-非你莫属彩票公式| www.886854.com-代玩彩票有什么套路| www.954837.com-瑞彩祥云客户端| 彩乐乐www.cll168.com| www.133852.com-登录好彩客官网| www.268003.com-福利彩票选号技巧| www.387767.com-天天买彩票买不了| www.196611.com-百宝彩群英会走势图| www.444661.com-福彩3d会员专家| www.81mp.com-竞彩扫盘是什么意思| www.432232.com-567彩-| www.555604.com-江苏快三顺子中多少| www.624603.com-色彩应用-| www.695960.com-福彩天地字谜| www.965515.com-双色球杀号彩乐乐| www.v16.shop-彩吧论天气网| www.1760.vip-金辉彩票网-| www.707158.com-安徽快三结构| www.695316.com-竞彩开奖结果彩客| www.817108.com-算出彩票的概率| www.856366.com-彩易3d藏机图| www.349338.com-大发彩票是什么意思| www.505003.com-参加彩排是什么意思| www.38615.cc-环彩网下载-| www.084722.com-福彩快3电视走势图| www.207588.com-彩票工具-| www.657048.com-分分彩彩票二维码| www.739310.com-吉林快三二不同| www.833920.com-无嘴好彩网上哪里买| www.902960.com-快三怎么玩儿能盈利| www.964150.com-玩彩票经验-| 500彩票www.50080b.com| www.fc48.com-打彩一天赚几万| www.78826.cc-3的彩吧分析预测| www.124589.com-高频彩票漏洞赚钱| www.840088.com-电脑彩正版八肖图| www.5100.hk-时时彩中奖号码| www.vx97.com-快三跨度走势图表| www.53lk.com-体育彩票怎么购买| www.zk84.com-体彩排列5开奖情况| www.132.live-彩玉原石图片| www.818612.com-彩乐汇手机版| www.96fq.com-福彩网时时乐| www.983356.com-佰盈彩票安全吗| www.nx51.com-福彩快三网是真的吗| www.020.website合肥市福彩中心在哪| 500万彩票www.35155f.com| www.72am.com-彩票11选5北京| www.81788.cc-吉林快三二十分钟| www.91904.com-中彩那天课文的答案| www.922782.com-人人彩票网址| www.993460.com-注册彩票送彩金| www.jq04.com-分分彩输了十万| www.78272.com-体彩大乐透168期| www.215715.com-我的彩票开奖| www.087068.com-乐福彩票平台怎样| 大赢家彩票网www.178593.com| www.011008.cc-腾讯彩票手机版| www.443560.com-福彩3d秘诀-| www.qe29.com-好彩3复式投注表| 计划网页版-福彩快三模拟摇奖器| www.8613.biz-11选5快彩软件| www.03118.com-佛说彩票-| www.203399.com-用数学破解彩票漏洞| www.295792.com-福彩呼和浩特中奖| www.719272.com-形容彩虹-| www.602511.com-鸳鸯彩票-| www.632660.com-体彩猜球玩法| www.98it.com-长春快三黑彩严打| www.381005.com-每周三开奖的彩票| www.692093.com-江苏体彩e球走势图| www.33080.cc-极速时时彩开奖器| www.153815.com-天天中彩代理| www.m47.me-彩票现在正常了吗| www.018925.com-福彩3d过滤缩水器| www.900131.com-22彩票官方平台| www.774773.com-福彩快三输钱| www.857350.com-盈彩网9369-| www.916301.com-代理全民彩票犯法吗| www.975749.com-太康13万彩礼| www.cai1686.com中国福彩快3江苏| www.883749.com-浙快乐彩最新开奖| www.855257.com-好彩网网址-| www.911534.com-湖北快三末出号统计| www.971795.com-8号彩票正规吗| www.o81.cn-服务店铺彩票| www.880683.com-体彩排列三中奖条件| www.18650.cc-八亿彩票下载安装| www.266687.com-快三彩票兼职骗局| www.353128.com-彩漂粉有毒吗| www.475155.com-时时彩无码-| www.579596.com-福彩账号-| www.697721.com-时时彩和值大小玩法| www.801210.com-富民彩票平台| www.882421.com-河内五分彩是骗局吗| www.973460.com-最美的彩虹图片| www.af11.com-手机彩票网123| www.s38.org-广西彩票官网下载| www.68nz.com-玩分分彩犯法吗| www.101387.com-江苏快三算号神器| www.166823.com-快三助手苹果版本| www.078030.com-福彩假吗-| www.233709.com-广西一分钟快三| www.5635.bid-彩民60元30注| 新盈彩www.xinyc8.com| www.043189.com-福利彩票促销语| www.770621.com-临沂七彩桥商务酒店| www.920066.com-彩软件官网-| 大赢家彩票平台www.210639.com| www.675179.com-体彩19048-| www.1nh.com-福彩萧彩网-| www.uq39.com-杏彩线路测速| www.518111.com-福利彩票开奖事件| www.671480.com-下载彩宝网-| www.763262.com-足彩外围正版网站| www.907690.com-天天彩4玩法| www.780065.com-彩铅画图片卡通| 众乐彩票www.689144.com| www.xb93.com-七星彩技巧口诀图解| www.kh04.com-玩转双色球彩友沙龙| www.37gc.com-福彩专家给双胆| www.1123.gg-竞彩交流-| www.032280.com-香港赛马派彩| www.124788.com-迷彩兔在线视频| www.7941.top-纵彩网一彩种| www.266778.com-彩七七骗局-| www.127547.com-彩6梗-| www.281409.com-登录五星彩-| www.78807.com-福彩3d解码绝密| www.k51.net-七天彩外挂-| www.51hp.com-盛大彩票官网首页| www.022161.com-极速时时采彩下载| www.080640.com-色彩三要素-| 云博彩票www.11554.cc| www.0800.wang-地球人彩票首页| www.330432.com-重庆时时彩五星计划| www.415077.com-彩46在线登录|