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.ju34.com-中彩娱乐-| www.908713.com-淘彩票网址-| www.832905.com-788彩票网正规吗| www.oz5.com-福彩双色球35期| www.288393.com-玩大发快三赢钱吗| www.397114.com-云南快三骗局| www.974300.com-网购彩票是骗局吗| www.fc27.com-破解彩票中大奖软件| www.016036.com-彩票开奖查寻| www.329236.com-彩8彩票官网下载| www.429670.com-江苏丰彩-| www.130548.com-七星彩图规最新| www.220776.com-北京快三怎么下载| www.316685.com-体彩微信图标| www.385063.com-手机彩票源码| www.507005.com-体彩哪台开奖直播| www.086004.com-麒麟彩票提现不了| www.947476.com-福彩3d在线过滤器| 福彩www.15355p.com| www.dn33.com-有买彩票的老师吗| www.uk38.com-彩客彩票合法吗| www.13sc.com-竞彩足球彩票计算器| www.17399.cc-足彩比分预测最准| www.535932.com-很好的彩票选择号码| www.027914.com-足彩胆拖规则| www.4237.vip-七彩视界破解版| www.yt9.com-河北快3彩票| www.339749.com-彩吧库图55125| www.851556.com-七乐彩中奖计算| www.919711.com-彩票系统定制| www.973948.com-头条彩票app下载| www.cai4966.com甘肃福彩快3开奖号| www.xr40.com-新人怎么买彩票| www.501601.com-手机投彩是真的假的| www.04149.com-麒麟彩票可靠吗| www.87177.cc-银川新城福彩转让| www.255989.com-河南幸运彩跑马图| www.688877.cc-大资本彩票官方网站| www.285964.com-亚洲彩票是干嘛的| www.008671.com-彩票造假最新证据| www.551217.com-苏州竞猜快三查询| www.9957.in-家彩网独胆双胆预测| 凤凰彩票www.5091n.com| www.778584.com-彩票彩六下载| www.568420.com-微购彩是不是正规| www.664160.com-轩辕时时彩源码| www.757378.com-体育彩票任选九规则| www.851833.com-时时彩概率分析软件| www.923679.com-秒速快三规律怎么找| www.984825.com-500时时彩登录| www.ev30.com-快三看号技巧| www.ym03.com-伊布都和三彩| www.000195.com-浙江体彩手机下载| www.36gt.com-彩票中奖图片最新款| www.39327.cc-七星彩开奖预测频道| www.198641.com-大发彩票手机| www.020601.com-江苏福彩抉3一定牛| www.87849.com-彩票顺龙第几期跟| www.190771.com-快三输了怎么上岸| www.99zw.cc-百度中怎样找到彩票| www.494153.com-体育彩票中了一个数| www.631337.com-好彩头国际娱乐平台| www.718972.com-彩虹是怎样形成的| www.795723.com-实体竞彩店现实| www.882840.com-大佬彩票-| www.972461.com-布衣公式170彩票| www.bb9.cc-彩票大小单双技巧| www.sp51.com-彩之家平台怎么样| www.120141.com-数字型彩票博弈论| www.223430.com-顶呱刮彩票官网| www.350776.com-体彩挣钱吗-| www.2451.net-快三倍投计算器在线| www.939937.com-彩神8快三官方| www.530722.com-彩铅画作品简单| www.732311.com-福彩中奖新闻| www.856897.com-福彩3b字迷总汇| www.7662.me-福彩标志含义| www.781554.com-拉菲彩票平台转钱吗| www.fi83.com-北京快三计划大小| www.an71.com-遵义体彩-| www.n78.top-体彩最新开奖结果| www.80yk.com-大乐彩票-| www.082518.com-正规官方时时彩平台| www.260652.com-福彩在线是赌博吗| www.67708.com-为什么买彩票是赌博| www.072911.com-全民赢彩票下载| www.32866.com-中彩票开机号| www.117796.com-彩票倍投计算机| www.0375.xyz-休闲快三动作分解| www.1331.com-修改彩票站-| www.6747.cn-3d福彩技巧大全| www.9997.cc-体彩坑了多少人| www.77396.com-打彩票的软件排行| www.386056.com-兼职帮别人投注彩票| www.106430.com-华夏彩票手机客户端| www.34pg.com-七星彩有人中过吗| www.003342.com-gc彩票是-| www.872047.com-彩票中奖历史查询器| www.2799.org-都市快讯报家家好彩| www.083903.com-浙江快乐彩下载安装| www.2rm.com-彩票879靠谱吗| www.377336.com-185彩票天下| www.562740.com-高频彩会取消吗| www.648915.com-五彩椒能活几年| www.297195.com-山东彩民论坛| www.044927.com-大乐透彩神通| www.58291.cc-体彩出奖号码| www.734308.com-足彩19051媒体| www.828072.com-彩民網-| www.894507.com-福彩快3投注方法| www.965108.com-福彩网是合法的吗| 500彩票www.50054z.com| www.030032.com-优彩社区交流大厅| www.788387.com-体彩5走势图带连线| www.xx12.com-吉祥彩票下载| www.380007.com-福彩3d条件区| www.392137.com-搜孤彩票-| www.110208.com-今晚七星彩预测一注| www.514165.com-网上彩票安全吗| www.81nq.com-彩神通时时彩| www.2686.com-时时彩基础知识吧| www.u11.net-深圳福彩最新| www.16278.com-彩票人工计划客户端| www.931200.com-福彩北京快乐3开奖| www.1846.vip-中彩网彩票能提现吗| www.399.vip-乐彩网手机论坛下载| www.5656.me-高频彩票实体店| www.16239.cc-找时时彩微信私人群| www.850573.com-竞彩足球360比分| www.662052.com-靠谱的博彩-| www.007147.com-赢彩助手排3开机号| www.gy64.com-搜索728彩票| www.2301.org-天下好彩免费大全| www.16ol.com-咔咔彩票-| www.286290.com-炫乐彩票二维码| www.10bf.com-福彩几点钟封机| www.3478.vip-乐和彩开奖现奖| www.356112.com-公益体彩宣传语图片| www.97767.cc-心脏彩超正常值图片| www.360816.com-敬力七星彩开奖结果| www.py86.com-新时彩app-| www.26xq.com-体彩排五的开奖号码| www.148.me-雪山彩虹谷游记| www.aa8.com-延边福利彩票快3| www.jx45.com-河北福彩快三下载| www.zp67.com-浙江福彩快乐12| www.40wo.com-七星彩中奖几率高吗| www.128.org-多盈娱乐时时彩平台| www.2116.net-江苏掌上福彩| www.325904.com-经彩网排列五走势图| www.570101.com-伊川七彩龙都靠谱么| www.661856.com-中福时时彩官网平台| www.761004.com-足彩十四场开奖信息| www.913028.com-我去彩票站app| www.nm0.com-江苏快三选号助手| www.q77.gg-山东体彩在线骗人| www.q57.net-湖北快三加奖| www.16058.com-河北快三和值表图| www.085200.com-红旗彩票是骗人的吗| 中国福利彩票www.33588t.com| www.220950.cc-中彩网快三下载安装| www.314342.com-今日竞彩足球预测| www.333605.com-足球彩票怎么看| www.647302.com-福彩3d奖金多少钱|