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.346648.com-七彩票开奖-| www.15240.cc-比较稳的彩票客户端| www.343475.com-彩票试玩软件| www.841319.com-彩妆蛋怎么清洗| www.948852.com-广东体育彩11选5| www.3ft.com-时时彩被黑过的平台| www.846270.com-竞彩统计概率| www.536525.com-美国彩票网中文| www.624122.com-常德福彩中心| www.700079.cc-中国五百彩票网| www.654116.com-福彩双色球红球数字| www.733272.com-上海福利彩票兑换| www.823348.com-铝彩板-| www.021155.com-说彩-| www.298258.com-上海快三最多连几龙| www.y17.com-国际彩票网站有哪些| www.4yr.com-三d胆码彩易网| www.329062.com-免费彩金不限id| www.962941.com-澳洲时时彩全天计划| www.dr5.com-今日快三走势图江苏| www.sb02.com-体彩双胆预测| www.30lj.com-福彩昨天出奖号| www.85pm.com-盈彩人工计划| www.19fq.com-大发时彩开奖记录| www.104.cn-13亿彩票下载安装| www.5386.vip-彩票777网页| www.691277.com-河南福彩跑马| www.777628.com-福彩双色球复式预测| www.855686.com-福建体彩31选| www.074852.com-手机里买彩票怎么卖| www.056888.cc-博通彩票app| 500彩票www.50064x.com| www.766135.com-04彩票app-| www.61663.com-福利彩票高管忏悔| www.026502.com-福彩一定牛彩票| www.65yf.com-湖北体彩中心新地址| www.235316.com-陕西体彩-| www.963098.com-江苏福彩彩票| www.yt9.com-河北快3彩票| www.823770.com-三彩折扣店是正品吗| www.980491.com-梦想彩票站苹果版| www.900609.com-粤淘彩票是真的吗| www.980684.com-77彩票可信吗| www.ij2.com-快乐彩走势图查询| www.139481.com-彩票留存率-| www.093333.com-彩色沥青平米造价| www.227543.com-彩票和值技巧大全| www.1615.online内蒙体彩官网| www.692390.com-代理平台彩票| www.817224.com-快三今日预测江苏| www.923828.com-彩票cp平台-| 快彩在线www.2632k.com| www.zm67.com-彩神app合法吗| www.384005.com-彩官家4.0安卓版| www.699609.com-瑞彩祥云幸运快3群| www.293908.com-浙江福利彩票官网| www.390092.com-多少注彩票一个亿| www.522942.com-1888玩彩票-| www.591247.com-竞彩保本打法| www.222094.com-爱彩乐彩票靠谱吗| www.415.net-网上买彩票输了想死| www.6395.cc-春秋彩票安卓下载| www.xd2.com-青海福彩下载| www.0253.cm-大发快三玩法视频| www.39844.com-彩八苹果怎么下载| www.87696.com-彩论坛首页高手| www.201326.com-七星彩技巧口诀| www.60145.com-彩票二等奖多少钱| www.651495.com-稳赚不赔的玩彩方法| www.930046.com-体彩排列3基本走式| www.540411.com-迪士尼彩乐园官网| www.622272.com-五福彩票是真的吗| www.982199.com-中国福利彩票字谜| www.65tq.com-襄阳体彩在哪里兑奖| www.250.name-双色球彩票多久一期| www.77630.com-彩客彩票手机版下载| www.602705.com-彩虹六号直播解禁| www.699358.com-时时彩北京塞车官网| www.8410.vip-快三猜一个号赔率| www.057957.com-3d银海彩报第一版| www.3753.biz-彩票预测神器安卓版| www.9412.xyz-牛彩3d谜汇总图| www.654749.com-东方彩靠谱吗| www.36896.com-南京市福利彩票| www.192806.com-快三河北开奖结果| www.2461.cc-彩双色球开奖结果| www.077921.com-够力七星彩奖表图| www.183721.com-中国福彩开奖查询| www.266941.com-福彩快三和值奖金| www.344545.com-乐彩网专家-| www.444181.com-最棒的彩票软件下载| www.538260.com-宝利彩票平台下载| www.779171.com-重庆时时彩2018| www.605193.com-在彩票网上中奖| www.712799.com-7星彩开奖直播现场| www.820106.com-农村天价彩礼谁来管| www.911381.com-湖北快三选号图| www.996456.com-七星彩模拟机选一注| www.cs54.com-5彩票app-| www.6630.vip-彩九下载-| www.n88.cc-竞彩交税吗-| www.0307.in-凤凰彩票计划团队| www.117392.com-体彩app停售多久| www.203319.com-内蒙快三投注技巧| www.yt0.cc-快乐彩票下载| www.694.net-美人鱼彩票礼金| www.9611.wang-中国彩票造假事件| www.025175.com-智慧彩票预测主页| www.913786.com-福彩双色球领奖规则| www.3733.site-彩票在线平台登录| www.01193.com-澳彩足球动态| www.86859.com-山西大清快三走势| www.195500.cc-重庆时时采彩开奖| www.87qe.com-鼎丰彩票-| www.951851.com-幸运快三彩下载| www.690701.com-彩票购手机客户端| www.781147.com-彩票飞鱼走势研究| www.845338.com-中国体育彩票合法吗| www.906107.com-国模大尺度彩炮图| www.967993.com-合买彩票的网站| 财神网www.29277j.com| www.df27.com-一分彩网站有哪些| www.qi00.com-中原彩票平台| www.4rk.com-福彩快三太假| www.18160.com-湖南省福利彩票网| www.53be.com-牛票票彩票app| www.578030.com-彩票微信代购违法吗| www.555444.com-甘肃快三顺子| www.175937.com-快三彩票开挂| www.996845.com-每次都机选一注彩票| www.tx19.cc-金准彩票高手| www.4999.com-可以网上购彩票| www.073700.com-福彩彩票开奖视频| www.211630.com-k彩手机版-| www.278855.com-众彩彩票骗局揭秘| www.338660.com-福彩案子-| www.919386.com-体育彩票店有假的吗| www.19831.cc-网络彩票代理合法吗| www.129637.com-香开码结果开奖彩娃| www.53vx.com-奔腾彩票平台| www.30159.com-河南时时彩骗局揭秘| www.025497.com-网彩有赚钱的吗| www.0596.bid-福利彩票快3的玩法| www.974070.com-吉林新快三开奘结果| www.cp8696.com-谁有快三彩票微信群| www.71ds.cc-金巴黎彩票手机注册| www.025417.com-时彩在线追号计划| www.629387.com-如意彩怎么样| www.791404.com-排列三走势囹彩经网| www.939013.com-612彩票-| www.cy16.com-彩票app制作| www.24en.com-彩贴怎么做-| www.127073.com-人物彩铅画大全| www.849055.com-汪汪时时彩旧| www.895538.com-福彩走势图百度彩票| www.957342.com-全天132彩票计划| www.993806.com-胜负彩中3个| www.ja9.cc-今天时时乐彩票| www.hm40.com-福利彩票生肖| www.632081.com-发现彩票的中奖规律| www.406889.com-温州福彩兑奖中心| www.th04.com-能跳快三的歌曲| www.7744.biz-皇室彩票是真的吗| www.583703.com-彩票88网-|