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.97js.cc-踩台和彩排-| www.8487.cc-北京彩票店生意转让| www.39411.com-旧版九歌彩票网下载| www.ec28.com-百姓彩票是不是骗局| www.932128.com-彩票公式杀码软件| 众彩www.658960.com| www.2465.pw-重庆时时彩百科| www.n94.net-分分彩大小技巧经验| www.79uw.com-南京彩票领奖地址| www.46436.com-神彩飞杨3d专栏| www.055198.com-陕西的彩票种类| www.iz57.com-纵横彩票-| www.911735.com-东方3分彩开奖号码| www.444969.com-管吃住彩票站招聘| www.3226.wang-国家禁止网彩| www.34829.com-微信能玩快三吗| www.117503.com-凤凰快三登录网址| www.qj72.com-南粤风采好彩1结果| www.021121.com-众博彩票平台| www.099795.com-彩78下载网站| www.176681.com-福彩快三投注平台| www.685219.com-119彩票平台| www.795277.com-布衣电子报3d彩报| www.870736.com-cp彩票下载-| www.0933.biz-福利彩票销售站查询| www.lm0.cc-吉林快三今日预测| www.ss25.com-东方一分彩开奖直播| www.13om.com-福建体彩大星走势图| www.my10.com-彩票合买平台骗局| www.08cr.com-彩铅海边夕阳风景画| www.60908.com-石家庄体彩中心在哪| www.790259.com-lol炫彩皮肤官网| www.871090.com-网上彩票快三骗局| www.935888.cc-彩神uv打印机| 福彩www.2109m.com| www.8607.cn-足彩数据新浪彩票网| www.67982.com-玩网络彩票输了7万| www.736902.com-南方福彩app| www.815777.com-中国福利彩开奖号| www.815289.com-福彩排列7怎么买| www.913715.com-彩票号码预测网站| www.7951.shop-后加彩瓷器的特点| www.33077.cc-湖北快三360| www.106817.com-瑞彩祥云破解器| www.177531.com-河南福彩快乐3开奖| www.315334.com-彩虹七号-| www.392759.com-体彩昨日开奖| www.500789.cc-迷彩外套配什么颜色| www.571308.com-时时彩反长龙技巧| www.635612.com-七彩阳光广播| www.700891.com-淘宝买彩票犯法吗| www.771819.com-澳洲彩-| www.ug79.com-海南四合彩票| www.38aq.com-体彩七乐彩走势图| www.1357.xyz-28彩票网-| www.856.in-彩客篮球比分直| www.561858.com-赌彩票能发才吗| www.654226.com-中福在线即开型彩票| www.732781.com-中彩票开机号| www.806108.com-福彩快三帮投| www.879145.com-篮球彩票预测| www.949571.com-运盈彩票骗局| 中彩网www.71233x.com| www.fz41.com-福利彩票发行中心| www.zi91.com-038彩票预测| www.29hf.com-体彩中心app| www.98vk.com-竟彩网app-| www.2941.live-体彩店效果图| www.444727.com-福彩网上投注app| www.538513.com-乐彩vip众乐流水| www.608313.com-彩票跨度分析| www.676777.com-彩妆进货渠道| www.750048.com-牛彩3d.3d-| www.814149.com-安徽快三开奖app| www.886720.com-廊坊福彩坑-| www.954213.com-时时彩ios软件| 众发彩票www.656zf.com| www.924807.com-体彩彩吧开机号| 凤凰Vwww.www.fh6116.com| www.565.cc-极速赛车时时彩| www.436686.com-福利彩票7-| www.545822.com-申请开办福利彩票| www.499520.com-c九彩票-| www.579472.com-福彩3d开笑-| www.675663.com-七星彩票规律图片| www.780700.com-彩厍宝典下载安装| www.888814.com-网易彩票电脑版杀号| www.ew27.com-休育彩票-| www.xg82.com-注册送18彩票软件| www.51zw.cc-天津丰彩-| www.870.biz-时时彩缩水方法| www.4850.org-山西省体彩大奖| www.10104.com-卖福利彩票赚钱吗| www.50480.cc-彩票平台搭建开发| www.86817.cc-竞彩猫好贵啊| www.29686.com-易彩彩票软件下载| www.44hf.com-竞彩7串8容错几场| www.177.hk-大地58彩票下载| www.355275.com-昆山有福彩中心吗| www.417043.com-emoji彩虹表情| www.505627.com-蓝色炫彩壁纸| www.562817.com-福彩骰子开奖| www.352691.com-雅彩彩票真的吗| www.438377.com-彩票招商吧-| www.540635.com-驾着五彩祥云| www.610719.com-足彩胜负彩结果| www.692401.com-双色球彩乐乐预测| www.0851.pw-买彩票机器人| www.815715.com-网上即开型彩票骗局| www.8471.net-博友彩怎么提现| www.49213.cc-秒速快三开奖直播| www.643332.com-中彩网的擂台赛| www.755361.com-乐米彩票苹果版| www.872342.com-体育路体彩中心| www.14td.com-彩票联盟app| www.433328.com-贵阳彩票领奖| www.524177.com-福彩三d技巧及规律| www.2013.me-彩票大乐几个号码中| www.80in.com-体育彩票交多少税| www.1327.vip-419彩票-| www.zv67.com-彩35彩票平台| www.26dy.com-腾讯分分彩几点开奖| www.548265.com-快三和值怎样买稳赢| www.pv93.com-三分彩正规吗| www.505804.com-彩民玩黑彩犯法吗| www.931909.com-彩票中大奖图片| www.48355.com-竞彩足彩下载| www.15qs.com-中国福利彩票店图片| www.652625.com-乐彩走势-| www.743168.com-南方彩乐乐杀兰专家| www.781416.com-哪个彩票网站最正规| www.874939.com-优游彩票登陆| www.957737.com-揭露时时彩骗局| www.4ci.cc-一同事每天必买彩票| www.6369.in-3号彩票骗局| www.607908.com-韩国快三一共多少期| www.303625.com-双彩图3d双采图| www.389855.com-彩票核心秘密下载| www.548234.com-河北彩票中奖故事| www.2088.love-42彩票-| www.09040.com-东莞体育彩票中心| www.66001.cc-黄鹤楼迷彩烟| www.017202.com-吉林市黑彩-| www.528766.com-画彩虹背面图片大全| www.623576.com-彩票六等奖-| www.713177.com-注册彩票送58元| www.802965.com-长沙霞凝港福彩中心| www.891058.com-大发快三至尊彩| www.967174.com-7星彩多少天内兑奖| www.cai3744.com河南快三推荐| www.481318.com-喝彩中华报名| www.771297.com-彩虹无人机概念股| www.862620.com-周五开什么彩票开奖| www.963466.com-彩礼顺口溜视频| 如意彩票www.167686.com| www.654425.com-福州市福彩中心地址| www.801998.com-彩天堂平台注册| www.893867.com-彩61app苹果| E彩堂www.9818f.cc| www.1826.xyz-爱彩网官网下载| www.316237.cc-竞彩店如何开| www.389666.cc-电子竞技lol彩票| www.602636.com-彩票破了-| www.709838.com-网络彩票代购合法吗|