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天

知道了
百盈PK10 www.127382.com-日彩网怎么玩不会亏| www.692126.com-高频彩计划在线| www.480007.com-七星彩奖结果| www.770479.com-时时彩每天几点停售| www.962535.com-六开彩开奖结果走| www.ku39.com-福彩快三软件网站| www.70708.cc-开发一个彩票app| www.182221.com-广西福利彩票快3| www.008360.com-泰安体彩中奖新闻| www.110936.com-彩票开奖信息下载| www.207844.com-所有彩票图片| www.045792.com-幸运彩开奖-| www.120031.com-腾讯五分彩靠谱吗| www.690555.com-赢钱彩网址-| www.89652.com-怎样玩幸运快三| www.112636.com-福利彩票快十| www.282683.com-9彩彩票官网| www.266650.com-河北快三技巧选号| www.75dj.cc-彩之家彩票预测网站| www.2395.vip-新西兰彩票官网| www.07101.com-北京28彩-| www.56697.cc-心赢彩票-| www.987861.com-福彩29选7走势图| www.gy05.com-今天百盈快三走势图| www.t13.vip-永诚彩票-| www.91ib.com-h辉煌彩票用户登录| www.974193.com-一分快三提前开奖| www.cp982.com-福建快三遗漏| www.76186.com-温州市体育彩票店| www.281891.com-浙江体彩61-| www.fd01.com-快三彩票加盟条件| www.6cq.cc-中彩网三地字谜总汇| www.ty86.com-竞彩足球理论上稳赚| www.70yh.com-重时时彩五星定位胆| www.2503.net-彩票开奖对比器| www.8455.in-福彩3d11和值| www.140058.com-彩票c66软件| www.sx70.com-福彩三d开奖视频| www.416770.com-开封彩票店-| www.562069.com-鸿彩主播小雪| www.709658.com-借钱买彩票算诈骗吗| www.860868.com-美国好彩烟价格| www.964268.com-河北福彩快乐3历史| www.48gf.com-彩票软件推广哪家好| www.637652.com-网上能买3的彩票吗| www.711993.com-彩礼和嫁妆的比例| www.795091.com-至尊彩官网-| www.872522.com-天天快三开奖| www.984845.com-彩票网对刷被风控| www.jb08.cc-幸运快三计划总站| 500彩票www.607256.com| www.po22.com-福彩3d新彩网| www.34vl.com-七星彩彩开七奖结果| www.128729.com-福彩刮刮卡图片| www.414766.com-七彩建盏为啥七彩| www.434777.com-乾坤彩票-| www.554327.com-彩票术语胆-| www.126841.com-豪门彩票-| www.277141.com-体彩七星彩中三个| www.025054.com-彩富网免资料大全| www.691315.com-烟台体彩中心地址| www.911502.com-铁公鸡彩票奖表下载| 发彩www.50732u.com| www.8691.com-彩票開獎查詢結果| www.79004.com-8g881彩票-| www.020702.com-二个彩票平台对刷| www.662141.com-竞彩中5800万| www.805403.com-七色彩开奖结果规则| www.881335.com-彩票分析师合法吗| www.71xg.com-240彩票-| www.157222.com-竞彩单场为什么关闭| www.062272.com-彩票游戏下载| www.19274.com-麒麟彩票骗局手机版| www.7089.net-武康七彩假日宾馆| www.540034.com-休闲快三第三套分解| www.625053.com-彩票平台话术| www.697625.com-福彩中心清明放假吗| www.03613.com-七星彩靠谱吗| www.65665.com-南方双彩嘻嘻3d| www.cp490.com-福建快三开奖结果| www.432888.cc-幻彩官网-| www.303673.com-鑫彩网能提现吗| www.14wd.com-体育彩票是什么意思| www.1000.gg-爱彩票网官方网站| www.518930.com-竞彩足球点球算不算| www.715812.com-306cc彩票网| www.916835.com-彩票33被骗-| 亚洲彩www.68568m.com| www.295631.com-福彩票快3开奖公告| www.15766.com-华夏福彩哪里下载| www.mg6.com-人人中彩票官网| www.039967.com-怎么下载吉林快三| www.500407.com-英国五分彩吧| www.219708.com-中国彩吧更懂| www.745022.com-六禾彩开奖结果资料| www.845866.com-福彩分几种-| www.936174.com-够力七星彩本地应用| 乐彩网www.3416h.com| www.166483.com-福建今日快三| www.656919.com-国内官网正规彩票| www.731279.com-福盈门彩票-| www.811556.com-优的足球彩票| www.189545.com-广西福彩官网| www.cai660.com-百盈快三技巧| www.cp085.com-喜乐彩开奖号码信息| www.rm05.com-黑彩提前知道开奖号| www.30yt.com-彩虹云主机官网| www.0514.name-体彩7位数玩法介绍| www.5914.xyz-彩礼一般给多少| www.02127.com-彩经彩票网好不好| www.057417.com-澳门生肖彩游戏软件| www.fj81.com-湖北快三专家推荐| www.8472.top-m5彩票登录平台| www.992000.com-时时彩组选包胆玩法| www.yv8.cc-新手买彩票中奖| www.oc43.com-体彩竞猜直播| www.515422.com-李永志彩票-| www.098522.com-国彩网址-| www.193176.com-快三玩法中奖多少钱| www.263208.com-河北保定快三走势图| www.111164.com-河北快三购买平台| www.127085.com-彩铅画图片简单| www.97ih.com-人生是不是该有彩排| www.75398.com-699彩票是骗局吗| www.4119.biz-彩虹电视机-| www.495079.com-深圳博彩app开发| www.730072.com-腾讯的彩票软件天天| www.001995.com-买彩票大小技巧| www.802183.com-延吉彩票站出兑| www.112830.com-贵阳快三开奖结果| www.215200.cc-福利彩票有哪些彩种| www.574500.com-广西电信彩铃| www.71699.cc-福彩3d今天开机号| www.900429.com-赢彩app下载| 彩世界www.99788l.com| www.3887.cc-招财猫彩票软件| www.9284.org-国乐彩彩票骗局| www.055907.com-七乐彩中奖规则图片| www.840885.com-福彩连环夺宝手机版| www.344184.com-彩神软件合法吗| www.802768.com-连中彩票旧版下载| www.881953.com-用01彩票做兼职| www.947394.com-福彩七加二怎么选| www.995980.com-足彩直通车-| www.ig7.com-中国体育彩票下载| www.pw30.com-彩票砍龙是什么意思| www.v10.me-中·国彩吧-| www.690352.com-码彩走势-| www.60990.com-聚鑫乐彩是什么意思| www.99487.com-hk百彩网大全| www.wm1.com-福彩3d交流讨论区| www.664500.com-荷花儿彩铅素描图片| www.731322.com-完美彩票网站| www.797183.com-竞彩跟单计划| www.858993.com-周三什么彩票开奖| www.903881.com-app彩票租赁| www.952719.com-彩票任三开奖结果| www.986346.com-彩票助手吧-| www.cai3374.com内蒙快三中奖| www.id69.com-江苏快三平台登录| www.422536.com-彩票技术书-| www.19533.com-周奖金彩票-| www.176815.com-福彩快3规则| www.253577.com-彩之家下载安装|