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.587716.com-a3彩色连供打印机| www.799053.com-怎么买电竞彩票| 梦想彩票站www.43131i.com| www.wz82.cc-七星彩头尾数预测| www.77th.com-1分钟彩票骗局| www.6600.in-518彩票进不去| www.56869.cc-快乐彩技巧论坛| www.176168.com-彩票平台注册送45| www.344538.com-2365cc彩票-| www.515311.com-海南七星彩今天开奖| www.791083.com-福利彩票随机选号| www.909711.com-高频彩开奖直播网址| www.980059.com-体彩柜-| www.id26.com-快三遗漏数据统计表| www.m81.com-彩票买一注能赚多钱| www.68pa.com-中国福利彩票字体| www.3298.net-广西快三冷热| www.03152.com-打打彩票-| www.77637.cc-博乐彩票官方网站| www.051415.com-高频彩规律-| www.182831.com-安徽快三一定牛预测| www.275300.com-时时彩怎么刷漏洞| www.407900.com-够力七星彩旧版| www.550907.com-18个人合买彩票| www.635495.com-彩70彩票计划| www.750003.com-金牛彩票下载| www.840506.com-彩妆店中岛装修图片| www.938935.com-澳客体彩足球强哥| www.fz70.com-买彩票的app| www.zn26.com-安徽快三走势下载| www.44kc.com-福彩胆拖投注说明| www.0051.top-给我一组彩票号码| www.19748.com-内蒙古福利彩票三地| www.65898.cc-好彩三张-| www.050234.com-网上打黑彩怎么处罚| www.155542.com-开户送68元彩| www.272948.com-彩票内部数据| www.381608.com-昨天福利彩票开奖| www.533933.com-七星彩排列技巧法| www.682019.com-zhcw中彩网-| www.767567.com-开心彩票网手机版| www.866621.com-三分彩是全国开奖吗| www.931720.com-佛教求财彩票中奖| www.982284.com-六福彩靠谱吗| www.fp60.com-快三选号绝招| www.xg49.com-提前开奖器彩票| www.15zc.com-幸运彩票应用软件| www.268.cn-玩王牌彩票的技巧| www.3783.cc-七星彩双重多少组| www.9128.vip-体彩即刮彩票中奖率| www.57335.cc-七星彩大赢家| www.012576.com-七星彩开奖今天结果| www.085028.com-深圳鑫源彩彩票| www.146866.com-彩票中几个数有奖| www.254080.com-百盈快三官方下载| www.324795.com-吉隆坡博彩合法吗| www.392546.com-福彩能买到大乐透吗| www.533515.com-彩票那种简单| www.613203.com-宁夏福彩管理中心| www.682291.com-足球彩票微信名字| www.756905.com-三个数的彩票是什么| www.862016.com-开体彩店装修谁来装| www.925200.com-彩舟是什么意思| www.979041.com-无嘴好彩香烟哪里买| www.lq01.com-中彩网点数是钱吗| www.g30.org-彩经网彩经网| www.34ay.com-七星彩二个头二个尾| www.933.xyz-彩吧图第一版| www.4787.cn-758彩票正规吗| www.9882.net-彩票管控通知| www.61106.com-特区七星彩沦坛头尾| www.016218.com-我看湖北快三全天| www.081094.com-728彩票苹果版本| www.140811.com-808七星彩网站| www.211817.com-福利彩票十一选五| www.277361.com-正版彩票指南报纸| www.396956.com-福彩书籍-| www.512383.com-绘画古风女子彩铅| www.578467.com-老神童彩图-| www.646001.com-竞彩对冲二串一理论| www.749727.com-彩票开奖日期怎么看| www.815038.com-易迅彩票下载安装| www.880115.com-喜乐彩票怎么玩| www.969215.com-8k彩票破解方法| 盈彩www.yc7701.com| www.gq80.com-江苏快三宝典下载| www.wu88.com-118彩票下载| www.07uf.com-七星彩番外txt| www.70bd.com-福彩开奖视频作假| www.0778.pw-七星彩大公鸡规律图| www.9500.xyz-七位数的彩票| www.44575.com-中彩网靠谱么| www.85635.cc-牛彩网3dp3-| www.579103.com-双色彩票怎么算中奖| www.cp1897.com-快三投注平台注册| www.35477.com-吉林快三二不同| www.475348.com-500彩票平台登录| www.553191.com-53彩票官方app| www.615687.com-体彩是选几个数字| www.678452.com-百度百度彩票开奖| www.748817.com-977彩票靠谱吗| www.809692.com-体彩奖号-| www.874882.com-体彩快乐20分开奖| www.999094.com-彩票汇-| www.mi.com-宁夏快三开奖查询| www.ka45.com-新3d彩票计划骗局| www.zl41.com-分分彩计划三期必中| www.15vt.com-发彩网是什么意思| www.387.live-市福彩中心级别| www.3394.mobi-18k彩金会掉色吗| www.8349.loan-两分钟一开的彩票| www.24923.com-名画彩铅-| www.58523.cc-创彩-| www.061029.com-彩客网买彩票靠谱吗| www.132080.com-我中了彩票这个软件| www.199455.com-福彩61开奖结果| www.261364.com-时时彩后二胆码技巧| www.377111.cc-e球彩票走势图| www.547844.com-快三机选号码| www.31em.com-南京体彩办公室主任| www.1762.cc-爱购彩票是骗人的| www.18485.com-赛后及派彩-| www.84478.com-旧彩钢板大量出售| www.080609.com-彩票七乐彩-| www.187629.com-不怕挂时时彩方案| www.298356.com-快三最大奖金是多少| www.413716.com-五福彩彩票正规吗| www.552379.com-福彩中奖率最高的| www.779579.com-体育彩票机亏本转让| www.892051.com-快彩网的邀请码| www.984143.com-福彩3d字谜总汇二| www.8bo.com-匕星彩开奖结果今天| www.456.tv-吉林快三合值推荐| www.7550.biz-下载东方彩票| www.46700.com-时时彩小鹿计划| www.019307.com-七星彩六等奖多少钱| www.123864.com-体育彩票20选5| www.233703.com-快三的投注技巧教程| www.351589.com-买彩票中一注多少钱| www.497033.com-辉煌彩票兼职被骗了| www.604422.com-彩票赌钱软件下载| www.715321.com-彩票店国家允许吗| www.827689.com-世纪佳缘彩票托| www.933967.com-福彩动物总动员诀窍| 易彩堂www.55885m.com| www.lz03.com-各种釉彩大瓶价格| www.5lq.com-玩彩有什么规律嘛| www.67fg.com-乐彩走势图3d| www.1804.vip-8g神话彩票网址| www.55544.com-点点彩票可信吗| www.019765.com-彩之星快三官网| www.107041.com-澳洲五分彩官方开奖| www.215356.com-瑞彩网合法吗| www.317127.com-黑龙江时时彩图表| www.415315.com-足彩竞猜串关规则| www.536277.com-黑龙江福彩22选五| www.871335.com-彩票赔付最高的平台| www.cai4040.com快三一注中奖多少钱| www.sm68.com-广酉福彩快三一定牛| www.49cv.com-大家赢彩票网正规吗| www.1682.in-盈利彩票下载| www.17657.com-505彩票兼职| www.77882.cc-智慧彩是什么意思| www.058988.com-乐彩城彩票-|