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.394979.com-彩虹自助下单源码| www.7776.loan-彩霸王·论坛高手大| www.809329.com-买那个彩票中奖率高| www.931002.com-中发彩票用户注册| 名门彩www.33997n.com| www.539468.com-广东体彩发展历史| www.970231.com-安卓彩神通app| www.hx50.cc-快三出对子规律| www.441110.com-苹果炫彩动态壁纸| www.957695.com-乐透彩开奖结果| www.cai2341.com湖北快三今天必出号| www.se38.com-福建体育彩票大乐透| www.35sd.com-特区网七星彩票论坛| www.263886.com-陈赫中彩票-| www.424744.com-80彩票软件靠谱吗| www.369209.com-尼彩手机好么| www.495220.com-博彩汇平台下载| www.582297.com-快三走势图赤峰| www.655214.com-七乐彩结果中奖结果| www.021937.com-皇冠彩票可靠吗| www.44ix.com-福彩3d胆码软件| www.63qo.com-移动兑换彩票| www.2720.com-湖北体彩兑奖| www.617565.com-吉林快三赔付| www.764238.com-彩神x是怎样的骗局| www.905905.cc-海南体彩app下载| www.975140.com-汇彩网可信吗| www.qk09.com-快三合之规律| www.fh80.com-77注册送27彩票| www.631576.com-七彩视界会员靠谱么| www.1401.com-亲子游戏彩虹伞视频| www.0261.wang-时时彩没开奖怎么办| www.75fo.com-彩之家彩票网如何| www.zz32.cc-上海开福彩店| www.534142.com-砺儿7乐彩推荐号码| www.732691.com-佰万彩票登录官网| www.6831.top-九w彩票-| www.311654.com-廊坊快三彩票开| www.00zm.com-雨后彩虹的形成阅读| 汇彩网www.www.hcw266.com| www.288725.com-竞彩足球球赛改期| www.76mr.com-足彩开奖公告i| www.811753.com-新家坡天天彩资讯网| www.936255.com-彩票假的没人管| 天天彩票www.1035c.com| www.266229.com-河北省快三开奖| www.84qd.com-福州体育彩票站转让| www.803839.com-彩票网拖-| www.881460.com-黑彩平台怎么赚钱| www.986908.com-易彩堂开挂-| www.cl26.com-天津时彩开奖号码| www.u22.me-思乐彩票投注机| www.141605.com-排列三彩吧助手| www.233999.cc-聚彩彩票可靠吗| www.52vv.com-瑞彩祥云是真的吗| www.3gc.cc-彩票几日不领会作废| www.0475.xyz-山东七乐彩开奖号码| www.41733.com-彩票12彩票-| www.18tm.com-彩票礼拜五开什么奖| www.9074.cn-海南七星彩资料网站| www.400476.com-足彩什么时候开售| www.q62.in-体彩所有玩法| www.51622.cc-好运彩彩票网首页| www.151527.com-彩票缩水的意思| www.7778.tv-彩网高手论坛| www.98sa.com-盛彩网站-| www.7542.top-申请竞彩的条件| www.74974.com-网上买彩输了很多钱| www.876160.com-1516彩票app| www.974182.com-北京快三福彩助手| www.g86.cc-彩8在线app-| www.6329.xyz-下彩彩票网页版| www.111324.com-老彩民app能用吗| www.cy82.com-人人彩票网官网首页| www.57957.cc-体彩七位数玩法规则| www.909193.com-梅子3d福彩新彩吧| www.577779.com-酷彩安卓app| www.103797.com-竞彩足球310| www.300993.com-九宫图在彩票3d| www.70qh.com-三分时时彩预测| www.974562.com-众彩平台下载专区| www.li6.cc-快三奖金多少| www.qd88.cc-76c彩票网站| www.543833.com-釉下五彩瓷-| www.748289.com-彩中彩书-| www.kq37.com-什么彩票一分钟一来| www.75714.com-足彩二串一盈利计划| www.57558.cc-澳客彩店安全吗| www.av30.com-中彩票两亿的小说| www.20xg.com-新版彩票下载| www.787.cm-彩票3d复式-| www.5473.xyz-彩虹世界下载安卓版| www.sv33.com-彩票公式-| www.sf52.com-时时彩在线预测| www.777269.com-立彩app苹果下载| www.862399.cc-今天开七乐彩吗| www.913900.com-彩之家官方旗舰店| www.973284.com-儿歌《彩虹》| 九州彩票www.446769.com| www.334700.cc-快钱彩票官网| www.420166.com-彩票店官方旗舰店| www.544445.com-香港小财神彩票网| www.804768.com-彩虹旗符号-| www.913152.com-彩客网完整手机版| 财神网www.29277q.com| www.330069.com-彩吧—更懂彩民图| www.740864.com-澳门正版老鼠报彩图| www.557411.com-幼儿简单水彩画图片| www.866829.com-福利彩票什时候开奖| www.293605.com-彩票包赔场骗局| www.xx25.com-彩票机选可能中奖嘛| www.218268.com-五省快三一定牛预测| www.304646.com-易旺彩票网-| www.381481.com-廖彩杏书单-| www.76fl.cc-七乐彩特别号怎么选| www.1094.cc-足彩竞彩漏洞| www.77493.com-澳客竞彩开奖网站| www.761656.com-甘肃快三规律| www.933223.com-快三有哪些地区| www.977436.com-河南要彩礼-| www.cp1919.com-快三稳赚技巧| www.le21.com-爱彩彩票安卓| www.739790.com-金龙彩票下载| www.384398.com-福彩店违规怎么举报| www.yg32.com-派彩电子官网| www.087336.com-100官网彩票| www.9452.top-双色球彩票吧| www.62687.cc-体彩快乐扑克三| www.033868.com-彩票机选中了一等奖| www.818614.com-彩票双色球过滤器| www.309848.com-山东体彩扑克开奖| www.508342.com-98抗洪救免彩票价| www.606800.com-彩票摇号软件下载| www.677961.com-2188彩票app| www.297253.com-幸运快三开奖规律| www.404518.com-福建省体育彩票中心| www.523946.com-七乐彩有app吗| www.603434.com-五分快三作弊软件| www.678356.cc-快发彩票下载安装| www.816988.com-中发彩票是黑平台吗| www.181775.com-河北快三开奖规则| www.51661.cc-3d彩报今天大怪字| www.134388.com-易彩快3彩票规律| www.059880.com-天天彩票8-| www.781924.com-彩票软件源码排行榜| www.791081.com-福彩2018151| www.869485.com-教你七星彩的规律| www.926308.com-七乐彩除7走势图| www.970991.com-u9彩票网站靠谱吗| 幸运彩票www.112028.com| www.m41.cc-甘肃快三开将结果| www.41kj.com-体彩票11选5| www.063590.com-帮人家卖彩票犯法吗| www.5042.vip-湖南福利彩票加盟| www.607679.com-9万彩票最新官方网| www.xk74.com-亿网彩票官方网址| www.155495.com-牛蛙开奖彩票| www.cai298.com-快三网-| www.809646.com-微信网上购彩可信吗| www.900016.cc-福利彩票店装修图| www.954316.com-重庆时时彩软件| www.64411.cc-凤凰竞彩官网址| www.233998.cc-彩票开奖查询5d| www.339946.com-竞彩收米gif图片|