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.89qd.com-u9彩票可靠不| www.8295.xyz-江西福彩电话| www.88352.cc-彩票来自灵感| www.713053.com-网赌吉林快三| www.903552.com-贵州快三游戏规则| 易彩网www.36166t.com| www.273310.com-千亿彩票官方下载| www.692073.com-彩票系统出租| www.62595.cc-盛兴彩票v1-| www.441014.com-炫彩字体在线制作| www.404668.com-彩铅画用什么纸| www.bi32.com-中国福彩快3app| www.f33.cn-彩库宝典苹果版| www.54xh.com-彩吧助手排三走势| www.306757.com-吉祥彩票网app| www.82949.com-五百万彩票注册网址| www.0768.vip-28彩票网注册| www.77857.cc-体育彩票客服电话| www.006842.com-安徽体彩报-| www.185977.com-时时彩开奖结果奖金| www.63121.com-中国足彩网篮球比分| www.0753.love-福利官方购彩软件| www.25408.com-合肥市体彩兑奖地址| www.96526.com-于海彩票-| www.066770.com-博彩软件-| www.136573.com-易彩线路测速官网| www.215613.com-七星彩杀号公式汇总| www.52267.com-今日竞彩专家推荐号| www.949510.com-时时彩后三杀号| www.77uk.com-网上买美国彩票| 全民汇彩票www.52303y.com| www.006842.com-安徽体彩报-| www.134993.com-中彩网客服中心| www.232397.com-博雅彩票怎么赚钱| www.326617.com-福彩3d+网易彩票| www.110896.com-生日彩票计算器| www.211940.com-幸运彩河南省福彩网| www.29999.com-忆彩网-| www.019204.com-彩票之家开奖| www.427715.com-德国鲸彩漆-| www.556981.com-3d彩票网上购买| www.640567.com-麦久彩票原始网| www.731921.com-福彩快三守号窍门| www.816625.com-吉林快三最近一百| www.906802.com-中国合法彩票有哪些| www.968473.com-福彩最新造假事件| www.87ar.com-时时彩怎么当代理| www.3830.biz-福彩3d小熊猫图迷| www.71137.com-阿里彩票什么情况| www.jw93.com-彩虹代表的意义| www.6491.cc-最专业彩票销售平台| www.24617.com-购力七星彩奖表| www.cp8880.com-红快三-| www.39596.cc-九歌彩票手机客户端| www.89842.com-3期计划彩票投注| www.083002.com-福建福利彩票网| www.177485.com-极速快三计划软件| www.236822.com-中国体彩官方客户端| www.362873.com-秘鲁彩虹山形成原因| www.545250.com-快三怎样能稳赚视频| www.713961.com-双彩球下期预测号码| www.865963.com-有救济金的彩票软件| www.997875.com-3d五行走势乐彩网| www.gx53.com-彩票计划员骗术| www.16rj.com-老是幻想中彩票| www.628.cm-重庆时时彩十分| www.9547.biz-东彩娱乐是黑| www.394069.com-75秒时时彩开奖| www.538727.com-镇江体彩11885| www.109212.com-k百彩网-| www.229775.com-新彩吧图-| www.306160.com-澳发彩票网-| www.397524.com-浙江11选5爱彩乐| www.206844.com-彩68-| www.47239.com-延边福彩中心地址| www.000420.com-陕西福彩快乐十分开| www.138578.com-彩票站提成多少| www.260978.com-大乐透彩票选号神器| www.jv71.com-福彩官网开奖| www.06ly.com-兰州体彩绿翡翠| www.231544.com-彩票51中彩app| www.227763.com-众彩app-| www.014677.com-本期七星彩图规| www.111933.com-盐城彩民-| www.yh49.cc-7星彩直播-| www.62cp.com-竞彩牛人推单| www.0407.xyz-网络高频彩为什么输| www.8246.loan-258nba竞彩-| www.125247.com-爱彩彩票手机客户端| www.co61.com-k彩线路测速| www.995849.com-苹果竞彩-| www.9gk.com-体彩中六个数多少钱| www.330807.com-福彩中彩网-| www.137638.com-彩票悲剧-| www.231068.com-彩神vll-| www.841640.com-七乐彩守号精选一注| www.xe79.com-腾讯308彩票| www.35kf.com-福彩周三-| www.077692.com-大奖彩票网客服电话| www.80it.com-福彩双色球500| www.4920.pw-福龙彩票app| www.198218.com-一分快三预测| www.33012.com-福彩3d会员图| www.033042.com-盛泰彩票-| www.777277.cc-锋彩直播电视破解版| www.jr89.com-王者彩票提不出现| www.y05.com-体彩现场直播易网| www.63mo.com-湖北快三结果走势图| www.430544.com-近50期足彩星象图| www.393613.com-咸阳体彩中心在那| www.567318.com-安徽22期快三开奖| www.652575.com-排列五彩票开奖规则| www.903713.com-福彩3d金码| www.989515.com-51中彩app官网| www.na3.com-玩快三平台-| www.791127.com-宁夏彩票中大奖记录| www.883896.com-内蒙古快三摇奖现场| www.984124.com-山东福彩网官方首页| |M13Graphics-买彩票倾家荡产害人| www.51ai.com-足彩转九软件下载| www.175235.com-彩票代理拉人技巧| www.298038.com-香港有什么彩票种类| www.410677.com-彩票老店主推荐| www.027389.com-河北体彩网官| www.006554.com-公众号好彩-| www.226799.com-创彩网-| www.226992.com-快三线上投注骗局| www.1071.org-足彩10串1013| www.9860.net-架梁划彩-| www.53662.cc-时时彩预测app| www.000162.com-天津时时彩是正规| www.062975.com-加盟福彩-| www.127084.com-132彩票最新版| www.519799.com-百度分分彩-| www.581536.com-中彩手彩票官方下载| www.641968.com-体育彩票标准柜台| www.770113.com-好彩头app-| www.2001.vip-49彩票网站连| www.03165.com-35彩票是不是真的| www.57881.cc-牛彩图迷-| www.94275.com-公益体彩网-| www.054320.com-快乐彩12选5计划| www.984865.com-彩票模拟摇奖器下截| www.lm7.com-快三赢钱的技巧方法| www.un90.com-内蒙古快三一二位| www.599680.com-爱乐透彩票正不正规| www.666568.com-彩票每天有人倍投吗| www.v25.net-hc好彩网-| www.976.date-买彩票守号会中奖吗| www.cp5677.com-十分快三是国家的吗| www.uq26.com-体彩大乐透中奖号码| www.839959.com-微信pc彩票是什么| www.902368.com-购彩360彩票网| www.973694.com-河南省福利彩票官网| www.fr53.com-快三遗漏号码查询| www.wn27.com-内蒙快三28期结果| www.801089.com-郎咸平彩票-| www.879377.com-福彩新快三开奖结果| www.961869.com-三彩服饰官网| 500彩票www.50026y.com| www.22893.com-七个数字的彩票| www.093488.com-香港福彩门户地址| www.456112.com-彩虹六号对枪技巧| www.549036.com-欧冠足彩去哪里买|