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.cai3399.com时时彩-| www.d44.bid-七星彩梦册查码解梦| www.47dy.com-杏彩代理-| www.591.live-众购彩票网官方注册| www.4381.vip-互联网彩票概念| www.03306.com-淘彩票注册| www.029249.com-今日七星彩预测一注| www.116599.com-彩乐乐杀号3d| www.197575.com-下载彩票开奖大全| www.276831.com-青海快三中奖规则| www.419645.com-500cp彩票-| www.526941.com-体育彩票开桨结果| www.626452.com-三d中奖彩票图| www.703419.com-彩票最大奖是多少| www.787115.com-彩票怎么看大小单双| www.871561.com-彩票排名靠前的软件| www.979517.com-福彩3d导航走势图| www.jx7.com-安徽快三开奖源| www.rd23.com-海南体育彩票中奖| www.14eb.com-福彩福利直播间| www.99mi.com-新彩吧图谜汇总| www.3876.cm-香港星彩网-| www.9778.cc-旺彩双色球大师预测| www.66007.com-梦到中彩票了| www.028520.com-博瑞彩票团队| www.111529.com-3分时时彩-| www.185896.com-玩快三-| www.292478.com-1青海快三开奖结果| www.367234.com-最新福体彩开奖结果| www.469036.com-零零时时彩官网| www.557901.com-买福彩快三开奖结果| www.630752.com-福彩网充值代理平台| www.706302.com-8彩客站微信| www.788204.com-体彩任选3单式票| www.865667.com-体彩32期-| www.934035.com-贵州快3彩票下载| www.990123.com-红旗彩票正规吗| www.rq.com-北京快三走势有| www.pn36.com-3d彩乐乐专家预测| www.04hh.com-怎么开发快三软件| www.77hv.com-快三怎么翻倍的| www.1852.wang-彩民乐和阳光探码| www.9841.biz-梁的彩画-| www.53455.cc-报刊大全好彩堂| www.001227.com-酷彩网触屏版| www.070881.com-365彩票怎么安装| www.139718.com-盈彩会是真的假的| www.219486.com-高频彩彩票-| www.292762.com-福彩3d杀号林竹| www.356604.com-宁波年会彩票中奖| www.426727.com-亚洲彩票靠谱吗| www.526332.com-天津时时彩投注站| www.799085.com-大钱庄彩票主页| www.867583.com-快三中双号多少钱| www.922170.com-下载一定牛江苏快三| www.973085.com-彩虹六号新手教学| www.iz96.com-体育足彩竞彩网开奖| www.g19.org-海南4个号彩票开奖| www.40yp.com-七星彩作假-| www.0700.wang-彩票站点申请| www.7585.pw-彩票销售软件怎么样| www.24446.com-双色球彩宝贝比较器| www.69432.com-98彩票合法吗| www.054556.com-狗万比国彩好多了| www.134828.com-彩运网导航-| www.209926.com-500购彩大发快3| www.283289.com-彩票怎么中奖规则| www.385325.com-吉利彩票网受骗| www.504151.com-体彩限号单-| www.570820.com-七彩山鸡苗哪里有卖| www.644864.com-青岛福利彩票网| www.755739.com-三d彩色打印机| www.843063.com-中国最早彩票| www.907636.com-彩票香港网址大全| www.970914.com-彩票真能中奖| www.c5.cc-湖北十一选五爱乐彩| www.mp64.com-彩富网-| www.v96.net-福利彩票3d中奖号| www.73fo.com-放弃买彩票-| www.1555.pw-山东彩票云彩宝| www.9325.cn-澳门彩球网站| www.46155.com-时时彩票计划稳定版| www.89227.cc-福利彩票今日幸运号| www.041398.com-多彩贵州网官网| www.137473.com-竞彩任九场-| www.210519.com-大发快三有哪些软件| www.278330.com-31彩平台-| www.374147.com-新彩吧正版彩图| www.488819.com-七乐彩平台-| www.560963.com-恒彩彩票官方网站| www.623771.com-分分彩跟长龙技巧| www.688208.com-体彩电话投注流程| www.761942.com-极速时时彩能玩吗| www.879700.com-宁夏银川仟彩摸吧| www.958519.com-网络福彩是不是骗局| 东方国际www.055972.com| www.gc06.com-上海快三开一定牛| www.b97.cc-海南七星彩梦册查码| www.29lh.com-江苏体彩兑奖| www.1533.net-3d金码牛胆彩宝网| www.9108.loan-今天七乐彩开奖吗| www.53780.com-和盛娱乐时时彩平台| www.001358.com-极速快三辅助| www.091282.com-春秋彩票苹果官网| www.158999.com-d8彩票分分快三| www.329970.com-彩巴伦坛-| www.396006.cc-福彩星期天几点开奖| www.530001.com-彩8论坛-| www.611269.com-彩虹岛手游安卓版| www.679153.com-彩票至尊宝典| www.753402.com-七星彩开奖结里| www.872008.com-贵阳大型彩票投注站| www.951747.com-足彩4串4是稳赚吗| www.989451.com-乐彩网是不是真的| www.bg06.com-兼职刷彩金有危险吗| www.sv37.com-三千万福彩-| www.10xu.com-彩票快3手机下载| www.75fm.com-北京单场竞彩推荐| www.1177.cn-彩票创意广告语| www.89939.com-体彩竞猜网站| www.073120.com-9亿彩票首页| www.178590.com-彩乐乐网遗漏| www.361582.com-天天中彩票提现微信| www.445967.com-推荐彩票预测软件| www.563796.com-多彩贵州招聘吧| www.646999.com-胜负彩在线过滤| www.756208.com-贵州体彩11选5开| www.869838.com-唯彩会彩票苹果版| www.955133.com-如何自己开彩票平台| www.ig.com-福彩中心-| www.na25.com-有人玩038彩票吗| www.1zi.com-手机彩膜一体机| www.55gr.com-彩凤是什么神兽| www.1071.vip-一次可以买几注彩票| www.9471.mobi-体彩胆是什么意思| www.58090.com-彩票有官方app吗| www.026301.com-彩票选号技巧与方法| www.114639.com-500万网上买彩票| www.180472.com-湖北快三一定牛彩| www.244094.com-体彩网app-| www.311315.com-江苏体彩走势图| www.369041.com-体彩二串一代理| www.664689.com-黑客彩美-| www.771801.com-22彩票会员中心| www.921706.com-立彩一我的帐户| www.978064.com-快三对子共有多少| www.co43.com-l北京快三开奖实时| www.sq16.com-时时彩133公式| www.16zp.com-彩票怎么分吵架| www.066.xyz-七星彩中四个号不连| www.3300.org-彩宝贝开奖结果| www.9399.com-彩票冷热走势图| www.66206.com-幸运快三代玩兼职| www.024232.com-福彩双色球开奖预测| www.088952.com-天津市时时彩官网| www.172081.com-快三怎样看走势图| www.278389.com-分分中彩票网页| www.379018.com-体彩双彩论坛| www.508054.com-唐龙彩吧-| www.571932.com-及时开彩下载| www.659077.com-七乐彩诗谜-| www.751480.com-杨震足彩推介| www.812477.com-盛彩彩票是合法的吗| www.892611.com-彩票27-|