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天

知道了
彩39彩票安卓 www.628218.com-福彩3d双采图迷| www.631869.com-七彩背景-| www.fj18.com-分分快三软件| www.20tm.com-福彩彩票条形码扫描| 500彩票www.912156.com| www.v22.top-金彩彩票能不能提现| www.071796.com-私彩做庄集中地区| www.185509.com-广西快三遗漏期| www.289326.com-78彩票下载-| www.373867.com-大星彩票走势图网| www.486783.com-福彩中彩网3b开奖| www.568037.com-江苏快快三遗漏数据| www.656641.com-中彩那天教学目标| www.751080.com-速彩沈宇骗局| www.820094.com-彩富足球网-| www.888857.com-网上帮人投注彩票| www.958047.com-福彩3d应该咋样买| 凤凰彩票www.77802b.com| www.237173.com-体彩3l选7开奖号| www.zp65.com-福彩数字3玩法| www.272779.com-今日新鲜事彩票3d| www.365395.cc-广西快3福利彩票| www.466355.cc-快乐彩五行必赢买法| www.551525.com-快乐彩中奖概率| www.781447.com-万国彩票平台| www.871353.com-众赢彩票的骗局揭秘| www.938306.com-开门彩双色球预测| www.990541.com-全球彩票是骗局吗| www.sd8.cc-彩票代玩账号兼职| www.ta30.com-超级快三缩水软件| www.702528.com-做竞彩怎么拉人| www.817656.com-7349胜彩论坛| www.897853.com-吉林快三人工计划| www.963794.com-彩库宝典旧版官方| 全民彩票www.161763.com| www.os60.com-彩经网3d最小值| www.0mc.cc-天天竞彩安卓版| www.457618.com-恒彩客户-| www.830800.com-粉毒跟彩毒的区别| www.972164.com-奖多多彩票-| www.ap03.com-贵阳福利彩票总店| www.xg20.com-977彩票安卓| www.42ot.com-熊猫彩色简笔画| www.025609.com-陕西省福利彩票官网| www.0833.xyz-快三黑彩技巧| www.6826.org-今日欧联杯分析竞彩| www.823613.com-彩钢印花板-| www.683572.com-5000万彩票中奖| www.775093.com-福彩公益金是什么| www.884295.com-杏彩网页登陆首页| 91彩票www.9155c.com| www.xd70.com-贵州快三一天开几期| www.55lx.com-福彩快3和值| www.6463.cc-豪彩娱乐登录地址一| www.56098.com-本港彩票网站| www.039513.com-今晚4场进球彩对阵| www.199680.com-福建福利彩票走势图| www.332894.com-五百万彩票网官网| www.480538.com-五彩网3d字谜| www.613516.com-三宝乐购彩票网| www.768598.com-爱乐体彩-| www.892862.com-快三拖码全中| www.qm98.com-997彩票靠谱吗| www.7120.biz-彩天下平台代理招商| www.58915.cc-彩票开户ok168| www.116649.com-快三分析-| www.596435.com-中国福彩安卓版下载| www.6064.cn-奇门预测彩票技巧| www.76822.cc-彩金龙虎游戏机图片| www.901846.com-免费下载贵州快三| www.443882.com-色彩的三要素分别是| 大赢家彩票平台www.810620.com| www.359.in-澳门福星彩开奖结果| www.6811.cc-福彩3d中彩北斗| www.155300.com-足彩胜平负玩法说明| www.41sz.com-体育七彩球-| www.49337.com-彩之家大乐透走势| www.051291.com-19042足彩-| www.388257.com-华彩咨询官网| www.653916.com-东方彩票网是多少| www.tx32.com-万彩吧彩票开奖查询| www.1279.cn-越南河内5分彩| www.33166.cc-大星彩票走势图3d| www.020001.com-返奖高的彩票网站| www.387525.com-下彩网站-| www.554728.com-彩票路珠怎么分析| www.51968.com-网投彩票平台哪个好| www.175011.com-一分快三app| www.336933.com-广西福彩快三手机| www.496969.com-福彩中奖怎么看| www.693537.com-足彩竞彩模拟投注| www.848818.com-搜索唯彩会| www.965864.com-新国际彩票app| www.s03.com-体彩官网服务好| www.130158.com-福利彩票能网上买吗| www.237043.com-足彩竞彩新浪投注| www.082159.com-微信上怎么买彩票| www.37832.com-6234彩票网-| www.93800.cc-快三定位走势| www.065512.com-彩铅画简单图片| www.990607.com-中体彩网官网| www.gw13.com-福彩中心承认作假| www.632456.com-彩票如果兑奖| www.932918.com-彩色透水沥青混凝土| www.3732.pw-彩票管家官网| www.59892.com-福彩3d漏洞玩法| www.479222.com-江西省体育彩票地址| www.5811.cc-足彩的最佳买法| www.881938.com-十三国际彩票兼职| www.x33.cc-极速彩票app下载| www.00501.com-福利彩票公众号购买| www.545514.com-中国福彩网黑龙江| www.979045.com-中免绿好彩好抽吗| www.058578.com-福彩3d之家下载| www.7579.win-彩多多彩票-| www.025849.com-喜乐彩票靠谱吗| www.226909.com-内蒙古福彩快3下载| www.341119.com-体育彩票广告图片| www.535039.com-1号彩票下载| www.829585.com-天空彩报码开奖直播| www.988625.cc-必中全民彩彩票| www.nm69.com-时时彩助手挑号| www.84ob.com-快乐5分彩是哪里的| www.11861.cc-6678彩票app| www.202831.com-上海快三预测与推荐| www.512598.com-彩铅萌图教程| www.657202.com-金龙彩凤-| www.58297.com-玩官方彩可靠吗| www.054989.com-大连体彩站出租| www.1355.net-苹果彩票计划| www.940186.com-台湾快三官方开奖| www.962497.com-福彩双色球兑奖期限| www.je90.com-宝马彩票送38| www.798565.com-真实的彩民中奖故事| www.w37.club-盈易福彩下载安装| www.203017.com-下载吉林快三| www.180344.com-外蒙快三走开奖结果| www.306827.com-彩票app足彩停售| www.931951.com-网络中原彩票靠谱吗| www.978536.com-彩8彩票苹果版下载| www.cp6363.com-足彩竞彩网310| www.263160.com-乐彩怎么玩-| www.330442.com-最火的快三微信群| www.392723.com-赌博彩票网站推广| www.489271.com-彩票网上代理怎么做| www.547862.cc-福彩直售自助机| www.604778.com-福彩双色球停售时间| www.695318.com-竞猜彩误差值| www.783848.com-鼎盛彩票网投可靠吗| www.875661.com-彩神v111app| www.971888.com-8号彩票有聊天室的| www.ft53.com-快乐彩开奖号码浙江| www.p89.top-竞赢彩票-| www.9wc.cc-体彩超级大乐透微博| www.9831.org-ww1750乐彩网| 众彩www.658960.com| www.k17.me-沧州市福彩兑奖中心| www.11712.cc-网上赌时时彩害死我| www.896611.com-足球博彩概率学| www.963375.com-彩色水磨石地坪施工| 9号彩票www.80767z.com| www.lw61.com-好彩江苏快3| www.10jg.com-天佑风采彩票| www.80in.com-体育彩票交多少税|