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.0ak.com-易盈彩票合法吗| www.888461.com-下载网易彩-| www.f73.club-内蒙体彩11任选5| www.92649.com-立彩彩票软件可靠吗| www.741007.com-澳门彩票是什么玩法| www.843478.com-公益体彩下载| www.930207.com-福彩预测汇总| 彩票A8www.089e.cc| www.np04.com-手机时时彩做号器| www.6pe.com-彩票在线下单| www.76tb.com-彩票真实-| www.493396.com-公务员开彩票店| www.619732.com-德国碧彩-| www.98355.com-腾讯分分彩大小预测| www.089131.com-快三杀号专家最准确| www.193100.com-韩国快三今日走势图| www.287824.com-快三在线购买| www.376291.com-福彩3d焰午字迷| www.191757.com-快三表格-| www.358185.com-时时彩架设源码| www.527592.com-时时彩跨度和值表| www.769036.com-亚博体彩-| www.957030.com-有没有彩票挂机软件| www.yy5.cc-快三福彩是真的吗| www.x02.cn-必中彩票软件怎么样| www.131264.com-礼金和彩礼区别| www.003784.com-足彩比分分析软件| www.114808.com-3d彩圣字谜总汇| www.212189.com-河北快三稳赚技巧| www.299661.com-今日中彩最新版| www.383952.com-周六彩票-| www.490802.com-现在淘宝没有彩票| www.575342.com-体彩过年开奖时间表| www.662732.com-旺彩双色球怎么购买| www.820.vip-体育彩票专线宽带| www.373753.com-精彩足球预测| www.565313.com-福彩跑马走势图| www.203045.com-江苏快三代理| www.384368.com-彩票竞猜好运连连| www.551800.com-cp544快三计划| www.630718.com-排五彩票走势图| www.706465.com-中国福彩预测专区| www.801991.com-9928彩票注册| www.894732.com-中国彩票走势图分析| www.964023.com-彩虹的象征意义| www.cp5757.com-江苏快三免费计划| www.qr32.com-中国福彩发行原则| www.15od.com-qq彩票怎么找不到| www.711.live-时时彩后二玩法技巧| www.078087.com-安徽福彩中彩网| www.206990.com-内蒙快三牛-| www.38936.cc-中彩彩票一分合三| www.496206.com-现在足彩在哪里买| www.609993.com-u9彩票信得过吗| www.700317.com-美人鱼彩票下载| www.789224.com-竞彩老吴-| www.yx22.com-极速快三开奖网页| www.71kv.com-铜陵市体彩中心地址| www.2680.vip-6288福彩-| www.17663.com-福彩预测专家| www.85552.cc-龙胜彩票-| www.080933.com-大吉网买彩票| www.268396.com-湖南的福利彩票| www.573407.cc-933彩票最新版本| www.655573.com-吉林快三三同号单选| www.95xe.com-网易红彩能买彩票吗| www.3938.me-中彩堂开奖奖结果| www.11888.cc-七星彩一中国体彩网| www.61493.com-福彩三地连线专业版| www.9231.cn-乐彩网靠什么赚钱| www.89dw.cc-打私彩什么罪| www.5186.me-中国竞彩网亚洲杯| www.32944.com-体彩7数走图| www.662779.com-众彩程远预测| www.780065.com-彩铅画图片卡通| www.4bv.com-三d福彩直播| www.838.com-巨弘国际时时彩骗局| www.8589.site-p3杀号定胆彩宝贝| E彩堂www.43818a.com| www.cp403.com-大发快三哪里下载| www.413214.com-体彩10个30万| www.652153.com-平台彩种齐全| www.761220.com-好彩妹是什么神| www.865020.com-彩票猜单双叫什么| www.941573.com-三星彩票娱乐兼职| www.999329.com-大运彩票手机app| www.fx26.com-彩票群名-| www.yt58.com-3d彩票图解-| www.67dz.com-日本人天体彩绘图| www.101407.com-198华阳彩票官网| www.383400.com-高频彩api接口| www.555178.com-汇辰彩票下载| www.625882.com-手机快频彩-| www.689558.com-山东齐鲁风采七乐彩| www.759224.com-七乐彩对几个号有奖| www.825728.com-山西太原快三| www.881804.com-鸿运彩票登陆| www.972812.com-彩虹玫瑰存在吗| 大赢家彩票www.399160.com| www.gg85.com-陕西枫安快三| www.995492.com-竞彩bbs-| www.673068.com-七星彩中奖兑| www.28517.com-内蒙快三查询结果| www.42590.com-搜狗彩票平台网址| www.426.bid-福彩即开型彩票网售| www.785017.com-乐优彩票官方网址| www.906773.com-cp577彩票平台| www.992554.com-万家彩票网正规吗| www.im62.com-14场胜负彩票| www.03rv.com-广西快三有几种吗| www.889.in-网上时时彩违法吗| www.5599.me-彩票数字3开奖| www.526407.com-福利彩票3d的玩法| www.02483.com-3d福彩报-| www.008571.com-胜负彩19039期| www.0663.wang-中国福彩30选5| 发彩www.50732d.com| www.122805.com-天天彩票是合法的吗| www.225733.com-英国时时彩开奖结果| www.322074.com-九宫图与彩票| www.193339.com-甘肃快三打法技巧| www.36033.com-中彩开奖结果查询| www.980347.com-体彩竞猜玩法| www.90390.com-彩票摇号机作弊| www.191517.com-一分快三走势图技巧| www.306679.com-新彊福利彩票| www.379127.com-鑫彩国际是骗人的吗| www.472821.com-云南快乐十分彩票空| www.559209.com-克市红山体彩| www.620210.com-釉上彩的碗有毒吗| www.690993.com-篮球竞彩500| www.756098.com-有没有赣快三| www.825972.com-赢彩争霸app| www.816977.com-北京彩票站申请| 惠民彩票www.hm2666.com| www.xo01.com-彩票35期预测| www.29oh.com-派彩洗面奶痘立消| www.276075.com-七乐彩奖金说明| www.367637.com-哪种彩票返奖率最高| www.456149.com-海南七星彩预测码| www.8lh.com-黄金定律彩票应用| www.830318.com-福彩开奖结果23号| www.940057.com-水果农场彩票| 亚投彩票www.ya848.com| www.ek86.com-众彩网专家预测| www.29yn.com-福利彩票6十1奖池| www.hd98.cc-湖北省福利彩票快3| www.451.in-爱乐透彩票客户端| www.8022.cc-最近天津彩漏洞| www.053455.com-伯爵彩票官网| 顶级娱乐www.088185.com| www.932788.com-购彩堂注册-| www.46gs.com-周末彩票兑奖时间| www.648.in-凯斯彩棉机-| www.6711.org-下载新2彩-| www.7615.org-购彩吉时1216| www.706803.cc-博众时时彩论坛| www.5031.org-好日子聊天室体彩| www.b55.cc-江西乐彩快三| www.0520.cn-福彩3d彩票大盈家| www.8228.net-中国竞彩网彩客网| www.48403.com-258竞彩本地下载| www.816132.com-双色彩票玩法规则| www.964419.com-陕西褔彩快乐10分|