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.78963.cc-福彩3d中奖秘籍| www.562857.com-中国福彩标志的寓意| www.254165.com-彩宝网3d遗漏统计| www.522004.com-m5彩票手机登录| www.985554.com-胆略足彩竞彩分析| www.ez66.com-快三怎么作弊| www.15811.com-华夏彩票平台下载| www.63731.com-湖北彩票预测网| www.053545.com-江西体彩快3走势图| www.125386.com-球探彩票下载| www.198972.com-今天江苏快三推荐号| www.273211.com-福彩文化理念| www.346519.com-135彩票不能提现| www.423043.com-七星彩单期走势图| www.2194.vip-彩票33赢-| www.uf2.com-安徽快三推荐| www.up61.com-福彩双色球开奖开好| www.837888.cc-岩棉彩钢板设备| www.984389.com-彩票专业开奖分析器| www.mb31.com-昨天快三走势图85| www.33vl.com-七星彩那几天有| www.3071.vip-七星彩小说txt| www.665201.com-七乐彩往期开奖查询| www.743753.com-购彩网是什么| www.812176.com-福彩3d彩涂吧| www.7632.top-二分时时采彩| www.361240.com-六冠彩票官网| www.472338.com-中国体彩体了大彩图| www.577968.com-重庆分分彩记录官网| www.653908.com-竞彩二串一推荐| www.787202.com-彩票书籍彩民商城| www.865671.com-3d福彩论坛手机版| www.930034.com-群英会彩票-| www.985180.com-竞彩足球淘汰赛平局| www.me6.cc-河北省快三推荐号码| www.2900.in-今天彩票报纸大全| www.99rf.com-江苏体育e球彩走势| www.9116.net-福利彩票第39期| www.65tw.com-湖北体彩网手机版| www.370028.com-关于彩票真假视频| www.001682.com-彩6彩票网址| www.131389.com-郑州市彩礼一般多少| www.501876.com-基诺彩有漏洞吗| www.611028.com-梦见猪彩票买几号| www.697308.com-福彩三d彩吧图库| www.800487.com-湖北快三二同号| www.909769.com-网上跟五分彩合法吗| 凤凰彩票www.77803g.com| www.l18.org-棋牌彩票大集合| www.86yc.com-彩票最近开奖号码| www.8961.loan-彩哥软件不可以用了| www.982825.com-共享彩票几年了| www.tk3.com-江西快三推荐号| www.ta59.com-彩票有二位数字的吗| www.540622.com-易彩彩民登录福地| www.618232.com-我要看体彩排列三| www.1351.tv-江苏快三开奖统计表| www.280878.com-中国竞彩网首页官方| www.414021.com-挂彩是啥子意思| www.653831.com-5分钟快三计算公试| www.781033.com-彩虹裙-| www.896350.com-彩票合买网站有| www.984032.com-99彩票能不能玩| www.nc99.cc-家彩开奖-| www.681.cc-百事彩票登录| www.419664.com-体彩店转让需知| www.596752.com-新加坡天天彩8点| www.728761.com-彩票京东-| www.820876.com-时时彩计划研究| www.935739.com-彩名堂怎么用不输| www.999757.com-如何破解快三买豹子| www.nf24.com-彩票大赢家app| www.731972.com-重庆结婚要彩礼吗| www.798132.com-吉林快三开奖app| www.865528.com-腾讯时时彩彩票| www.922837.com-彩票店能否转让| www.982350.com-四九彩票共享大全| www.cv64.com-彩票gg官网-| www.76jv.com-七乐彩双龙会| www.76708.com-优彩彩票怎样充值的| www.201357.com-七星彩前四位口诀| www.283272.com-七星彩奖表图最新| www.r66.cc-排五体彩排五开奖号| www.779636.com-大同体彩中心| www.64259.com-官网彩票-| www.032871.com-福彩快三邀请码| www.378885.com-好彩一选号技巧| www.526019.com-竞彩2串1投资计划| www.df65.cc-旭彩app-| www.wv82.com-快三单双大小怎么看| www.698016.com-生肖彩开奖现场直播| www.2299.pw-二四六天好彩手机版| www.17266.cc-做网上赌彩赚钱吗| www.71058.com-褔体彩开奖结| www.634200.com-湖南七彩集团招聘| www.735677.com-新浪彩票平台怎么样| www.809872.com-zg中国体彩网| www.004950.com-二分快三大小计划| www.599795.com-体彩三地试机号今日| www.5837.biz-福报彩票-| www.38eh.com-七星彩2237图规| www.332597.com-彩票123官网下载| www.530656.com-乐彩客网址-| www.570313.com-七彩虹b75-| www.868342.com-七星彩新浪-| www.2122.net-体彩江苏11选五| www.9421.cn-掌上彩票竞彩版| www.089229.com-3d中彩网北斗分析| www.221908.com-乐点平台大发时时彩| www.325198.com-蓝海娱乐彩票公司| www.556388.com-体彩大乐透中奖故事| www.683165.com-宝哥彩吧app| www.801852.com-福彩双色球投注手机| www.948373.com-江西福彩中心在哪| www.lu6.cc-人人中彩票app| www.ir82.com-福彩短信投注| www.zd61.com-红牛彩票网址| www.10md.com-福彩3d今天走势图| www.917575.com-玛雅博彩官网app| www.790251.com-炫彩手机壁纸| www.20fk.com-体彩110040期| www.816217.com-昨天的彩票中奖号码| www.984972.com-新浪爱彩时时比分网| www.ps79.com-两分彩骗局-| www.29xv.com-山东体彩米老鼠| www.1435.net-彩虹屁语录大全| www.271320.com-好彩1开奖走势图| www.349667.com-福彩3d字谜85期| www.681136.com-香港49彩-| www.091034.com-在网上如何买彩票| www.920622.com-上海快三跨度表| 中国福利彩票www.33588y.com| www.243125.com-赌博买彩票破产| www.353925.com-西班牙彩票有哪些| www.22466.com-e彩堂买彩票靠谱吗| www.mk9.cc-五分钟幸运快三计划| www.189479.com-快三专业术语| www.272361.com-快三号全部号码| www.0945.cc-中国福利体彩大乐透| www.77891.com-点我看更多精彩内容| www.750198.com-全民彩票真假| www.493825.com-福彩三地太湖图| www.39511.cc-豪彩官网-| www.053.online-彩票止损方案| www.210901.com-下载安徽福彩网官网| www.035353.com-至尊彩平台是真的吗| www.10241.com-腾讯五分彩在线计划| www.706638.com-吉林快三出奖规律| www.119140.com-玩时时彩算不算赌博| www.275932.com-福彩快频彩-| www.826289.com-福利彩票14-| www.609427.com-分分中彩票网址| www.jv30.com-中国福利彩票官网站| www.289055.com-福建福彩快3一定牛| www.33511.cc-下载多乐彩走势图| www.794655.com-彩票端app邀请码| www.94381.com-篮球竞彩什么软件好| www.106481.com-快三怎么开挂| www.847009.com-澳门足彩必发交易量| www.975689.com-内蒙古福彩闪退| www.fm82.com-一分快三投注下载| www.fi30.com-彩票预测下载| www.515918.com-只赚不赔的彩票软件| www.072209.com-五分钟一期的彩票|