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天

知道了
彩票123现在叫什么名字 www.967731.com-福利彩票往期结果| www.dl55.com-快三真坑人-| www.208027.com-49彩票cc-| www.294258.com-买体彩大乐透的技巧| www.369674.com-七乐彩几点封机| www.482381.com-福彩抓管理-| www.77918.com-一等奖彩票网| www.542525.com-大乐透彩票结果今天| www.887395.com-下彩网官方-| www.101479.com-奥克网彩票-| www.890428.com-彩票试玩可以提现的| www.979540.com-晚晚彩票-| www.xo3.com-彩票代打兼职| www.vd09.com-银川快三跨度表| www.503907.com-快彩软件是真的么| www.610446.com-彩票777可靠吗| www.700489.com-可变条码彩票定制| www.2997.win-福彩三的藏机图| www.177771.com-湖北快三是真的吗| www.s90.top-梦见中彩票二等奖| www.5704.vip-失控的黑彩二| www.99037.com-5oo竞彩比分直播| www.cai2525.com湖北精彩十分| www.952496.com-配送员中彩票| www.954708.com-精准七星彩专家预测| www.38778.com-休育彩票31选7图| www.0313.shop-广东体彩发展历史| www.810.tv-七乐彩绝杀一码| www.5103.vip-福彩是人控的吗| www.899613.com-c81彩票下载安装| www.984340.com-福彩快乐十分计巧| www.ig84.com-福利彩软件-| www.39xi.com-山东临沂彩礼| www.2972.xyz-谁有幸运彩票邀请码| www.206159.com-神州彩票是违法的吗| www.322762.com-如意彩票计划软件| www.926907.com-彩票开户设置返点| www.ga68.com-彩迷网腾讯分分彩| www.2dc.com-彩神平刷软件官网| www.806.website七乐彩推荐专下| www.38yh.com-体彩七星彩怎么选号| www.844125.com-飞腾彩票网址| www.964234.com-彩票加倍是什么意思| www.cai8911.com今晚七星彩-| www.d53.top-彩票ai软件-| www.68bw.com-彩9官方-| www.1500.me-高级彩虹屁文案| www.05244.cc-彩票游戏赚钱| www.99595.com-河内彩玩法-| www.8165.wang-新快三彩票赚钱吗| www.6471.vip-福彩3d奖号是什么| www.115018.com-彩铅彼岸花图片大全| www.262863.com-下载福彩软件彩票| www.344559.com-雪缘园竞彩足球比分| www.424256.com-三国杀星彩皮肤| www.529741.com-时彩直播-| www.656093.com-星彩代挂-| www.731749.com-彩钢瓦围挡生产厂家| www.802225.com-云南福彩中心官网| www.871671.com-体育彩票多少钱一张| www.971287.com-买彩票刮刮奖行吗| www.cai677.cc-快三是什么游戏| www.mp58.com-彩2神争霸-| www.z80.xyz-数学公式彩票| www.83cl.com-喝彩中华方芳| www.3908.hk-七星彩最近开奖图片| www.04533.cc-体彩微信-| www.237816.com-快三对照表-| www.98657.com-快三筛子-| www.905.cc-彩票33在线登录| www.r72.net-高频彩平台出租价格| www.365776.cc-广东七乐彩开奖结果| www.471290.com-招财猫竞彩app| www.82111.cc-8号彩票是马云的吗| www.2556.xyz-数学课研究彩票| www.13814.com-皇家时时彩宝典| www.265905.com-快乐双彩走势图| www.373625.com-好彩香烟60万视频| www.472889.com-天天抢红包彩票平台| www.550450.com-彩发彩票-| www.620922.com-寄希望于彩票| www.688052.com-神兽竞彩团队微信| www.762277.com-大发快三加盟| www.831950.com-博彩包网-| www.899123.com-足彩让负是什么意思| www.964020.com-福彩3d跨度照表| 佰萬彩票www.160592.com| www.pz75.com-彩票77安卓-| www.369217.com-新疆体彩兑奖地点| www.959686.com-摩纳哥三分彩骗局| www.062031.com-正版彩客app下| www.159076.com-广东快乐彩开奖号码| www.235242.com-山东彩友沙龙论| www.665215.com-七乐彩历史比器| www.3333.net-时时彩后三走势| www.396265.com-沂水彩虹小镇| www.639840.com-五分彩是统一开奖吗| www.738468.com-关于彩票的朋友圈| www.816890.com-968彩票网-| www.925005.com-中彩票后真实经历| www.987238.com-腾讯快3彩票平台| www.bq27.com-有合法的彩票网站吗| www.um34.com-3d彩经网杀号定胆| www.101111.com-8亿彩合法吗| www.262977.com-福彩控-| www.311909.com-43彩票app-| www.397063.com-大远洋竞彩刘平| www.80633.com-燕赵彩票-| www.026764.com-快三怎么赢钱保盈| www.837099.com-体彩一定牛下载| www.925227.com-福彩3d彩宝贝杀号| www.998624.com-体育彩票七位数玩| www.dh83.com-经典快三-| www.733747.com-山西竞彩快三查询| www.94651.com-福彩都有哪几种| www.9513.biz-有四个数字的彩票吗| www.507988.com-唐龙聊彩综合分析| www.672719.com-怎么推销彩票违法吗| www.816618.com-福利彩票每周几开奖| www.1036.org-彩票模拟摇奖器软件| www.031824.com-网上黑彩票平台曝光| www.q54.xyz-双阳区黑彩-| www.94ka.cc-手机365彩票| www.302768.com-微彩网排列五| www.yf93.com-彩票店一般几点开门| 网易彩票www.177074.com| www.693546.com-app足彩不能买| www.935228.com-k快彩-| www.pb29.com-国际福彩平台骗局| www.gr01.com-快三推荐号河北| www.2gx.com-体育彩票怎样赚钱的| www.3510.vip-特吧彩吧高手网吧| www.63115.cc-安徽快3彩经网| www.056995.com-全国彩票走势图大全| www.6188.name-博乐彩票是不是假的| www.7656.xyz-各种彩票的标志| www.9914.cm-快彩ios-| www.082957.com-福建体育彩票36| www.175612.com-十分快三助手| www.281136.com-时时彩长线追号法| www.385203.com-吹吹七星彩怎么进| www.654782.com-凤凰快三开奖结果| www.757708.com-福利彩票赚钱| www.854470.com-福彩3d在线投注| www.3200.wang-分分快三推荐号码| www.8966.cc-江苏快三单双技巧| www.062454.com-如何下载瑞彩网| www.703711.com-福彩快三大神话术| www.31950.com-生肖时时彩走势图| www.6540.vip-网上彩票授权了几家| www.696300.com-008网彩票-| www.796249.com-安徽快三即时开奖| www.876874.com-七乐彩所有开史历史| www.951943.com-台湾运彩-| www.998809.com-香港快三彩票吗| www.no5.com-体彩19035开奖| www.vh87.com-哪个平台有山东快三| www.du74.com-大发财彩票-| www.800501.com-彩票3d试机号今日| www.961100.com-彩票内部计划群| www.xj92.cc-乐彩论坛排3170| www.95219.cc-彩妆顺序-| www.dd66.com-上海快三爱彩乐| www.h64.cn-彩票工具软件大全|