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.10784.com-篮球竞彩500| www.85851.com-安徽福彩中心位置| www.208632.com-甘肃快三开奖果跨度| www.467960.com-双色球授渔看彩| www.236159.com-九场足彩-| www.358422.com-江苏福彩三d| www.475335.com-西宁市福彩中心| www.562039.com-鑫彩计划-| www.595614.com-尼彩手机怎么样| www.716661.com-彩678下载-| www.812134.com-亮彩足球计算器| www.895273.com-60彩票官网-| www.970253.com-彩票大赢家走势图| www.ct64.com-私彩飞艇-| www.007765.com-彩客彩票手机下载| www.26ak.cc-线上买彩票违法| www.079178.com-时时彩高手方法如下| www.602310.com-彩票平台送58| www.681789.com-豪彩安卓手机版| www.768168.com-淘彩app怎么下载| www.855770.com-七乐彩投注计算表| www.944149.com-信彩票骗局-| 汇丰彩票www.hf6660.com| www.647405.com-吉林快三跨服和值| www.2443.com-好彩数码印刷怎么样| www.539218.com-时时彩三星杀形态| www.1088.xyz-中彩票收米照片| www.947939.com-体育彩票是几个号码| www.qw5.cc-吉林快三根号计划| www.198355.com-贵州体彩十一选5| www.297622.com-彩票攻略技巧知识书| www.385047.com-七星彩预则-| www.498262.com-777福彩预测| www.984869.com-长城彩票官方网站| www.mk28.com-正义彩-| www.73pu.com-实亿彩票平台| www.87181.com-体彩排列三谜语字谜| www.89rn.com-竞彩2比串1推荐| www.55nq.com-红河州彩票管理中心| www.324766.com-101亿彩票-| www.ik84.com-福彩快三大小单双| www.2764.win-快三河北和值| www.55eb.com-933彩票怎么样| www.501762.com-溴客彩票网-| www.3690.tv-购彩v是不是骗人的| www.13875.com-网易足彩推荐分析| www.86917.com-山西大同快三查询| www.503966.com-高频彩票改-| www.588565.com-8848彩票平台| www.66571.cc-盈盈彩票-| www.558454.com-彩铅绘画古风少女| www.535859.com-8位数字的湖北彩票| www.77192.cc-老彩民平台怎么样| www.077551.com-鸿彩网直播种子| www.578315.com-澳门彩票首页| www.659844.com-远途国际彩票app| www.100581.com-上期七星彩开奖| www.211593.com-北京彩票十一选五| www.318629.com-ll彩票-| www.8989.biz-竞彩投资最佳方案| www.094156.com-买彩票上瘾怎么戒掉| www.446191.com-精彩彩票客户端下载| www.uz25.com-时时彩组六单式号码| www.788318.com-彩票8app下载| www.tz82.com-彩票长龙提醒ios| www.086034.com-凤凰彩票登录平台| www.45545.cc-正规福彩网站代理| www.vz27.com-人人中彩票被关了吗| www.29600.com-神彩福牛首页| www.007950.com-体彩初几开奖| www.183880.com-快三胆码是什么意思| www.310265.com-陕西体彩中心| www.61736.cc-最新七星彩开奖图表| www.252201.com-旺彩双色球官方下载| www.355835.com-英国彩票的税| www.163151.com-香港彩民网-| www.578585.com-779木漫画全彩| www.052244.com-同学合买彩票中奖| www.az7.cc-彩票快三秘诀| www.025326.com-爱彩通手机版下载| www.731649.com-足彩加-| www.551318.com-竞彩四场进球彩| www.060078.com-东方3分彩开奖号码| www.062383.com-彩乐园官方网站| www.382096.com-河北快三计划网页版| www.g06.com-彩票怎么买法| www.514426.com-开原琳彩二部地址| www.604801.com-利澳平台手彩票注册| www.581690.com-彩神霸百姓彩票网| www.359923.com-大马大彩开奖成绩| www.472379.com-迪士尼彩乐园168| www.556967.com-创意水彩画图片大全| www.cp7978.com-内蒙福彩快3| www.466062.com-重庆时时l彩下载| www.579249.com-聚风彩票-| www.521826.com-新星彩靠谱吗| www.371428.com-牛彩赚钱真的假的| www.679216.com-中彩票的福报| www.766623.com-彩乐糖果招聘| www.835396.com-五百彩票网股票| www.898246.com-今晚七星彩开什么吗| www.964368.com-卖体彩福彩提多少钱| www.cp742.com-广西快三开奖记录| www.263019.com-重庆时彩害了多少人| www.631551.com-顺丰彩票中奖率| www.701811.com-赢彩票是正规网站吗| www.92298.cc-五百彩票极速快三| www.068837.com-609彩票-| www.141403.com-中彩网是官方网站吗| www.255929.com-体彩河北11选五| www.lv8.com-福彩甘肃快三下载| www.vy89.com-快三遊戲-| www.1037.vip-福彩中奖概率计算| www.776783.com-竞彩大小球-| www.888694.com-福利彩票3d南方网| www.956586.com-55彩票-| 网易彩票www.082wy.com| www.05.me-福彩今天出奖号码| www.3792.win-海口南国七星彩论坛| www.899613.com-c81彩票下载安装| www.391133.com-491cc彩票网| www.600519.com-体彩一次能买几期的| www.744838.com-234彩票ios-| www.107318.com-快三是黑彩不是| www.569646.com-彩票兑奖返点| www.ch0.cc-500快3彩票-| www.276002.com-上海福利彩快三| www.582625.com-体彩屋黑平台| www.255827.com-锋彩直播苹果版| www.0402.me-体彩金码今天| www.5446.cm-华夏彩票黑钱| www.9965.com-五分赛车彩票| www.59nn.cc-大众彩票下载安装| www.769937.com-55彩票app-| www.i62.bid-彩乐网福中网资料| www.9sy.com-微博钱包彩票余额| www.450605.com-数字3彩票开奖号码| www.263137.com-彩票托照片-| www.328160.com-特彩吧高手网电脑版| www.388563.com-微信上的彩友是什么| www.986175.com-中国河南体育彩票| www.gb74.com-福利彩票追号技巧| www.v45.biz-好彩网钱王3d| www.04ke.com-落日风景彩铅画教程| www.233681.com-汇彩app-| www.356747.com-体彩中国红刮刮乐| www.531058.com-今晚福彩专家预测号| www.872676.com-福彩迷app贵吗| www.158980.com-今天的体育彩票号码| www.64335.com-彩妆蛋-| www.270119.com-彩六官方下载app| www.916419.com-体彩足彩计算器| www.cai2759.com安快三开奖结果查| www.124012.com-凤凰彩票计划软件| www.53672.cc-709手机版时时彩| www.722360.com-中国红彩票规则| www.026689.com-网上代买彩票合法不| www.23522.cc-88神彩-| www.4182.biz-7彩阳光慢动作| www.978358.com-彩钢围挡厂家| www.cp6119.com-中国福彩下载| www.880869.com-彩票平台刷佣金| www.960088.com-彩票站为啥不能贷款| E彩堂www.43818.cc|