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天

知道了
百盈PK10 www.610571.com-福彩3b开奖号码| www.179071.com-安徽省福彩快三玩法| www.116818.com-精彩足球赛作文| www.996182.com-足彩开奖结果及奖金| www.fk07.com-湖北快三稳定计划| www.86763.com-竞彩猫女主持人小暖| www.101523.com-腾讯彩票竞猜补偿| www.36003.com-彩皇网怎么样| www.301978.com-山西快三开奖走势图| www.411382.com-七彩云南购物陷阱| www.563394.com-彩票中奖查询app| www.655659.com-开发彩票分析软件| www.729714.com-彩票恶搞生成器| www.800129.com-博彩注单被改| www.872940.com-彩人帮专家专栏| www.899148.com-胜负彩数字代表| 大赢家彩票网www.83033l.com| www.962183.com-彩神安卓版下载| www.tw8.com-爱彩乐专业版大发| www.0081.cn-福彩1d中奖多少钱| www.670540.com-七星彩最好开奖| www.720096.com-购买足彩技巧经验| www.239197.com-彩票诈骗案例| www.5261.vip-彩6彩票怎么样| www.855861.com-七乐彩10个号中5| 聚福彩票www.50989j.com| www.gu27.com-彩票如何设置返点| www.040558.com-十分彩计划app| www.26216.cc-关于彩虹的励志句子| www.198346.com-福彩3的正版藏机图| www.509737.com-博彩平台是合法的吗| www.2281.xyz-彩吧图迷库-| www.7707.cc-玩快三那个平台好贷| www.23468.com-五分彩有什么规律| www.25ni.com-人民网彩票牌照| www.6110.biz-奥客足彩网-| www.ve46.com-南京福彩中心| www.597777.com-新彩计划软件手机版| www.3296.biz-彩色简笔画风景| www.da69.com-命中中彩专栏| www.873388.com-体彩号码推荐号码| www.989655.com-香港的彩票网站| www.ri43.com-快三修改器-| www.s69.com-湖北快三在线购买| www.54rr.com-彩票用他人账号代玩| www.0881.net-博彩官方论坛| www.554597.com-彩票分析预测表格| www.324300.com-彩票大全网址| www.xi81.com-优乐彩app-| www.cp6119.com-中国福彩下载| www.xb62.com-微彩网是骗人的吗| www.73mt.com-可信的彩票软件网站| www.6094.biz-美国加州彩票怎么买| www.788989.com-竞彩投注比例官网| www.972338.com-彩票智能分析| www.bg26.com-私彩网站-| www.451544.com-幸运分分彩是什么| www.506674.com-乐彩双色球字谜来区| www.591619.com-网投平台博彩反水高| www.664599.com-中国更懂便民彩吧| www.752638.com-最新彩票平台排行榜| www.985332.com-竞彩足球足彩| www.fr46.com-快三儿遗漏结果| www.654138.com-聚彩app下载安装| www.737992.com-乐喜彩票微信骗局| www.06no.com-河南体彩电话| www.438.cm-256博彩app-| www.380101.cc-奥客彩票手机网| www.836908.com-立彩彩票正规| www.yh36.com-体彩二十选五走势图| www.779125.com-55125彩吧图| www.978343.com-二手彩钢板大量出售| www.yx05.com-香港快乐彩票| www.303012.com-97彩票下载app| www.ja15.com-福彩端-| www.260298.com-彩票九是否合法| www.2606.com-北京福彩对奖方法| www.9465.me-美国旅游能买彩票吗| www.388073.com-华彩咨询集团白万纲| www.592201.com-彩票站一张挣多少钱| www.801927.com-山东青岛快三| www.176607.com-彩票计划群真的假的| www.04wv.com-彩色铅笔素描教学| www.171771.com-彩迷-| www.49500.cc-时时彩后一必中规律| www.388408.com-福彩票银海报| 大奖彩票www.djcp234.com| www.201469.com-够力七星彩新版本| www.825938.com-教你七星彩的规律图| www.02ur.com-买彩票是假的吗| www.867893.com-南国体彩论坛图规| www.722616.com-博雅彩票怎么做代理| www.823615.com-福彩快3微信群| www.923269.com-小店宝彩票中了| www.998082.com-葫芦娃论坛香港彩票| www.te00.com-快三开出豹子后| www.187.pw-获奖彩铅画作品| www.6913.top-时时彩输的是心态| 大赢家彩票www.599830.com| www.95334.com-足彩初盘是什么意思| www.8843.me-蓝狐计划博彩| www.67280.com-荆州福彩兑奖地址| www.786515.com-彩票试玩大全网| www.957578.com-北京福利彩票有哪些| 99彩票www.653355.com| www.50014.cc-华宇彩票是真的吗| www.h18.club-排三南方双彩试机号| www.62575.com-雪园足彩比分直播| www.053229.com-太原彩票站转让| www.694822.com-体彩是赌博-| www.6696.net-吉安彩票管理中心| www.617665.com-人民币彩礼图片| 利盈彩票www.307797.com| www.107042.com-澳洲5分彩能赢钱吗| www.88329.cc-彩票白菜app论坛| www.2600.pw-网上彩票诈骗案例| www.95.link-彩虹的比喻句二年级| www.774715.com-七乐彩规则怎么玩| www.869217.com-彩票密码解密中奖号| www.935393.com-大乐旺彩奖金计算器| www.982771.com-彩票365天-| www.lh9.com-彩票快三技-| www.040700.com-永利国际买彩票| www.27466.com-快三走势圄-| www.zh01.com-七乐彩专家免费预测| www.650767.com-海边沙滩水彩画| www.019491.com-江苏省体育彩票11| www.543006.com-神彩通三中三会员| www.72220.cc-广西快三购买技巧| www.036812.com-竞彩官方欧赔对比| www.717918.com-彩客比分网-| www.058720.com-中国足彩网足彩| www.774043.com-浙江11选五爱乐彩| www.880840.com-安徽福彩发行中心| www.eu7.com-时时彩图-| www.5952.cc-幸运彩走势图软件| www.54308.com-时时彩刷漏洞真的吗| www.014830.com-快彩王在哪下载| www.258234.com-皇都彩票提现快| www.227714.com-彩票中奖概率| www.240833.com-3d彩乐乐预测| www.492803.com-竞彩足球欧赔心得| www.662938.com-福彩3d易彩网| www.790830.com-申请免费彩金58| www.916622.com-私彩平台修改器| www.994801.com-好彩客最新版本苹果| www.gw96.com-共享彩票app下载| www.h49.shop-彩票开奖结果今天| www.977377.com-河南两万彩礼摄像头| www.581236.com-外围彩票网站对比| www.673196.com-怎么查附近彩票店| www.737484.com-福彩3d井奖结果| www.800016.cc-湖南福彩走势图| www.862345.com-全民彩票官方版| www.911682.com-福彩3d拖拉机玩法| www.967231.com-福彩顺口溜-| PK彩票www.8499x.com| www.hc56.com-福利彩8平台合法吗| www.h92.club-七乐彩的中奖概率| www.32pg.com-长沙市福彩中心官网| www.2297.net-皇家科技彩库宝典| www.8337.xyz-彩票3分钟一把| www.526944.com-秒秒彩怎样才能赢钱| www.819698.com-海南七星彩资料|