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.649876.com-天牛图库综合彩报| www.610729.com-凤凰错阿彩-| www.713826.com-快三最大的奖项| www.806758.com-七星彩大赢家走势图| www.889730.com-旭辉研彩软件手机版| www.968146.com-微信中华彩破案| www.cai51.com-江西福彩快三| www.f17.cc-福建快三机选号| www.962145.com-彩涂钢板厂-| www.cb5.com-福彩作弊视频| www.tj74.com-怎么做彩票网站| www.10to.com-新彩与粉彩的区别| www.96211.cc-体彩公益口号| www.076225.com-达人彩票靠谱么| www.949722.com-极速3d彩票贴吧| www.cp811.cc-快三网上直营代理| www.78991.cc-多乐彩51期-| www.684685.com-福彩3d彩吧第一版| www.813753.com-大连体育彩票微信群| www.720711.com-七星彩中奖格| www.818767.com-冮苏快3彩-| www.922780.com-福彩能过户吗| www.997404.com-福彩快乐二十分| www.406640.com-济南结婚彩礼多少钱| www.514822.com-网上七星彩合法吗| www.596103.com-甘肃快三33期| www.670821.com-彩色的中国资料| www.751296.com-体育彩票投注站地址| www.823177.com-我附近的福利彩票站| www.889157.com-易彩网彩票3d| www.954662.com-福彩3d规则说明| 中国福利彩票www.08588n.com| www.514005.com-彩钢围挡构造| www.616418.com-竞彩半全场全包盈利| www.4238.in-七彩云mz网-| www.09015.com-网上买竞彩足球彩票| www.58289.cc-彩乐网app-| www.857543.com-唯彩会app-| www.955828.com-仲博彩票软件下载| 600彩票www.336766.com| www.jp79.com-万豪福彩下载安装| www.1ti.com-福彩门户资料大全i| www.730661.com-混合关竞彩计算器| www.861286.com-江苏体彩任选3| www.947354.com-制作彩票软件数据| www.fc91.com-七星彩出奖结果今天| www.783058.com-go彩票网上平台| www.147121.com-辽宁快三每天多少期| www.326715.com-乐彩论坛排三170| www.869072.com-七星彩杀号澳客网| www.936198.com-时时彩五星走图| www.984620.com-奖多多酷彩吧| www.pp23.com-河南福利彩票官网| www.9506.top-百博七星彩投注网址| www.90913.com-福利彩票怎么自选| www.529515.com-香港特区彩票论坛| www.712234.com-因为彩礼-| www.29ef.com-体彩三串一什么意思| www.2384.top-搜神传好彩妹| www.844161.com-福彩中心改制吗| www.940856.com-彩票网投套利| www.997360.com-彩八仙彩票-| www.es62.com-超高反水彩票平台| www.xl26.com-鑫彩网是正规平台吗| www.12nw.com-幸运彩票网网址| www.75fz.com-七星彩领奖日期| www.693923.com-怎么创建快三网站| www.786512.com-福彩软件真的假的| www.862377.com-公益福彩彩种| www.926962.com-韩国金山快三走势图| www.980495.com-百盈快三哪个软件好| www.vo.cc-北京大发快三网址| www.073407.com-众赢彩票可以买吗| www.350007.com-彩色笔画-| www.425318.com-明星彩票注册账户| www.516325.com-机选5注彩票| www.388737.com-天天彩选4中奖金额| www.638736.com-足球彩票交流群| www.237705.com-北京快三输-| www.34023.com-订阅彩票手机报| www.2222.bid-微彩app66vc| www.7281.top-画彩虹的图画小学| www.8590.cc-点点中彩票怎么样| www.307614.com-35期彩票开奖结果| www.127430.com-日彩网-| www.182854.com-彩票小狂人看胆| www.690336.com-福彩3d多久开一次| www.766387.com-3d福彩藏机图今天| www.835482.com-广东彩王第32期| www.899117.com-928彩票官方网站| www.960640.com-时时彩注册送18元| 百姓彩票www.bxcp3.com| www.374821.com-怎样注册网上买彩| www.906101.com-彩票购买时间| www.972841.com-彩客网比分直播版| www.cai2811.com內蒙古快三-| www.mo02.com-快乐彩玩法规则| www.07536.com-澳彩盘大讲堂| www.239113.com-刷彩是做什么| www.072206.com-现在开彩票店| www.772913.com-单投滚球彩票| www.845954.com-海南私彩合法吗| www.899271.com-快三大小单双随机| www.954697.com-大发快三作弊视频| www.996853.com-双色球机选新浪彩票| www.yt1.com-体彩排列5中奖说明| www.qp13.cc-pc彩票到骗局| www.303839.com-福彩3d返奖率纪录| www.00734.cc-微信北京快三走势图| www.87156.com-今日彩票中奖号码是| www.149564.com-全能中彩app| www.229649.com-内蒙快三最大遗漏值| www.886624.com-彩网cai5-| www.ch90.com-中国福彩-| www.49341.com-阿理彩票登录网址| www.363490.com-赌彩票的软件| www.211931.com-哪个购彩软件可靠| www.751707.com-彩票出号易学原理| www.331574.com-乐彩网注册官网| www.64ij.com-竞彩中奖大单| www.5176.cc-韩国2分彩-| www.5897.top-亿购彩app-| www.30730.com-彩票查询3d今天| www.949597.com-福利彩票手机助手| 融彩网www.rcw321.com| www.748048.com-谁有中彩网的邀请码| www.830353.com-体育彩票在线机选| www.891946.com-金日彩票-| www.953275.com-竞彩网篮球开奖结果| 梦想彩票www.33112d.com| www.89585.cc-577彩票网的资料| www.731349.com-595hcc易彩-| www.854635.com-大乐透开门彩杀号| www.912424.com-欢乐彩主播-| www.974363.com-福彩3d综合分布图| www.696400.com-竞彩资讯专家| www.773340.com-棋牌送彩金-| www.887579.com-106官方彩票网| www.976185.com-河南新乡娶媳妇彩礼| www.im88.com-彩39-| www.r16.shop-彩票顺口溜怎么说| www.816391.com-一分钟开大小是什彩| www.922224.com-大中华彩票-| www.984093.com-七星彩论坛2027| www.13pf.com-好彩丨开奖-| www.320232.com-百宝彩电子走势| www.385315.com-湖北七星彩开奖结果| www.36353.com-福彩幸运28怎么样| www.1mw.com-体彩屋是什么意思| www.1884.vip-四场进球彩对阵单| www.11780.com-彩神v违法吗| www.69011.com-彩票66下载-| www.99798.com-体育彩票怎样打票| www.101581.com-噢克彩票网-| www.226923.com-最快的彩票开奖源| www.ge73.com-彩库宝典下载安装| www.48568.cc-福彩快三官方直营网| www.0398.tv-三三彩票网站| www.355467.com-福彩3d今晚开机号| www.485877.com-手游彩票网址| www.553631.com-竞彩绝巧-| www.607048.com-彩票写好纸-| www.664155.com-工商银行彩票定投| www.718929.com-天津十分彩软件下载|