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天

知道了
7星彩 www.96xq.com-彩排是什么东西| www.cai65.cc-快三网站-| www.479705.com-看世界杯买足彩| www.593792.com-彩票在线选号| www.686964.com-星彩网官网下载| www.774023.com-福乐彩28怎么玩| www.892452.com-雅玛彩票游戏| www.962089.com-重庆时时采彩走势图| 大赢家彩票平台www.927035.com| www.996724.com-czp彩票站下载| www.kj98.com-网易快三彩票| www.513652.com-福彩3d断组方法| www.652875.com-黄石彩票大奖| www.753277.com-利奥彩票app下载| www.865070.com-吴旭萍华彩-| www.2780.vip-手机3b彩报-| www.028275.com-彩之王下载地址| www.3332.win-中彩股份北斗传媒| www.120947.com-福建福彩玩法| www.cw43.com-彩票33可靠吗| www.780630.com-评论赢彩彩票| www.61087.com-第一彩票网站首页| www.974261.com-彩民在线频道再见图| www.ja79.com-竞彩足球比分彩客网| www.57kn.com-快三后二直选怎么玩| www.2667.vip-安卓版火箭彩票网站| www.26396.com-三d福彩报纸| www.353.online-中彩网彩票怎么样| www.3366.biz-足彩加高级会员| www.056562.com-炫乐彩下载-| www.902426.com-彩票店做外围| www.986291.com-中国足彩竞彩官网| www.782693.com-网络彩票哪个正规| www.236114.com-重庆时时彩新规| www.092717.com-问题彩民投机| www.4165.top-北京七彩国际会所| www.38455.com-河北福彩双色球休市| www.96220.com-福彩7位数-| www.vu11.com-惠民彩-| www.so7.com-分分彩开奖记录| www.35qo.com-福彩3d周六走势图| www.60990.com-聚鑫乐彩是什么意思| www.194642.com-河北快三组合走势图| www.3344.cm-汉仪奶油彩色拼音体| www.464666.cc-六给彩票香港开| www.55690.com-彩票真的没有规律吗| www.507129.com-三采网彩票官网| www.610761.com-长沙福利彩票店地址| www.688785.com-福彩双色球软件| www.198366.com-速赢彩一分快三稳赚| www.50412.com-58免费彩金平台| www.606289.com-北京体彩app下载| www.689515.com-657彩票在线| www.771612.com-凤凰时时彩的网址| 福彩网www.5522i.cc| www.ev05.com-k彩登录网站| www.9500.in-数学预测彩票| www.123780.com-体彩任选3开奖| www.15id.com-线上彩票平台出租| www.008.link-至尊彩靠谱吗| www.115838.com-手绘桃花图片彩铅画| www.104293.com-金牛彩票出款难| www.204655.com-江西体彩中心电话| www.835722.com-体育彩票在哪里兑奖| www.936054.com-聚宝彩票可靠吗| www.995712.com-胜负彩容易中吗| www.121270.com-意思好运的彩票群名| www.717916.com-彩虹寓意-| www.cai09.cc-快三规则-| www.089039.com-博友彩苹果版| www.5252.in-彩票站什么时候开门| www.22738.cc-天津体彩网手机版| www.293962.com-江苏福彩快三遗| www.cb2.com-3d福彩今日新鲜事| www.yl63.cc-中福彩票快三| www.5138.wang-南昌福利彩票店| www.66156.com-福彩幸运号码| www.388857.com-彩票大管家站长版| www.532380.com-百胜快三助手下载| www.611243.com-卖体彩呱呱乐赚钱吗| www.684993.com-排三乐彩论坛静态版| www.764686.com-778彩票下载| www.920613.com-彩神争-| www.974214.com-快3网彩票-| 500万彩票www.606285.com| www.809355.com-好彩客下载网址| www.904710.com-福彩快3投注网| www.974872.com-5分彩开奖记录| www.dj38.com-足球彩票玩法| www.wm81.com-999彩票网-| www.33xs.com-廉江好彩哥论坛| www.4607.com-彩民信息出售| www.419268.com-开家福利彩票店| www.0rj.cc-7乐彩app-| www.050378.com-微信里能买彩票吗| www.207275.com-彩71是什么平台| www.677633.cc-福彩22选五走图| www.775869.com-91彩票计划网站| www.862028.com-七乐彩各期中奖号码| www.931024.com-彩票体彩开奖大乐透| 爱彩乐www.209918.com| www.kt55.com-卖彩票怎么赚钱| 博友彩www.629293.com| www.7ox.com-单位年会彩票| www.359777.com-七星彩会员用户登录| www.613383.com-u9彩票网站可靠吗| www.557397.com-手机牛彩网3d字谜| www.651190.com-水彩肌理技法大全| www.770802.com-时时彩推广图片| 博友彩www.960207.com| www.66672.cc-怎么下载3d彩票| www.355748.com-易彩云彩票商家版| www.514563.com-王牌彩票是骗局| www.586860.com-南方双彩网正版| www.674178.com-古建彩绘高清大图| www.751126.com-彩票巴士网站| www.812567.com-百度快乐彩走势图| www.879555.com-三分彩稳赚技巧| www.319690.com-博彩王彩票预测| www.971493.com-我的彩票开奖查询| www.eb93.com-彩票店营业时间| www.922066.com-福彩自动彩票售卖机| 中国福利彩票www.34788p.com| www.870884.com-全民快三网页版| www.993486.com-足彩开奖时间每天| www.mx39.com-彩票缩水工具| www.2860.cx-网络禁止买彩票| www.38001.com-贵州省体彩十一选五| www.163492.com-5号彩票-| www.288132.com-优彩社区6603| www.7415.pw-色彩三要素指的是指| www.017463.com-易旺彩票注册| www.001657.com-速彩网黑平台| www.98cv.com-盛彩彩票注册| www.4040.xyz-七星彩质合路走势图| www.9860.net-架梁划彩-| www.37517.cc-网上福彩快三购彩| www.91cj.com-h辉煌彩票平台登录| www.6101.cc-白色釉上彩有毒吗| www.31382.com-快三赌大小秘诀| www.123279.com-精彩音乐汇站台杨坤| www.4802.vip-彩虹六号直播解禁| www.327372.com-七乐彩的中奖概率| www.08550.cc-福彩刮刮乐试刮| www.033698.com-易彩堂娱乐app| www.fp3.com-时时彩2星走势图| www.315466.com-江苏快三大小怎么算| www.qq90.com-福利彩票种类| www.257137.com-河南福彩快3推荐| www.345506.com-网络买彩票-| www.419338.com-金凤凰彩票下载| www.509009.com-虚拟彩票软件| www.560969.com-爱投彩票手机客户端| www.610325.com-体育彩票连串买法| www.90524.com-真三国星彩无惨| www.091192.com-365彩票手机版| www.177774.com-北京福彩官网| www.822077.com-足球竞彩网500| www.34ef.com-足彩比分预测最准的| www.587353.com-鸿发彩票的幸运快3| www.660901.com-彩票吉林快3开奖| www.8148.net-爱彩彩票网站| www.259785.com-甘肃体彩助手app| www.388479.com-支付宝还能买彩票吗|