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天

知道了
9彩注册 www.817317.com-8号彩票是马云的吗| www.949142.com-电脑彩色打印机| 彩之家www.55czj.com| www.ez99.com-破解幸运快三软件| www.xx19.com-337彩票软件下载| www.24xq.com-体彩排列3预测定胆| www.92bb.cc-彩票代打赚佣金| www.3017.cn-360领导者彩票| www.8342.com-帮朋友买重庆时时彩| www.32617.cc-政府会管结婚彩礼吗| www.80654.cc-足彩竞猜骗局| www.028745.com-678彩票网app| www.101176.com-微彩娱乐官网| www.172523.com-什么是快三彩票| www.459934.com-彩世界开奖下载| www.555079.com-五万彩礼-| www.616555.com-恒彩注册账号| www.680831.com-大乐透预测网易彩票| www.754666.com-王牌彩票购买平台| www.956072.com-快三彩票网是真的吗| 世彩堂www.5854z.cc| www.ei52.com-广西快三预测开奖| www.wt28.cc-彩票指南网-| www.15yg.com-中国双色球福利彩票| www.854.mobi-时时彩输死了怎么赢| www.5162.biz-2019亚洲杯竞彩| www.05321.com-彩票预测推荐下载| www.51654.cc-关注一下彩票开奖| www.96161.com-福彩与慈善的含义| www.060391.com-幸运彩分分彩网址| www.806414.com-申航彩票网站| www.874503.com-福彩3d老谢说彩| www.023510.com-体彩福彩速查表图| www.737306.com-众彩网址-| www.0792.me-下彩是真的吗| www.8277.loan-九九彩票怎么样| www.68990.com-印尼五分彩开奖软件| www.108098.com-河北快三是合法的吗| www.202263.com-826购彩合法吗| www.279585.com-时时彩出豹子的预兆| www.520425.com-彩票是穷人改变命运| www.594682.com-nba篮彩预测分析| www.673458.com-福彩走试图-| www.980147.com-彩票站每月怎样对账| www.fu39.com-河北燕赵福利彩票网| www.j80.org-体彩竞彩比分计算器| www.48lb.com-明发彩票提现快吗| www.2258.site-福彩刮刮乐福运红包| www.01973.com-中华彩吧-| www.61561.cc-彩6彩票手机客户端| www.039898.com-福彩全天计划| www.155501.com-大通彩票app导航| www.260321.com-网上彩票算赌博吗| www.337109.com-彩票33平台-| www.414808.com-竞彩串关玩法多少钱| www.541535.com-幸运彩开奖结果| www.654729.com-欢乐时时彩是真是假| www.743250.com-3d彩票规律技巧| www.833686.com-乐亿彩票下载| www.898339.com-彩票代理怎么拉会员| www.965974.com-51彩票平台-| www.oy60.com-五省快三高手走势图| www.06me.com-澳门彩开奖结果| www.75mt.com-天霁彩票预测网| www.1716.wang-内蒙行快三形态| www.9885.cc-经财政部批准的彩票| www.57692.cc-香港5分彩-| www.016552.com-正规的快三app| www.087223.com-福、彩双色球| www.155311.com-足彩14场开奖时间| www.276956.com-福彩动物总动员规律| www.379355.com-nba体彩盘口| www.503530.com-东森彩票平台安全吗| www.572967.com-江西快彩乐-| www.644577.com-足彩最新伤停| www.768143.com-海外彩票网站| www.858442.com-时时彩吃大赔小| www.959934.com-百盈时时彩正规吗| E彩堂www.9818o.cc| www.dc52.com-福彩彩宝网开机号| www.us87.com-彩票的专业术语| www.09li.com-大通彩票注册官网| www.5315.com-1号站彩票平台注册| www.11856.cc-彩票最新免费送彩金| www.53382.cc-彩虹软冰淇淋机价格| www.006165.com-好彩2中奖奖金多少| www.100350.com-乐彩客app苹果| 大赢家彩票网www.83033d.com| www.yb78.com-锋彩直播-| www.442445.com-欧冠彩经-| www.k20.cn-中国彩吧更懂彩民| www.41xg.com-彩票新浪彩票网| www.461.in-福彩3d三毛图库| www.4222.xyz-优乐彩不能登录| www.9712.org-被人追杀买什么彩票| www.062695.com-河内彩最新开奖号码| www.177452.com-分分快三计划网| www.248682.com-福彩3冂-| www.318763.com-七星彩的各种对数| www.456170.com-梦见死人彩票怎么买| www.542604.com-福利彩票快乐彩开奖| www.659640.com-竞彩推单哪个靠谱| www.760028.com-好彩赢三家-| www.855713.com-彩票目前最-| www.914009.com-排三乐彩网首页| www.967465.com-彩票交流微信群名字| www.gj85.com-众彩彩票-| www.yc81.cc-江西体彩多乐彩玩法| www.17eo.com-俩夫妻想象中彩票| www.776.gg-怎么破时时彩的规律| www.5708.vip-宋代三彩瓷-| www.07134.com-彩报3d澳门-| www.48044.com-彩票之冢-| www.89047.com-亿盈彩票app| www.036889.com-竞彩官方欧赔技巧| www.261657.com-竞彩足球混合过关| www.351409.com-花多少钱买彩票| www.422885.com-我要下载彩乐乐| www.513589.com-时时彩二星杀号| www.578111.com-佛山体彩中心地址| www.641559.com-福利彩票广告图片| www.804977.com-直投彩色沥青颗粒| www.873674.com-今天彩票的试机号| www.965311.com-江苏快三3中奖技巧| www.oi62.com-体彩大乐透奖金查询| www.u99.in-梦见彩票中了三十万| www.43xn.com-三分钟跑马彩票平台| www.376.cc-福彩3d实票晒| www.3336.cc-日本全彩本子| www.58090.com-彩票有官方app吗| www.030522.com-百度彩票软件| www.133424.com-河南彩色路面材料| www.202984.com-快三预测神器| www.267830.com-竞彩足球必发指数| www.392206.com-福利彩票双色三等奖| www.520675.com-欢腾彩票是真的吗| www.635813.com-七彩娱乐云南麻将| www.728464.com-重庆大快三下载安装| www.795990.com-廊坊彩票站广阳区| www.865147.com-華彩-| www.933156.com-玩五分快三靠谱吗| www.976641.com-利彩开奖排列三| www.ot74.com-福彩17500首页| www.7cx.com-体育彩票结果查询| www.55uf.com-怀化彩票中奖| www.734.tv-时时彩五星组合规则| www.88391.cc-九九玩彩票首页| www.968696.com-帮别人刷彩票犯法嘛| 网易彩票www.07163r.com| www.055187.com-彩票买什么种类| www.210668.cc-快三代理平台| www.273266.com-福彩是国家的吗| www.382027.com-更多精彩敬请期待| www.525996.com-双色球彩88网| www.616869.com-联发彩票网可靠吗| www.678579.com-中福快三网彩票吧| www.749504.com-彩票类上市公司| 众发彩票www.878zf.com| www.jl86.cc-彩票漏洞骗局| www.k15.com-山西体彩网彩| www.60hq.com-银彩会-| www.2144.in-吉林快三计划网站| www.8795.biz-足彩智能分析| www.53909.com-时时彩倍投的规律|