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天

知道了
必赢3D www.118313.com-体彩排列三彩吧预测| www.44203.cc-彩吧p3试机号| www.rf91.com-贵州快三预测推荐表| www.225012.com-福彩幸运快三邦投| www.929204.com-玩彩下载-| www.997852.com-福彩3d对子-| www.bg03.com-8k彩排怎样看走势| www.uv81.com-湖北快三牛采走视图| www.17wh.com-湖南动物彩票开奖结| www.99la.cc-分分时时彩开奖公告| www.86jv.com-快乐彩中奖号码查询| www.6323.com-搜狐福彩体彩开奖| www.742222.com-下载好运来彩票| www.242236.com-中彩网双色球开机号| www.127892.com-彩虹哥官方网站| www.730514.com-新彩吧字谜画迷总汇| www.860178.com-合肥彩票店转让| www.954207.com-88平台时时彩网站| www.ns94.com-拍彩票查中奖| www.5252.in-彩票站什么时候开门| www.966077.cc-福彩3d大小玩法| www.ti97.com-公益彩票app| www.40xv.com-七星彩福星长条版| www.323908.com-新加坡彩票营业时间| www.571752.com-时时彩后二技巧绝密| www.081171.com-买彩票稳赚不赔计划| www.195127.com-黑客破解重庆时彩彩| www.076178.com-彩票256合法吗| www.zo71.com-中国竞彩网竞彩直播| www.64088.com-爆炸头足彩博客| www.07889.com-500彩票开奖结果| www.82799.cc-2o13彩票网-| www.628126.com-看桂林彩调-| 500彩票www.50026q.com| www.sc30.com-吉林快三能输钱| www.08kv.com-福彩三d似几号| www.36007.com-金龙彩票下载| www.772264.com-荣鼎彩有谁黑过| www.871493.com-旭彩文学网-| www.949571.com-运盈彩票骗局| 中国福利彩票www.33588i.com| www.799462.com-彩吧彩票合法吗| www.5629.pw-彩票开奖42期| www.4589.net-玩彩票亏损安抚客户| www.18857.cc-m5彩票注册-| www.71570.com-快钱彩票怎么玩法| www.033956.com-解密牛娃彩票| www.147275.com-彩票猜大小规律| www.789459.com-下载体彩竞彩网站| www.15tg.com-彩票咋买-| www.45773.com-大中华网上彩票| www.306556.com-d9彩票.cc-| www.3484.net-彩票改单合作| www.855769.com-七乐彩到哪里兑奖| www.952418.com-七彩票开奖号码| 福彩www.86267r.com| www.766222.com-彩投彩票gt-| www.864805.com-筛子彩票玩法| www.937306.com-湖北彩钢活动板房| 博亿彩票www.626by.com| www.41310.com-网上彩票赚钱是真的| www.633730.com-腾讯分分彩后四毒胆| www.777875.com-网易手机福彩查询| www.lg05.com-全能预测彩票软件| www.14ts.com-彩宝照片-| www.27098.com-重庆时彩数字规律| www.15238.com-嘉兴福彩招标| www.530.org-利彩平台网址| www.8876.xyz-竞彩串关奖金封顶| www.172976.com-分分快三开奖实时| www.331738.com-51彩票app-| www.513855.com-网络买彩票靠谱吗| www.587422.com-足球竞彩软件排行榜| www.883124.com-多彩投官网电话| 大赢家彩票平台www.210927.com| www.655477.com-王牌彩票破解| www.9518.net-四位码彩票-| www.3447.top-排列三彩票分析软件| www.612982.com-二元彩票开奖结果| www.691911.com-彩票中心客服电话| www.36378.cc-时时彩走势技巧分析| www.271729.com-湖北快三彩票| www.130784.com-彩票购买app| www.358330.com-买彩票是一大错误| www.553718.com-运城老张体彩推荐| www.664466.com-七乐彩直播那个台| www.781649.com-湖北省福彩电话号码| www.896633.com-篮彩看盘技巧| www.989415.com-快三有复式吗| www.lp00.com-福利彩票发行宗旨| www.02uq.com-福彩骗局真的假的| www.343341.com-必中彩票首页| www.457016.com-恒彩国际彩票怎么样| www.562546.com-外围彩票网站合法吗| www.687103.com-湖南省体彩中心位置| www.755447.com-体彩35选7走势图| www.816789.com-网络快三输钱| www.886790.com-大大中彩票靠谱吗| www.949312.com-快三彩票怎么下载| 818合彩www.www.9889hc.com| www.138988.com-上海彩票集中投注| www.024673.com-中国福彩积分卡| www.579282.com-手机幸运彩票| www.611574.com-真实的彩票网站| www.87050.com-12580彩票-| www.171238.com-下载河北快三走势图| www.966093.com-福彩3d倍投计算器| www.cx52.com-私彩凤凰娱乐靠谱吗| www.18aq.com-注册送彩金88| www.195660.com-体彩排列五开奖直播| www.033821.com-神彩争霸8最新下载| www.220863.com-华东福彩6+1| www.336756.com-买彩票app官网| www.507354.com-七星彩明月铛| www.667456.com-球彩台節目表| www.792301.com-彩票店最高兑奖多少| www.913978.com-彩16软件-| 全民汇彩票www.52303l.com| www.7902.vip-彩票的公式有用吗| www.011001.com-玩快三大小稳赚技巧| www.073587.com-福利彩票中心官网| www.210580.com-山西体彩快乐十分| www.51sl.com-时时彩视频开奖下载| www.1212.online快三最长的龙有多长| www.5437.org-吉祥8彩票怎么样| www.5219.wang-注册送300元彩金| www.16133.cc-微信群江苏快三| www.59212.cc-福彩三d秘诀| www.236692.com-国外彩票app| www.29252.com-手机买彩票平台| www.483179.com-福彩大小单双| www.110748.com-ee彩软件-| www.794340.com-中国的彩票算赌赙吗| www.993703.com-足彩今日单关| www.io15.com-山东福彩群英会直播| www.39ms.com-东莞市体彩征召| www.270483.com-旧版彩77下载| www.59zh.com-彩票中奖号排三| www.8974.me-重庆时彩网盘代理| www.166929.com-一分快三是什么| www.425761.com-彩富会员料-| www.wr09.com-快三彩票开奖平台| www.42rn.com-原彩显示没了| www.6192.shop-靠谱的时时彩网站| www.674498.com-淮安彩票店转让信息| www.766642.com-福彩选4开奖| www.862305.cc-新快三和值技巧| www.909410.com-预测彩票-| www.960357.com-12彩票安卓-| 趣彩网www.qucw2.com| www.22072.com-足彩分析师怎么赚钱| www.65180.com-青海体育彩票| www.906161.com-1分钟开奖的时时彩| www.958904.com-吉林快三购买技巧| www.995887.com-好彩店彩票怎么了| www.gr7.com-快三单双全天计划| www.kj96.com-快2彩票玩法| www.wx30.com-江苏快三开下载安装| www.724836.com-支付宝借给博彩收款| www.802807.com-体彩排列三开奖规定| www.868801.com-七星彩第七位杀号| www.952852.com-旺彩预测号码| 风之彩www.44fzc.com| www.04cv.com-v8彩票app网站|