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.321889.com-ai智能彩票-| www.dz12.com-百盈快三官网| www.6497.vip-1998彩票app| www.824115.com-三彩女装加盟| www.930376.com-福彩3d规律大曝光| www.991890.com-雪缘圆足彩比分直播| www.02602.com-ok彩票安卓-| www.1298.pw-云南11选5爱乐彩| www.067607.com-福彩刮刮奖有假票| www.624.cm-时时彩北京pk计划| www.9049.xyz-众彩网客户端下载| www.62795.com-聚彩论坛网址是什么| www.523032.com-网上app刷彩网赚| www.019570.com-云南体育彩票网| www.8805.org-下彩网怎么找不到了| www.g47.net-开奖公告新浪彩票| www.565183.com-福彩今天相年图| www.316089.com-上海体彩店盈利| www.589751.com-双彩论坛3d谜语| www.503676.com-购彩须知-| www.589605.com-体彩排三杀跨| www.668631.com-非凡彩票下载安装| www.742920.com-首页购彩-| www.827177.com-时时彩彩票宣判| www.894763.com-经彩网彩票走势图| www.959436.com-战狼团队彩票| 大赢家彩票平台www.186957.com| www.5678.net-买外围彩票软件下载| www.966540.com-彩票店福彩快三| www.928338.com-旺彩平台11选5| 大玩家彩票www.11dwj.com| www.419182.com-体育彩票买那几个号| www.025110.com-亿彩网-| www.l92.cc-高手彩票字谜图谜| www.cv88.cc-稳定私彩-| www.22572.com-万客彩票-| www.84766.com-聚彩汇骗人的吧| www.063271.com-彩票店内还能卖什么| www.cp565.com-新快三在线-| www.63aq.com-3的新彩网-| www.86799.com-七星彩中几个数有奖| www.081234.com-赵公明彩票预测| www.38354.com-彩票红包-| www.961842.com-成都快三-| www.930032.com-福彩3d预测寻码图| www.2326.xyz-七彩虹主板价格| www.254502.com-cc3爱乐彩-| www.375621.com-五星电玩城彩金| www.525408.com-乐玩彩票平台官网| www.716214.com-尼彩i5-| www.851466.com-彩客网如何买足彩| www.955117.com-易记彩票破解| www.ui14.com-贵州快三最大遗漏| www.64dl.com-网易彩票163| www.1873.top-易记彩票全天计划| www.ay77.com-彩迷app-| www.89lu.com-福彩三地太湖图| www.04876.cc-彩票3d彩吧助手| www.167777.cc-青海快三走势图今天| www.198452.com-玩彩票有上岸的吗| www.282772.com-福彩怎么算中奖| www.761194.com-广东好彩快三查询| www.616795.com-体彩排列三怎么兑奖| www.722725.com-每日存款彩票平台| www.802181.com-彩界小皇帝赌一胆| www.018566.com-强强彩票破解软件| www.217081.com-彩票指南报纸手机版| www.868223.com-七星彩43结果| www.980334.com-709彩票com-| www.cr11.cc-彩票挂机软件骗局| www.xf74.com-广东福彩好彩3奖金| www.216829.com-彩宝网3d走势图带| www.342168.com-十堰体彩中心| www.77et.com-可以投一分钱的彩票| www.39235.cc-彩票306老版| www.019174.com-牛彩票网址-| www.112887.com-金博彩票app| www.236021.com-竞彩网500比分| www.342940.com-体彩历届开奖| www.470012.com-男朋友喜欢买足彩| www.391305.com-乐彩娱乐注册| www.992903.com-竞彩赔率表-| www.me71.com-快三彩票倍投| www.o45.cn-彩票里的数学| www.295411.com-彩吧吧全图-| www.553752.com-竞彩武林风二串一| www.854967.com-开门彩福彩官方下载| www.979398.com-缅甸好彩柠檬双爆| www.ak17.com-彩票代打骗局兼职| www.234780.com-中国体育彩票竞猜| www.jo45.com-套彩金违法吗| www.123723.com-今日七彩乐开奖结果| www.883101.com-多彩云众筹立案了| 500彩票www.841077.com| www.771.cx-体彩20选5胆拖| www.585.hk-亚投彩票怎么样| www.256267.com-澳客赢家彩票app| www.329263.com-彩票注册送18元| www.by50.com-天天中彩票手机版| www.807654.com-买彩票中奖的故事| www.549722.com-江苏彩票开奖查询| www.847188.com-归秀法预测彩票资料| www.928079.com-彩色复印机-| www.ci47.com-安徽快三彩票官网| www.663458.com-3d乐彩关注码| www.15395.com-e8彩票平台注册| www.019923.com-贵阳彩票店转让信息| www.252653.com-湖北快三带线走势图| www.213191.com-幸运快三技巧| www.7247.xyz-彩虹阅读-| www.gp67.com-南阳彩礼-| www.76175.com-竞彩按比例投注计划| www.038867.com-赢彩网计划平台| www.125252.com-老版本单机新快三| www.225102.com-宝马彩票app| www.65799.cc-彩吧开奖助手| www.073.link-彩16为什么不封| www.5367.cn-淘宝可以买彩票| www.cz85.com-青海快三跨度| www.612165.com-福彩3d分解方法| www.132099.cc-玩彩彩票网-| www.199395.com-河南快三彩票平台| www.32613.cc-九九彩票网-| www.916783.com-乐迎彩票注册| www.597477.com-奇妙三数字快彩版| www.670302.com-彩票刷数据靠谱吗| www.761324.com-3d试机号彩经网| www.835373.com-日版好彩香烟好抽吗| www.907308.com-天津快三怎么玩| www.979038.com-好彩门户特爆网| www.bg83.com-辉煌彩票快3的骗局| www.163003.com-福利彩票图大全九| www.512126.com-获奖彩铅画作品| www.872046.com-毕节乡镇彩票站| www.12xa.com-好彩双爆没有喷码| www.366593.com-彩铅色彩画图片大全| www.vx69.com-快三赢钱的小技巧| www.109678.com-彩客网北单比分直播| www.258796.com-365福彩-| www.271189.com-c59彩票-| www.763727.com-彩神大发软件| www.1871.com-彩46app下载| www.33085.com-福彩3d大哥算独胆| www.8825.com-乐投彩票app| www.551523.com-帮朋友买彩票中奖了| www.33101.com-全民收集网彩金| www.367084.com-彩铅画麋鹿圣诞节| www.62zk.com-吉林彩票-| www.876012.com-十一选五大彩鲸| www.030459.com-博彩推广手段| www.114747.com-9万彩票app苹果| www.192221.com-福彩快三彩票app| www.609355.com-1号站彩票平台注册| www.jt38.com-福彩3d字迷解| www.677282.com-网易彩票公告| www.749098.com-彩神破解-| www.808743.com-体育彩票分析网站| www.873461.com-体彩兼营店-| www.939413.com-福彩上海天天彩选四| www.981472.com-易易彩网-| www.cp819.com-彩票软件快三| www.479504.com-爱米彩票网站套路| www.598716.com-七星彩历史中奖记录| www.339.live-七星彩四位最准直码|