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.880590.com-百胜彩票软件| 彩票500万www.695037.com| www.yk8.com-快乐彩票官网| www.vx15.com-快三赌博-| www.yk86.com-买体育彩票中奖技巧| www.55rd.com-体彩泳坛开奖| www.84bw.com-黑彩票网站大案| www.028395.com-稳的彩票台子| www.134872.com-龙彩居士排列三预| www.220548.com-优信彩票大发快三| www.2292.in-百信彩票app| www.101927.com-做足彩代理的套路| www.211622.com-违法私彩-| www.15273.cc-浙江体育彩票微信| www.880049.com-彩票刷流水是犯法嘛| www.88yk.com-如何建立私彩平台| www.4662.top-买彩票一直买一注| www.16981.cc-7星彩兑奖-| www.635342.com-七彩的假期作文| www.961227.com-腾讯分分彩计划辅助| www.dm79.com-大马彩最新开彩成绩| www.85zv.com-好好彩网-| www.5304.cc-买分分彩的技巧| www.21218.com-买复式彩票怎么玩| www.653601.com-天下彩中堂彩| 亚投彩票www.ya230.com| www.yw98.com-中彩在线是什么| www.48tz.com-i8彩票官网-| www.884541.com-排列三乐彩网断组| www.bh37.com-唐龙说彩大全| www.xk28.com-三d双彩论坛| www.25tp.com-微信彩票国家承认吗| www.478.date-快三qw群-| www.106017.com-香港马牛蛙彩票| www.022084.com-每分钟一开奖的彩票| www.406801.com-七星彩8o8长条局| www.529634.com-直播彩票的主播| www.500960.com-一寸彩色多大| www.876677.com-彩票提现冻结怎么办| www.998765.cc-中国体育彩票开店| www.57.org-富贵彩软件下载| www.81ts.com-福彩网上兑奖怎么兑| www.1830.vip-摇一摇福彩双色球| www.386432.com-七彩奖开奖直播现场| www.436132.com-湖南体彩快报大乐透| www.932319.com-老彩民精品24码| 福彩世界www.fcsj.com| www.38001.com-贵州省体彩十一选五| www.498879.com-体彩大乐透中四前区| www.104369.com-彩神争霸犀牛彩票| www.4790.cc-买快三输了几十万| www.21161.com-必赢彩注册-| www.464787.com-七星彩领奖日期| www.8858.me-破解重庆时彩软件| www.3du.com-老汉直击黑彩福彩| www.309344.com-体彩排列3怎么玩| www.737171.com-彩迷图吧第四| www.819790.com-星座选择彩票| www.891368.com-幸运快三赢钱技巧| www.955135.com-彩票信用网改单技术| 55彩票www.755670.com| www.026832.com-彩票兼职可靠吗| www.228622.com-河北福利彩票快三| www.312339.com-彩票图三d-| www.981228.com-彩色冰淇淋-| www.865.biz-彩铅画樱花树图片| www.595.org-亚投彩票快三| www.97986.cc-时时彩精准预测| www.120502.com-紫云涧福彩预测号码| www.867068.com-今天开什么彩票| www.939259.com-华夏彩在哪里下载| www.993140.com-带玩彩票赚钱| www.dj84.com-计划彩票助赢app| www.sg61.com-时时彩app注册| www.22ul.com-彩票免费签到现金| www.486568.com-斗鱼竞彩玩法讲解| www.638721.com-浦东体彩网点查询| www.717305.com-彩铅桃花上色| www.787296.com-福建即乐彩十一选五| www.856522.com-3d彩票软件破解版| www.968347.com-胜负彩开奖时间| www.cai0599.com银川快三走势图| www.939387.com-河内一分彩开奖结果| www.wg32.com-贵州快三玩法技巧| www.317681.com-足彩14场秘籍| www.v33.cn-轩彩娱乐能赚钱吗| www.68ol.com-乐彩真的能赚钱吗| www.506478.com-河北快三开将结果| www.588406.com-海南七星彩交流论坛| www.666334.com-彩票天天乐怎么样| www.809839.com-会员登录9b彩票| www.901506.com-牛彩论坛首页官网| www.971650.com-玩彩票输了怎么回血| www.vh47.com-大发时时彩规律大全| www.4544.top-排列三黑彩玩法| www.17218.com-优信彩票网站首页| www.56114.com-六开彩怎么才算中奖| www.585398.com-存1元领彩金| www.681672.com-下载豪彩-| www.764678.com-彩彩票与你同行天下| www.840886.com-澳客竞彩网电脑版| www.904088.com-休闲快三-| www.970719.com-福彩图谜字谜总| 彩71www.024028.com| www.546732.com-体彩投注站网上申请| www.070395.com-彩礼是什么-| www.139016.com-彩票免费资料共享| www.668410.com-国际彩票下载| www.27rl.com-重庆时时彩漏洞在哪| www.0744.in-安徽十五选五彩票| www.829079.com-彩管家苹果版| www.897774.com-怎么做彩票店的宣传| www.960814.com-体彩排列三出奖号码| www.cy12.com-大发时时彩计划网站| www.zn36.com-快三怎么骗局揭秘| www.22pa.com-彩票怎么买新手| www.2480.cn-青海省快三推存号| www.7343.xyz-够力七星彩画规律表| www.193751.com-吉林市体育彩票| www.051385.com-万豪福彩下载新版| www.395359.com-彩虹岛梦境-| www.634168.com-七彩世界家具| www.734949.com-91彩神登录-| www.17786.cc-还能买竞彩的app| www.9533.cc-谁有海南七星彩网址| www.388373.com-华彩中文-| www.116701.com-五分快三算法| www.332038.com-时时彩为啥会上瘾| www.060650.com-二分彩计划软件| www.980196.com-桂林体彩中心在哪里| www.71948.com-富民彩票计划网站| www.02wr.com-360福彩网-| www.1810.site-体彩p3开奖查询| www.gp55.com-濮阳县彩礼法律规定| www.wk18.com-中彩网开奖-| www.14ea.com-玩网络彩票输钱了| www.61887.com-最新金巴黎彩票下载| www.866547.com-福彩3d昨天奖号| www.916505.com-足球彩票赔率怎么算| www.327150.com-七乐彩一等奖概率| www.12756.com-中国彩票中心下载| www.84399.cc-彩钢脊瓦安装| www.732372.com-重庆结婚不收彩礼| www.792949.com-彩票新快了-| www.848021.com-竞猜足彩比分| www.894559.com-黑龙江福彩22| www.953911.com-公牛福彩-| www.555463.com-快三一倍多少钱一注| www.657603.com-易彩首页-| www.845631.com-福利彩票事业改革| www.924920.com-好彩爆珠多少钱一包| 博友彩www.122by.com| www.6659.cm-双色球乐彩字谜图谜| www.0593.net-我要中彩票平台登录| www.858285.com-高频彩有托吗| www.929026.com-bb彩票有假吗| www.979285.com-彩71app下栽| 博通彩票www.606647.com| www.ix45.com-中彩网3d开机号| www.a32.xyz-168彩票官方极速| www.32vz.com-极速三分彩软件| www.0756.wang-外国高频彩开奖| www.651114.com-陈流水彩画作品| www.858443.com-彩票信用玩法安全吗|