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.78028.com-新浪彩票预测专家| www.306555.com-澳发彩票网站正规吗| www.678863.com-四季彩怎么申请代理| www.288322.com-爱彩乐快乐十分| www.160730.com-众彩彩票老板是谁| www.264944.com-福彩3d试机号破解| www.096013.com-彩票代打兼职违法吗| www.8499.wang-易彩邀请-| www.589310.com-体育竞猜彩票玩法| www.936236.com-买彩票能赚钱吗| www.14ed.com-睛彩宁夏-| www.10766.cc-鹰彩注册-| www.318561.com-图表走势贵州快三| www.mh13.com-亚博彩票登录| www.41rn.com-网易彩票结果| www.98862.cc-能买彩票的时间| www.096289.com-彩票店的刮刮乐| www.196555.com-安徽省快三查询| www.969224.com-中国彩虹计划| www.637354.com-重庆时彩时彩万位稳| www.609227.com-彩票平台出租试用| www.699294.cc-中国福利彩票大乐透| www.830839.com-新彩彩票黑钱吗| www.923739.com-快频彩票是不是真的| www.29vj.com-昨天晚上的福彩| www.345055.com-福彩三d神通关注| www.310553.com-3d彩票图解-| 豪彩VIPwww.771219.com| www.31822.com-易彩堂一主页| www.533130.com-彩票平衡原理| www.790797.com-红快三和快三| www.g00.me-彩票专业选号分析器| www.925560.com-旭彩美缝剂价格| www.988173.com-体彩大乐透专家总汇| www.gs19.com-体彩48l-| www.h77.org-快三算和值-| www.195718.com-快三时时彩合法吗| www.707379.com-竞彩彩票网合法吗| www.498673.com-体育彩票32期| www.123773.com-刮刮彩一包-| www.153622.com-3d福彩预测-| www.292234.com-大发系统的彩票平台| www.683528.com-云购彩票彩神| www.778449.com-迪士尼彩乐园app| www.875064.cc-彩九com-| www.59450.com-平台彩票作弊器| www.64891.com-第一红彩店合不合法| www.79ps.com-国标快三视频| www.9805.net-足彩最新缩水软件| www.65wj.com-博彩公司如何风控| www.980586.com-红金彩票平台| www.951754.com-腾讯分分彩单期7码| www.jz69.com-国外教授破解彩票| www.12bq.com-胜负彩二等奖| www.605.tv-直播重庆时时彩预测| www.8512.com-微信怎么买竞彩足球| www.700267.com-红旗彩票是真是假| www.428833.com-福彩投注站查询| www.697617.com-彩票资料免费之大全| www.559002.com-彩虹的约定儿童视频| www.629966.com-彩市新闻-| www.687587.com-非凡彩票专注原创| www.765580.com-苏宁彩票下载| www.240678.com-颖彩双色球专家预测| www.157506.com-体彩单场竞猜玩法| www.516715.com-下载app趣彩彩票| www.701151.com-中五亿美金彩票| www.788937.com-焦作泌阳彩礼多少| www.38611.cc-天津华夏快三预测| www.uk46.com-普通彩铅画星空教程| www.025.pink-七星彩番外篇明月珰| www.4915.net-中国福利彩票成立于| www.03226.com-彩票计划在哪看| www.1082.vip-分分彩害人不浅| www.666558.com-玩彩票止损止赢比例| www.765861.com-快频彩票是什么意思| www.896747.com-一分快彩怎样玩| www.968924.com-澳门彩金成功退货| www.cai1677.com快三这么玩-| www.396760.com-福彩官网3d返奖率| www.511315.com-五洲彩票正规吗| www.711959.com-彩票6十1开奖结果| www.027759.com-093彩票怎么没了| www.120107.com-宝马彩票可以玩吗| www.210416.com-黑彩如何定罪| www.642196.com-福彩logo矢量图| www.008106.com-超级大乐透彩票开奖| www.320544.com-七星彩遗漏360| www.426568.com-全民彩讯-| www.560389.com-分分快3是什么彩种| www.762971.com-秒速快三开奖直播| www.876962.com-七乐彩4个号多少钱| www.957362.com-盈盈彩注册-| 9号彩票www.80767m.com| www.313918.com-数字彩票开奖结果| www.883623.com-奔驰彩票网页| www.961625.com-哪个网站买彩票合法| 鑫亿彩www.617069.com| www.sd64.com-竞彩500比分直播| www.19cf.com-海南私彩中了不给钱| www.929797.com-七乐彩胆拖中奖规则| CP701www.cp994.com| www.188166.com-彩票算号器手机版| www.278818.com-体彩e球彩开奖| www.380708.com-七乐彩开奖是几点| www.521696.com-英皇时时彩网站| www.600110.com-买彩票人的心理| www.675804.com-体彩报排列三最新| www.771330.com-丰大彩票app| www.968068.com-英国时时彩官方网站| www.82465.com-星梦彩票综合图表| www.85iy.com-蓝彩比分-| www.221122.com-彩牛彩票-| 500彩票www.51515o.com| www.410533.com-小孩七彩球-| www.535109.com-彩票开奖6号| www.666221.com-航空彩虹股票| www.761048.com-秒速时时彩单双计划| www.841482.com-七星彩内部资料书| www.949533.com-快三甘肃开奖| 福彩www.15355w.com| www.09568.cc-大资本彩票官方网站| www.76vz.com-彩票开奘查旬| www.023632.com-七乐彩直播视频| www.14975.com-全民彩票提现快吗| www.641044.com-香港时时三分彩网站| www.667985.com-福利彩票犯案| www.766246.com-趣客站彩票靠谱吗| www.860609.com-陕西福彩快三开奖| www.923947.com-彩票机选双色球| www.65688.cc-幸运快三最多连几期| www.019631.com-哪个彩票好玩中奖高| www.251626.com-下载亚洲彩票| www.801277.com-234彩票网页版| www.896097.com-体彩天下官方网站| www.971894.com-网络上的彩票被骗| www.rb01.com-彩票中奖不捐款挨骂| www.x18.top-248彩票可靠吗| www.9651.xyz-众乐彩是黑平台吗| www.84815.com-宾利事业彩票网址| www.288537.com-微信快三赌博群号| www.25494.com-彩客完整比分水位| www.6807.vip-76cp彩票骗人| www.263.me-重庆时时彩团队| www.831720.com-超级车彩票app| www.945485.com-20元体彩刮刮乐7| 大赢家彩票平台www.369061.com| www.208228.com-腾讯分分彩走势图| www.654460.com-时时彩五星做号软件| www.765461.com-彩票反水怎么算| www.819370.com-竞彩预测套用公式| www.887937.com-博彩推广要加什么群| www.984242.com-糖果彩球-| www.pv04.com-彩168-| www.4yr.com-三d胆码彩易网| www.60ln.com-关注彩票中奖号码| www.992.date-彩票网下栽-| www.056364.com-七星彩中了两个号码| www.75qu.cc-体彩排列五和制表| www.623451.com-北京易顺百顺彩票| www.725317.com-彩票不是赌博吗| www.803712.com-香港二分彩-| www.874860.com-7k网彩票分分彩| www.939887.com-彩票平台哪个正规|