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.ez09.com-彩票破解-| www.06ej.com-彩浩-| www.76hp.com-造假彩票网-| www.2200.tv-红彩绘app下载| www.05027.com-优彩网怎么样| www.053443.com-有卖快三挣到钱的没| www.127006.com-卡通人物图片彩铅画| www.617704.com-长春彩票中奖新闻| www.566196.com-足彩7串21错一场| www.512273.com-简单的彩铅插画| www.599376.com-胜负彩机选中奖几率| www.683150.com-哪个平台有幸运快三| www.770542.com-招福彩3d图谜| www.864526.com-50倍彩票-| www.288523.com-澳洲分分彩害人| www.392691.com-彩票网站推广联盟| www.509755.com-国际博彩娱乐平台| www.593626.com-七彩云科技-| www.674178.com-古建彩绘高清大图| www.759819.com-彩票极速pk技巧| www.840311.com-500竞彩篮球| www.905763.com-微彩看球-| www.966231.com-亿彩网靠谱吗| www.cp302.com-福彩快三今日开奖| www.se70.com-老时时彩万位走势图| www.61av.com-福彩娱乐app| www.4622.cn-花一万元买彩票| www.31427.com-老梁揭秘彩票真相| www.249683.com-天天彩票官方下载| www.365054.com-彩的五行属性是什么| www.466246.com-福彩七乐彩停售时间| www.552930.com-今日福彩字谜新彩网| www.622385.com-深圳福彩app官网| www.017840.com-购买福彩双色球软件| www.223522.com-竞彩足球推荐| www.518850.com-米来了彩票官网| www.279442.com-亚投彩票下载安装| www.0578.wang-真实刘文彩-| www.kl31.com-新浪彩票电脑版| www.88zr.cc-日彩网主页-| www.04809.com-福彩3d五线图解| www.111786.com-彩票注册送39| www.287884.com-华夏彩票是合法的吗| www.98192.com-时时彩一分彩| www.105831.com-491彩票四不像| www.224025.com-福彩站赚钱吗| www.325926.com-彩宝彩票官方网站| www.456028.com-海南七星彩图表局王| www.570511.com-湖北快三胆码是什么| www.672596.com-中国彩吧5508| www.797738.com-99彩票-| www.916906.com-彩票33多人玩吗| GO彩www.fo64.com| www.989780.com-湖北快三号码统计表| www.jy06.com-七星彩咋玩-| www.022776.com-中国公益彩票网预测| www.131224.com-河南省的彩礼多少钱| www.794101.com-福利三分彩开奖记录| www.qx8.cc-甘肃快三精准计划| www.758101.com-福彩双色球奇葩号| www.965997.com-今晚福彩中奖号码| www.bl58.com-新利彩票软件| www.65vw.com-杭州体育彩票官方网| www.fp08.com-足球彩票比分直播| www.121284.com-彩票交流微信群名字| www.227432.com-68彩票1分快3| www.365874.cc-体彩七星彩预测推荐| www.262977.com-福彩控-| www.596953.com-甘肃快三奇偶走势图| www.275232.com-时时彩怎么计算| www.129840.com-采44彩票-| www.83fb.com-彩票亿乐平台| www.405789.com-嘉兴福利彩票双色球| www.1wj.com-花生彩票靠谱吗| www.066926.com-彩票外围-| www.351848.com-买彩票最少多少钱| www.32008.com-体彩佣金转额度| www.003584.com-甘肃快三遗漏值| www.565397.com-彩票黑客软件下载| www.912233.com-新彩计划软件| www.567849.com-中国体彩彩票的趋势| www.03824.com-中国哪些合法彩票| www.033476.com-彩站宝怎么发跟单| www.jb04.com-福彩下载手机版下载| www.879038.com-澳门快三真实性| www.0660.org-首尔1.5分彩| www.010565.com-5星彩-| www.843564.com-中国彩票的发行目的| www.04vl.com-福彩三d王滨字谜| www.217114.com-各省份快三开奖| www.0452.tv-附近的体彩网点| www.229377.com-一定牛彩票下载安装| www.381947.com-智慧彩打不开咋回事| www.874186.com-七乐彩300期走势| www.755540.com-彩友会下载安装| www.630225.com-福彩高手论坛首页| www.583662.com-时时彩后三走势| www.089.date-中国足彩官网注册| www.8882.cc-体彩竞彩容易中奖| www.904007.com-彩票app定制| www.752532.com-体彩开奖作弊视频| www.47vi.com-环彩网最新版| www.8148.top-双色球彩票站开奖| www.9758.biz-七星彩预测大师| www.441090.com-七星彩直播间| www.434986.com-彩经网前三走势| www.81799.cc-今天彩票出什么号| www.xk95.com-鑫彩网真的黑| www.017677.com-广西在线购买体彩| www.342726.com-走势图快三福建省| www.697198.com-彩票数字定律| www.38089.com-彩票稳赚神器| www.144008.com-彩运8网址-| www.655006.com-深圳彩皇电子厂| www.8598.biz-情人节收到彩票| www.339433.com-深圳福彩投诉| www.39id.com-广西彩调-| www.jd60.com-逝江快三-| www.24692.cc-鲸鱼彩铅画教程| www.261854.com-香港知名彩票论坛| www.38331.cc-星彩网下载-| www.794818.com-新彩吧图库p3| www.8278.biz-陕福彩快乐十| www.320659.com-彩神计划软件手机版| www.607506.com-广东福利彩票网官网| www.972.cm-七乐彩必出号计算| www.370197.com-买ee彩票技巧| www.902203.com-网上打黑彩怎么处罚| www.396569.com-彩虹风景图片| www.795208.com-鸿彩网不违法吗| www.sk24.com-时时彩apk-| 500彩票www.3126e.com| www.636147.com-彩虹冰激凌机| www.887567.com-人人爱彩票软件| www.496305.com-韦德彩票平台| www.775697.com-彩票新颖名字| www.690350.com-足球彩票大赢家| www.yw42.com-体彩十一选五天津| www.901524.com-黑彩奖金到底有多高| www.65921.com-大乐透彩票模拟投注| www.389260.com-快三出龙最多多少期| www.61136.cc-欢腾彩票投注平台| www.760745.com-南粤风采好彩3结果| www.231304.com-湖南省福利彩票兑| www.522809.com-彩风暴金原创50| www.981203.com-七彩冰淇淋做法| www.vz62.com-甘肃省快三遗漏号码| www.678423.com-下载送彩金棋牌娱乐| www.323260.com-乐和彩票-| www.sc89.com-新分分彩开奖结果| www.143321.com-彩票模拟器投注| www.767.pw-彩民之家四不像| www.588217.com-乐迎彩票注册网址| www.608904.com-温州体彩阳光| www.n51.shop-中福彩票网址下载| www.716183.com-福彩3d÷规律| www.520833.com-第一的彩票网站| www.190912.com-甘肃省快三走势| www.640516.com-新浪彩合法吗| www.023571.com-77彩票app下载| www.416967.com-彩虹-4无人机| www.939391.com-吉林快三走势图大全| www.77161.com-彩票领奖时间多长| www.495203.com-电玩博彩游戏|