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天

知道了
彩票123现在叫什么名字 www.192289.com-好彩36选7-| www.6663.bid-彩1平台是黑平台呢| www.92114.com-免费资料大全牛蛙彩| www.70rz.com-买珠宝送彩票| www.263504.com-吉林快三中奖技巧| www.391600.com-全民乐彩31363| www.908606.com-足球彩票玩法说明| www.980569.com-甘肃快三杀号带验证| www.sm62.cc-重庆时时彩豹子记录| www.k63.me-信彩分分时时彩计划| www.40pa.com-福彩3d必备软件| www.3896.in-唯彩网看球-| www.7245.org-下载重庆市彩时彩| www.cd00.com-新疆福彩时时开奖| www.z80.name-81彩票苹果版| www.141181.com-老猫看彩快讯77期| www.238361.com-河南快三模拟| www.89967.com-七星彩摇奖是随机吗| www.794114.com-新彩吧图谜字谜| www.895765.com-重庆福彩网合买| www.969608.com-足彩足球竞彩比赛| www.cp1150.com-快三缩水软件手机版| www.vq71.com-我要看安徽省快三| www.30aj.com-卡通人物彩铅画教程| www.002369.com-百盈彩票贴吧| www.104115.com-彩票辅助透视挂| www.0410.me-迪士尼彩乐园官网| www.8763.org-福彩直播小炮下载| www.1458.win-彩虹玫瑰花语是什么| www.577345.com-福彩三d速查表| www.668515.com-掌上彩票官网下载| www.751485.com-关小刀足彩解盘| www.868218.com-福星彩开奖网| www.978764.com-500万彩票网投注| www.645.me-凯利公式彩票| www.06571.com-彩乐网福中网香港| www.123797.com-彩票ag官方网站| www.892597.com-777彩票-| www.980904.com-福彩快三守号计划表| www.dx16.com-易彩彩票安全么| www.39662.cc-八角星彩票网破解版| www.2301.com-天下好彩与你同行| www.655044.com-海南七星彩平台系统| www.cp600.com-大发时彩主页| www.pl87.com-大发时时彩人工计划| www.48vh.com-彩虹解地下载| www.1070.vip-彩票可以买几注| www.114063.com-福彩3d林涛和值谜| www.205602.com-快三开奖结果网易| www.498688.com-腾讯体育怎么买竞彩| www.662310.com-龙虎时时彩怎么代理| www.4864.me-加彩票点微信买彩票| www.29775.cc-福利彩票今天开奖吗| www.687112.com-购体彩大乐透| www.765569.com-体彩即开型彩票| www.811662.com-江苏快三跨度图| www.888009.com-双色球开机号牛彩网| www.832297.com-七彩视界最新版本| www.078086.com-快三单双赌博技巧| www.152014.com-南京福利彩票官网| www.491094.com-abc彩票计划网站| www.777908.com-汇彩网有邀请码吗| www.jp07.com-彩票平台黑名榜| www.cv68.com-彩神通金码-| www.9636.space-大乐透经彩网走势图| www.96179.cc-彩票识别码在哪里| www.080879.com-魔方彩票官网| www.128228.com-新胜彩票官网| www.5940.com-500彩票账号注册| www.527550.com-时时彩独胆双胆技巧| www.989412.com-彩83是黑平台吗| www.cx35.com-神彩网下载-| www.151983.com-3d彩票软件27款| www.272782.com-彩票到年底-| www.130004.com-体彩18084期| www.237880.com-福彩官网app| www.ex13.com-123彩票网站大全| www.646035.com-竞彩能赚钱吗| www.908930.com-彩票双色球规则| www.979594.com-雷诺好彩1-| www.vf.com-中彩网3d走势图| www.y55.cm-福彩15选5开什么| www.132623.com-彩票解梦大全| www.941069.com-快三如何做代理| www.w59.xyz-好彩频道往期直播| www.0131.net-彩色的组词有哪些| www.xo45.com-福彩3d图迷总会| www.522.in-新时时彩怎么停了| www.28767.cc-易彩快3开奖直播| www.031826.com-釉下五彩瓷特点| www.149285.com-c38com彩票-| www.393828.com-体彩刮刮乐兑奖问题| www.637365.cc-彩虹5无人机尺寸| www.vn09.com-七乐彩走势图新浪| www.22pt.com-竞彩篮球混合过关| www.723234.com-dc东彩娱乐-| www.849999.com-qq分分彩开奖网| www.984017.com-下载购彩彩票手机版| www.qx50.com-腾讯时时彩规则| www.cp244.com-彩票开奖查一下| www.208411.com-腾讯分分彩开奖结果| www.273561.com-彩票案于海最终结果| www.347495.com-乐福彩票是什么| www.0858.me-快乐彩票客服电话| www.6670.top-查上海快三开奖号| www.65962.cc-玩快三输了怎样解决| www.058567.com-彩99官方-| www.871603.com-中彩娱乐下载手机版| www.946519.com-福建体彩兑奖| www.990809.com-彩票不中包赔| www.bj22.com-全民快三下载| www.ph19.com-足球彩票十四场实弹| www.21bf.com-山西福利彩票app| www.94ka.cc-手机365彩票| www.245674.com-易彩堂彩下载| www.417754.com-彩虹6号围攻图片| www.520068.com-大发快三计算规律| www.575879.com-牛彩彩民乐| www.650255.com-福建爱彩乐-| www.8728.bid-彩票奖金都有多少| www.662601.com-重庆实时彩代理返点| www.745077.com-天下彩234-| www.829770.com-联中彩票-| www.899251.com-七星彩头奖多少钱| www.962461.com-双色球彩票中彩网| 88彩票www.8839b.com| www.83653.com-兼职彩票平台可靠吗| www.528797.com-今天彩票指南电子报| www.598082.com-足彩比赛结果及奖金| www.657262.com-安徽福彩兑奖中心| www.715594.com-彩票合买实体店出票| www.781201.com-彩票收税多少| www.970604.com-深圳彩票中奖| www.gc71.com-福彩排列7开奖结果| www.703770.com-分分中彩票官方网站| www.791178.com-彩票金融-| www.856871.com-河南福彩幸运彩玩法| www.905836.com-亚搏彩票app| www.956716.com-14场足彩即时欧赔| www.993214.com-中彩票比赚500万| www.cp7772.cc-快彩是正规的吗| www.382000.com-西安福彩转让| www.189926.com-买彩票平台-| www.324355.com-国乐彩软件-| www.428118.com-足彩310缩水软件| www.562826.com-重庆快三玩法介绍| www.650162.com-竞彩足球8串1技巧| www.266179.com-河北体彩3d走势图| www.101327.com-官方快三大小作假| www.974213.com-三块彩票-| www.hi58.com-老梁揭秘彩票被打脸| www.13kr.com-中国七星彩开奖号码| www.140391.com-北京快三的预售时间| www.372385.com-四系乃漫画全彩色| www.100067.cc-广东体彩11选| www.234910.com-福彩论坛-| www.324814.com-三地彩票图迷| www.410425.com-彩票免密充值平台| www.542754.com-正发彩票-| www.626520.com-福彩三的千禧试机号| www.729398.com-七意彩app-| www.806597.com-老猫出彩快讯| www.886734.com-微信上那个中国彩| 500彩票www.26299x.com|