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天

知道了
彩01彩票 www.074730.com-彩富网资料-| www.194456.com-彩43app-| www.273815.com-上海快三预测一定牛| www.500515.com-高频彩客户端| www.583648.com-频彩网址-| www.665838.com-七星彩中奖地查询| www.756269.com-全民彩票原装版| www.906935.com-足球体彩规则| www.971714.com-河内2分彩-| www.hg36.com-佰万彩票网赚| www.c13.cc-高频彩快三计划软件| www.42lj.com-唯彩会下载2016| www.878.red-新浪百度彩票走势图| www.5816.me-竞彩购买-| www.17639.cc-体彩足彩竞猜14| www.66893.com-珠海彩店转让| www.090816.com-南国彩票论l坛| www.165884.com-蜀彩宝app下载| www.270080.com-577彩票官方网站| www.365899.cc-先学线描还是彩铅好| www.469799.com-赌足彩输钱-| www.562377.com-体彩排五的开奖结果| www.639510.com-体彩装修图-| www.770551.com-七彩阳光体操音乐| www.869110.com-七星彩包码稳赚法| www.954424.com-通博彩票网站登录| 8号彩票www.81520f.com| www.hx34.com-福彩3d图谜总汇| www.d56.cc-ai足彩-| www.42gq.com-3d唯彩看球预测| www.690.date-竞彩篮球推单微信| www.5191.hk-有飞鱼体彩么| www.09691.com-3d山东福彩沙龙| www.57028.com-彩播合集-| www.081660.com-彩票几个数字| www.155470.com-彩票分析大师下载| www.262644.com-到底有没有天津快三| www.357458.com-七乐彩走势图连标线| www.452611.com-彩c78-| www.552952.com-福利彩票一般买几注| www.666078.com-海南彩票万字表格式| www.749356.com-福彩官方购彩app| www.826728.com-信达网络彩票| www.900762.com-久游彩票坑人吗| www.969459.com-欢乐彩app骗局| www.wj06.com-今日福彩开奖| www.17tu.com-彩视打不开-| www.150.in-富鱼彩票网-| www.3956.cn-体彩销售网点| www.9621.biz-超级大乐透彩经网| www.65332.com-青海福彩投注站| www.026594.com-辉煌彩票是真的吗| www.105313.com-福彩p62开奖号| www.175820.com-广西福彩快3走势图| www.286128.com-下载内蒙福彩| www.373150.com-九八彩票最新网站| www.477071.com-下载彩神通-| www.560405.com-非凡彩票可信吗| www.633757.com-虎都收购的悦心亿彩| www.708485.com-大发时时彩后二技巧| www.788272.com-彩票平台彩金大放送| www.866037.com-腾讯彩票下载app| www.933903.com-彩票托成功后| www.991173.com-福彩121-| www.bn8.com-好彩香烟价格表图| www.ou60.com-福彩3b开奖结果| www.00uk.com-3d彩票分几种类型| www.73ba.com-体彩排列三杀尾杀跨| www.1388.in-福彩南方双彩网| www.9468.loan-福龙彩票是正规的么| www.50550.com-反水彩票-| www.94918.com-卡姿兰的彩妆特点| www.058802.com-365彩票网官网| www.163207.com-彩票基本走势图表| www.253399.com-好彩妹口诀-| www.325344.com-精彩十分推荐号码| www.397348.com-掌上彩票专业版| www.562761.com-有人让我买彩票网易| www.622679.com-3d彩图今天-| www.681736.com-豪彩平台-| www.761703.com-时时彩简单玩法| www.899669.com-c?81彩-| www.966234.com-江苏快三遗漏推存| 鑫亿彩www.613069.com| www.ii56.com-福彩3d谜语汇总| www.zu27.com-分分彩选号工具| www.26mk.com-中囤足球彩票网| www.0353.pw-彩票跨度投注| www.6656.cn-分分彩九码必中公式| www.17391.com-足彩比分推荐预测| www.58773.cc-福彩3d字谜新彩网| www.029823.com-彩票助赢软件vip| www.104637.com-uu快三是什么| www.168408.com-北京福彩快三形态图| www.274545.com-腾讯10分彩查询| www.358940.com-体彩大乐透公式计算| www.443211.com-今天双彩球号码| www.531622.com-手绘日落彩铅画| www.632279.com-时彩技巧-| www.698124.com-浙江体彩兑-| www.771365.cc-彩虹6号手游| www.868167.com-老时彩360-| www.962874.com-广东十一选主彩乐乐| 中华彩票www.9149p.com| www.dk88.com-广州福彩快三| www.tt75.cc-福彩双色球合买| www.93.me-红牛福彩下载安装| www.64rm.com-2017足彩交流群| www.0314.win-釉上彩瓷器值多少钱| www.9528.bid-4个数字彩票| www.46690.com-彩票利用平台刷反水| www.88762.com-体彩排列三胆码分析| www.037021.com-内蒙古彩票app| www.137050.com-cai彩788-| www.206788.com-黑彩彩票平台| www.272338.com-快三彩票属于赌博吗| www.445027.com-彩经网出号过滤缩水| www.538937.com-美赢彩票-| www.628789.com-发彩网彩票杀号定胆| www.693683.com-头奖彩票恢复| www.766529.com-彩塔是干什么的| www.870003.com-祝福利彩票快三| www.937076.com-七乐彩中奖等级杏绚| www.980711.com-武汉体彩旗舰店| www.el04.com-体彩排列五开奖结杲| www.uw48.com-福彩网址-| www.00kx.cc-彩虹的人生励志句子| www.65ur.com-大同彩票站-| www.0179.cn-86552国彩平台| www.8639.cn-百宝彩11选五| www.36376.cc-福利彩票有多少号码| www.77500.com-黑龙江福彩发行中心| www.023872.com-你是彩迷吗-| www.088028.com-彩票699-| www.141844.com-二分彩官网-| www.209066.com-天天彩下载-| www.272983.com-体育彩票有几种玩法| www.423491.com-七乐彩周一走势| www.513510.com-三分钟时时彩技巧| www.576740.com-彩票app送28| www.637881.com-上海最近中奖彩票| www.755861.com-手机贴彩膜教程苹果| www.836396.com-江苏快三彩点申请| www.896660.com-我要快三走势图| www.958047.com-福彩3d应该咋样买| 网易彩票www.074wy.com| www.ar02.com-手机打彩票-| www.pr80.com-掌上彩-| www.01gj.com-彩票98-| www.59ka.cc-彩钢板安装厚度| www.742.in-重庆彩票有哪些彩| www.3968.xyz-083彩票下载| www.8595.org-ok精彩朱正廷| www.59356.cc-nba篮彩怎么买| www.006600.cc-天津快三彩票| www.063304.com-加盟体彩要多少钱| www.143995.com-褔彩3d丹东全图| www.209340.com-彩票开奖快3| www.269440.com-三分彩玩法-| www.365220.com-彩票不能提现骗局| www.439565.com-玩彩犯法吗-| www.518901.com-体育彩票官方客服| www.577352.com-网上彩票拿代理加盟| www.636625.com-易算彩43-|