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.5ic.com-大快三官网-| www.852.cm-重庆时时彩小鹿助手| www.5626.biz-手机在线买体彩| www.081225.com-李永乐关于彩票| www.226123.com-彩票追号追死人| www.874687.com-大同彩票网站地址| www.959928.com-手机买大乐透彩票| www.cai849.com-快三秒是什么| www.ox75.com-网易彩票头条| www.gy58.com-百盈彩票网址谁有| www.7yy.cc-中彩票20万-| www.86up.com-下载小白彩票| www.5662.wang-下载c29彩票软件| www.5656.me-高频彩票实体店| www.39582.cc-老版九歌彩票下载| www.005614.com-河内时时彩全天计划| www.118765.com-tkcc彩天空-| www.205454.com-内蒙福彩app| www.326856.com-大奖网彩票安全| www.414442.com-盈众彩票合法吗| www.51715.cc-时时彩计划倍投表| www.39700.com-70彩票平台安全吗| www.016541.com-吉林市开彩票站| www.4je.cc-内蒙古快三预测定牛| www.p42.tv-高频彩联盟-| www.94vp.com-竟彩足球专家推荐| www.3746.vip-体彩走势图大彩网| www.137709.com-新彩彩票注册送18| www.029744.com-体育彩票哪个app| www.i53.com-银川体彩兑奖| www.50mh.com-盛典彩票下载安装| www.619986.com-福彩快三多少种可能| www.53287.cc-彩之家怎么样| www.006983.com-腾讯时时彩网页计划| www.663.cm-乐乐彩票计划| 博友彩www.979233.com| www.pw79.com-怎么鉴别假彩票店| www.990809.com-彩票不中包赔| www.id18.com-银川体彩中心地址| www.28lm.com-779彩票正版资料| www.0709.com-体彩福彩要取消吗| www.8740.loan-速赢彩官网app| E彩堂www.43818n.com| www.52116.com-正规福利彩平台| www.402150.com-体彩七星彩开桨接果| www.566436.com-彩虹6号围攻高级版| www.675245.com-国家为什么控制竞彩| www.768383.com-幸运中彩票安卓版| www.859099.com-彩票图查询-| www.936232.com-彩票传销骗局揭秘| www.994004.com-上海快三奖金| www.xx5.com-体彩11选五走势图| www.510126.com-河内五分彩是合法吗| www.658965.com-彩票怎么查询| www.758827.com-买彩票中奖事件| www.837181.com-合肥体彩店找哪家好| www.905575.com-彩票4ayy-| www.972037.com-智慧彩挂机软件教程| www.86oo.com-3d乐彩开奖信息| www.237293.com-浙江省体彩网| www.310779.com-甘肃竞彩专家推荐| www.505333.com-528彩票-| www.568705.com-微彩是真的假的| www.86ac.com-彩托是怎么回事| www.449935.com-彩票1980-| www.992096.com-时时彩定胆经验| www.84xr.com-中国体育彩票预测| www.940091.com-彩98app下载| 大赢家彩票网www.178593.com| www.sy30.cc-2015够力七星彩| www.78qt.com-怎么买赢海南私彩| www.853238.com-金福彩票网是黑彩吗| www.951664.com-彩票赢钱技巧| 彩经彩票www.996099.com| www.992135.com-竞彩篮球不能竞猜| www.av15.com-官方江苏快三| www.76pq.com-黑龙江省体育彩票| www.304628.com-快3派彩网软件| www.584577.com-打击外围彩票黑庄| www.777867.com-高手彩票特彩吧| www.885978.com-体育彩票哪个app| www.955799.com-福彩作弊-| 500万彩票www.85wcp.com| www.649789.com-什么是博彩游戏| www.957342.com-全天132彩票计划| 500彩票www.202419.com| www.ll20.com-中國彩吧-| www.i94.club-彩票彩之网下载| www.33af.com-淘彩是不是诈骗| www.59373.cc-爱彩票登录不了| www.102922.com-彩票官方彩票平台| www.49hw.com-福彩3d全图今天的| www.1371.win-vr3是什么彩票| www.618926.com-明天的彩票开多少期| www.909450.com-河北福彩快三彩经网| www.973609.com-陕西枫安快三查询| www.rq0.com-一定牛彩票安卓最新| www.yv01.com-新浪彩票电脑| www.50pw.com-今天七星彩开公告| www.0896.bid-彩票合买宣传口号| www.717973.com-彩民周刊彩民周刊| www.940054.com-速彩-| www.ih5.com-快乐彩开奖号码走势| www.uk39.com-好彩客是合法的吗| www.5505.vip-福彩在手机银行缴费| www.30350.com-体彩结果开奖查询| www.43nx.com-福建省足彩培训师| www.4118.biz-彩票生肖牛是几号| www.061528.com-彩客吧是正规平台吗| www.379003.com-3d双彩论坛谜| www.246220.com-官方幸运快三彩票| www.425604.com-福彩彩票几点开奖| www.aw29.com-5d福彩-| www.120237.com-彩票店有大发快三吗| www.23028.com-红坛博彩500| www.004817.com-海南七星彩开奖时间| www.zx8.cc-中国体育彩票官方网| www.14ef.com-福彩直播在哪里看| www.819.net-87足彩下载-| www.5406.xyz-彩铅画简单好看图案| www.11230.com-购买足彩的正规网站| www.967427.com-福彩3d平台微信| www.cp7233.com-安徽快三助手一定牛| www.61531.cc-七星彩开奖五百期| www.0968.cn-体彩微信带单| www.275900.com-七乐彩单-| www.386377.com-韩国彩票官方| www.37067.com-java彩票系统| www.44137.cc-特彩吧网-| www.445636.com-有哪些平台在卖彩票| www.60524.cc-禁售彩票-| www.211593.com-北京彩票十一选五| www.js11.cc-猜大小彩票-| www.07jk.com-梦幻卡通彩铅蓝鲸画| www.561694.com-红蚂蚁团队彩票计划| www.654232.com-北京快三垮度一定牛| www.730203.com-互娱彩票app| www.790911.com-环彩网触屏版| www.846757.com-彩票图彩在线| www.892766.com-号百彩票开奖结果| www.952811.com-海南七彩开奖号码| www.995604.com-如何玩好竞彩单场| www.an68.com-分分快三预测网站| www.to57.com-淘彩彩票官方网站| www.201.cm-儿童彩铅画风景| www.7235.cm-彩虹六号要多少钱| www.34ri.com-500彩票代打骗局| www.969698.com-中国竞彩网足球比分| www.08yr.com-高频彩票会停吗| www.92ho.com-玩五分彩提现危险吗| www.2638.cn-22时时彩平台| www.7916.cc-福彩三滴d-| www.981003.com-怎样用彩折做冰淇淋| www.ix2.cc-520快三-| www.357891.com-关于彩票经典传奇| www.124292.com-河北快三开奖时间表| www.37556.com-彩票33安卓版免费| www.91186.cc-日免软好彩价格| www.028.tv-浙冮体彩网-| www.4228.cm-下载够力七彩奖| www.761293.com-宝马彩票集团网址| www.9kt.cc-北京快三彩票网点| www.658602.com-七星彩码王驾到视频| www.48uj.com-彩乐乐排三杀号|