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天

知道了
旺彩彩票 www.513010.com-化彩社区交流大厅| www.669246.com-彩票专业选号器| www.770788.com-时时彩后一技巧| www.899459.com-彩神通会员4码软件| www.974893.com-福彩网手机版| www.fc99.com-彩票概率学-| www.zk29.com-青蛙彩-| www.36sw.com-趣9购彩票-| www.2222.cx-体彩乐彩分解断组| www.8729.wang-竞彩足球胜负预测| www.61073.com-彩吧vip官方| www.028979.com-全球彩票app下载| www.116111.com-3乐彩网-| www.199020.com-破解广西快三| www.284044.com-彩票中了40万| www.422195.com-新浪爱彩网彩票| www.533189.com-亿彩票靠谱吗| www.639302.com-彩票店彩票安卓| www.737771.com-永利彩世界app| www.823927.com-官方彩票3d下载| www.904671.com-模拟买彩票app| www.975451.com-金盾致富团队彩票| www.fq31.com-胜利彩票app| www.d45.top-彩导航彩票汇总| www.47fx.com-彩票打票员招聘| www.0357.date-姜丽的花式快三| www.9111.site-3d走试图彩吧助手| www.55399.com-英国彩票-| www.008164.com-体彩开奖-| www.086678.com-绽放溢彩-| www.160816.com-宁夏福彩快三49期| www.291109.com-一分快三大小怎么玩| www.369624.com-体彩排3开机号查询| www.517375.com-cp816彩票-| www.593042.com-七彩app是骗局吗| www.674576.com-体彩归民政部吗| www.7584.biz-新浪爱彩安卓| www.405540.com-体彩实体店分布| www.bw24.com-广西福利彩票| www.563131.com-福彩双色球网上能买| www.658459.com-登录彩视-| www.854137.com-五分快三是真是假| www.930624.com-上海一彩-| www.988695.com-全民中彩票官网网址| www.nw4.com-怎样玩快三会赚钱| www.pq40.com-3d快三开奖结果| www.13au.com-2952彩票-| www.90ff.com-福彩三d彩吧助手| www.2971.org-新疆时寸彩开奖号码| www.8958.in-能买彩票微信公众号| www.69050.com-网上彩票有挣钱的吗| www.033223.com-网易福彩下载安装| www.115233.com-顶呱刮彩票a| www.193770.com-10选5彩票的玩法| www.272536.com-吉林快三计划网址| www.395118.com-彩虹代刷正版查询| www.578146.com-彩票一宝贝预倾| www.657524.com-惠民乐彩票下载| www.752961.com-速赢彩彩票是真的吗| www.865259.com-下彩网网页-| www.922569.com-火山彩票-| www.974949.com-福彩投注站编号查询| www.cu33.com-福彩3d淘宝网| www.vx63.com-江苏快三开始时间| www.15hp.com-腾讯时时彩二期计划| www.574.biz-蜂鸟五分时时彩计划| www.4707.com-福彩5分快3计划| www.04213.com-下载全中彩票| www.51197.cc-彩票网站充值送彩金| www.95996.com-体彩专管员压力| www.060662.com-公职人员参与黑彩| www.656524.com-快3彩票二维码| www.761493.com-饰演好彩妹-| www.854227.com-多彩app-| www.922267.com-人人在线彩票| www.981355.com-苹果7钢化膜彩膜| www.di35.com-最热门的高频彩种| www.vf05.com-今天福彩3d水果图| www.13zz.com-五分⑥和彩怎么玩| www.85cs.com-网络彩票能赚吗| www.2232.date-大和彩网站-| www.7888.pro-中发彩票官方网站| www.28616.cc-男主买彩票中奖后将| www.91779.cc-买彩票用什么软件好| www.062373.com-数据分析快三计划| www.223450.com-足彩胜负彩500| www.297033.cc-诈骗彩票-| www.365877.com-彩铅阴影文字| www.456040.com-手机上玩彩是骗局吗| www.545299.com-彩票平台推广赚钱| www.672027.com-彩票店销量急剧下降| www.751094.com-玩彩票玩的就是心态| www.821353.com-牛彩彩摘网福彩网| www.893257.com-彩名堂计划好用吗| www.959743.com-盈彩官网江苏快三| 乐博彩票www.67258a.com| www.ga24.com-买彩票中大奖的技巧| www.xv47.com-d9彩票.cc-| www.20tv.com-大智慧彩票概念| www.0451.com-怎么弄网址平台彩票| www.6980.biz-时时彩高手玩法| www.18931.cc-3d福利彩票今天| www.60104.com-福利彩票20期| www.031176.com-160彩票平台| www.107978.com-彩票是不是内部作弊| www.172322.com-一定牛彩票网| www.276258.cc-湖北彩3d-| www.362303.com-彩虹写一段话对妈妈| www.446954.com-今晚竞彩比赛直播| www.537011.com-含彩的微信名| www.629369.com-中国足彩网5o0| www.696565.com-陈教授研究彩票的| www.771013.com-北京极速快三| www.895153.com-万鑫彩票-| www.951174.com-立彩助手app下载| www.991042.com-湖北省体育彩票| www.vp.cc-皇都彩票官网| www.mt33.cc-中彩彩票软件| www.z33.top-彩票站前景-| www.51lj.cc-双色球新浪彩票网| www.767.me-彩票之家正原创强料| www.4532.com-下载彩是要好版本的| www.01187.com-足彩赔率-| www.020655.com-福利彩票总部在哪里| www.087046.com-福彩网软件靠谱吗| www.148806.com-韩国有快三-| www.256867.com-北京快三豹子走势图| www.327044.com-免费彩票资料大全| www.393788.com-福彩票中奖号码明日| www.533523.cc-彩票对压玩法| www.861260.com-福利彩票开奖号码一| www.953490.com-竞彩足球兑奖规则| 凤凰彩票www.77803z.com| www.gu86.com-彩票快三计划群| www.wz79.cc-七星彩网易开奖时间| www.10fj.com-彩票中五位数多少钱| www.82xl.com-彩票中奖的算法公式| www.1713.cc-彩票中彩冈-| www.15756.cc-彩铅画的教程| www.54066.com-时时彩分成-| www.93329.cc-海南七星彩今日开奖| www.042913.com-如何用美团买彩票| www.151719.com-连连中彩票官网| www.233441.com-福彩3d对子走势图| www.299123.com-彩神吉林-| www.360618.com-2月26日湖北快三| www.442033.com-福利彩票专业版| www.525365.cc-长春黑彩最新新闻| www.632119.com-彩九时彩-| www.698208.com-福彩3d报纸图迷| www.767258.com-今日竞彩比分推荐| www.862536.com-澳客网彩票预测专家| www.908408.com-七星彩抓奖规律今天| www.957426.com-王牌彩票网-| www.994461.com-数字彩票的实战技巧| www.cp8938.com-北京福彩网快三开奖| www.lu93.com-时时彩开奖历史| www.c92.club-七星彩09复式| www.23yu.com-彩贴的图片-| www.707.cm-世界杯彩票胜平负| www.3877.biz-彩吧三d图谜第三版| www.8683.loan-七乐彩诗谜-| www.49011.com-浙江彩票20选5| www.88719.cc-1888玩彩票网|