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天

知道了
彩01彩票 www.300039.com-好彩·0567-| www.469558.com-福彩十分钟走势图| www.574242.com-利用数学买彩票| www.659862.com-足彩人工智能分析| www.817515.com-sk国际彩票骗| www.906792.com-好彩网软件下载| www.972231.com-福彩3走势图| www.st38.com-彩票中心主任| www.14xr.com-必赢彩票官网app| www.443.date-中国福利彩票快乐采| www.5102.org-今天买彩票选啥号好| www.11661.com-彩乐瀑官方网址| www.59891.com-彩票中奖概率怎么算| www.060987.com-欢乐彩票app下载| www.155169.com-足彩19044实单| www.252308.com-中彩在线能提现吗| www.332300.cc-彩票查询快三内蒙| www.419234.com-88彩-| www.528680.com-彩虹宝宝合集版| www.656633.com-北京彩票店的电话| www.752729.com-河北省体彩中心电话| www.850891.com-三分时时彩规则| www.923726.com-福彩3d特准杀码| www.984574.com-易彩网时时彩平台| www.bg5.com-时时彩一期一计划| www.qn68.com-福彩快三有人控制吗| www.13ze.com-海南飞鱼彩票安全吗| www.90oq.com-mac博彩公司| www.3102.pw-彩票体彩开奖号码是| www.9358.xyz-福彩新闻中彩网| www.010158.com-官方分分彩开奖记录| www.089952.com-彩票代理如何拉人| www.162509.com-爱彩乐重庆时时彩| www.280284.com-彩app注册送18| www.371324.com-手机凤凰网彩票官网| www.480027.com-七星彩奖长表| www.566696.com-梦见大西瓜彩票号码| www.643752.com-玩大发快三软件下载| www.772067.com-500彩软件下载| www.858267.com-彩票爆仓-| www.917859.com-039彩票官网| www.974408.com-8号彩票一分快三| www.cc35.cc-福彩排列五开奖| www.va17.com-2018年快三派奖| www.13gj.com-鸿狼彩票app下载| www.85ub.com-福利彩票加盟挣钱吗| www.2583.vip-大星彩票app| www.8390.in-彩票中奖截图生成器| www.67688.cc-彩票是合法赌博| www.029744.com-体育彩票哪个app| www.111333.com-彩票源码ios| www.182412.com-500vip彩票-| www.257878.com-038彩票苹果手机| www.333211.com-彩票准确极高的公式| www.411826.com-猫和老鼠简笔画彩色| www.520660.com-河北福彩7位数| www.590901.com-东北结婚有彩礼吗| www.669099.com-东方全彩汉化本子| www.748598.com-中彩娱乐平台| www.820319.com-附近福彩销售点| www.893338.com-彩票条件选号软件| www.963473.com-七乐彩定胆杀号| 吉彩www.318097.com| www.io27.com-十四场足彩对阵表| www.c23.biz-中国福彩千禧3d| www.33xn.com-七星彩算局划归下载| www.1240.top-汇智游戏豹子王彩票| www.7918.in-史上最大彩票中奖| www.27951.com-彩票团队靠什么赚钱| www.71584.com-白菜博彩彩金群| www.044818.com-北京幸运28彩票| www.143401.com-福利彩8网站| www.220391.com-湖北快三论坛| www.293393.com-大发快三邀请码98| www.365559.cc-彩神计划软件注册码| www.455799.com-奥马彩票-| www.543287.com-畅销全球的彩力板| www.746620.com-555彩票网正规吗| www.807077.com-足彩截止时间| www.872310.com-乐彩网下载手机版| www.984467.com-跟彩运网一样的网站| www.cp04.com-全民彩票-| www.tw99.com-上海快3爱乐彩| www.03ut.com-如何办理体彩销售点| www.72vt.com-彩票中奖猫腻| www.1054.live-彩票卖一张赚多少钱| www.9738.xyz-彩宝平台犯法吗| www.51575.cc-凤凰快三是不是真的| www.95296.cc-七乐彩守号一注| www.055401.com-极速快三综合走势图| www.215215.com-快三的玩法-| www.285556.com-时时彩5码倍投表| www.378218.com-南国彩票你好湛江| www.500046.com-怎样兑福利彩票| www.568015.com-体彩8码遗漏| www.634668.com-七彩狐泳装集团| www.739331.com-吉林快三过年休息| www.807884.com-福彩任选5开奖结果| www.877608.com-怎么买美国彩票| www.970746.com-彩票历史开奖数据| 9号彩票www.809699.com| www.id00.com-彩票新政策-| www.yh43.cc-7星彩-| www.16qu.com-北京彩民中大乐透| www.614.mobi-时时彩下期出号规律| www.4321.com-彩票店中奖横幅咋写| www.9511.online彩钢板多少钱一米| www.59420.cc-腾讯彩票竞猜金豆| www.015447.com-百盈快三怎么做假| www.081888.com-七星彩有没有规律| www.139816.com-彩票网站报警| www.211176.com-彩神帝大发快3| www.277888.com-福利彩票奖池| www.399443.com-海南七星彩老鼠精版| www.518474.com-中彩网双色球金码| www.581630.com-新浪爱彩开奖| www.650390.com-北京十字彩-| www.761242.com-凤凰彩票平台安全吗| www.847654.com-河北体育彩票排列5| www.907871.com-七星彩梦大奖| www.966718.com-宝马彩票软件| 好运彩吧www.030628.com| www.ex08.com-快三万能倍投计算器| www.un04.com-百姓百姓彩坛| www.00cp.com-描写彩虹的诗句很多| www.63qo.com-移动兑换彩票| www.992.online-彩票游戏是赌博吗| www.8980.me-重庆福彩12生肖| www.39196.com-t罗彩开奖-| www.79253.com-网络彩票诈骗破获| www.025614.com-陕西福利彩票官网| www.092386.com-福建体彩精英论| www.150133.com-首彩51-| www.269440.com-三分彩玩法-| www.348103.com-排三走势彩经网| www.413108.com-北京招聘竞彩分析师| www.508569.com-七星彩中吉号有奖| www.569912.com-快三啥意思-| www.632465.com-买的彩票如何注销| www.693026.com-移动话费购彩| www.761881.com-足彩竞彩购彩app| www.888943.com-彩站宝是否合法| www.970366.com-天天乐彩是真是假| www.cp3386.com-快三助手最新版| www.km77.com-彩票驿站登录| www.zg02.com-网易快三计划| www.14to.com-彩威网开奖结果报码| www.280.cx-最新够力七星彩画板| www.3065.biz-海南七星彩私彩吧| www.7815.top-彩民之家036| www.19834.com-幸运彩开奖当天| www.56211.cc-体彩发行时间| www.93697.com-彩票太湖詹天佑| www.040133.com-江苏福彩快3开奖号| www.178659.com-中国体彩官方app| www.238150.com-天天中国福利彩票| www.302863.com-福彩排列七奖金| www.364001.com-新盈彩下载安装| www.434585.com-福彩3d直选012| www.518770.com-万家彩票app下载| www.576742.com-江苏快三顺序走势图| www.635519.com-500博彩官网| www.840766.com-足彩排除平局的方法| www.897346.com-欧洲彩票-|