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天

知道了
彩乐分析 99彩票www.533091.com| www.58953.cc-彩吧学堂-| www.072024.com-北京彩票双机转让| www.387273.com-ag彩票数据提醒| www.437600.com-成为一名彩票迷| www.415885.com-竞彩足球倍投技巧| www.533525.com-体彩大乐透怎么查询| www.905489.com-足球竞彩比分网| www.975740.com-河南驻马店订婚彩礼| www.bm3.com-精彩十分福彩| www.243877.com-酷彩网是不是骗局| www.71456.com-郑州市福彩中心| www.384203.com-著名福利彩票口号| www.pa3.cc-买彩票怎样选号码| www.07166.com-竞彩比分直播网易| www.8911.online广东竞彩神单| www.946737.com-体彩天下平台正规吗| 500彩票www.547077.com| www.pq62.com-竞彩猫电脑版| www.570501.com-七彩云南翡翠专卖店| www.080832.com-体彩七星彩奖金| www.6220.wang-福利彩票领奖视频| www.593700.com-昆明七彩云牛乳业| www.31476.com-彩之网开奖结果首页| www.96182.cc-福彩福利彩票| www.111161.com-体彩如何申请网点| www.208372.com-湖比快三走势图| www.299201.com-北京福彩三地| www.398500.com-彩运来软件官方下载| www.520998.cc-千亿彩-| www.603717.com-怎么能中彩票啊| www.691965.com-福彩3d彩吧网| www.789523.com-彩色包装箱厂| www.878330.com-百盛彩票官网| www.nh75.com-全民福彩是真的假的| www.cp746.com-快三最大的平台| www.523050.com-亚投彩票快三| www.713859.com-3d彩票下载安装| www.7346.cm-文昌七星彩梦兆查询| www.933844.com-彩票数字预测规律| 网易彩票www.504833.com| www.974245.com-七乐彩设奖方案| www.gh30.com-江西福彩快3开奖| www.149170.com-彩票挂机爆了追回| www.911018.com-微信彩票购买| www.2187.shop-皇城彩票网址登录| www.940603.com-彩票刷流水技巧| 淘彩票www.tcp969.com| www.999641.com-好彩自然来女主角| www.568806.com-大彩鲸快3app| www.110386.com-帝皇彩票app官网| www.082232.com-重庆快三多久一次| www.193639.com-彩票导师是真的吗| www.285250.com-深圳福彩中心在哪里| www.717982.cc-中国体彩有app| www.852979.com-头彩彩票下载| www.968420.com-希腊十分彩-| www.bb12.cc-一分快三公式| www.l01.cc-9123彩票下载| www.6374.vip-北京易顺百顺彩票| www.499839.com-新加坡快彩-| www.653687.com-亚洲合法彩票| www.52gb.com-彩无敌官网-| www.001628.com-福彩3d八宝饭| www.177194.com-快三高手传授经验| www.507111.cc-体育彩票分哪几种| www.00784.cc-彩票申请书-| www.744386.com-竞彩倍投计划骗局| www.868913.com-7星彩专家推荐号码| www.662773.com-旺彩双色球应用| www.767825.com-淘彩吧下载-| www.841577.com-彩妆盘发加盟店| www.900316.com-8k彩票网站安全吗| www.974788.com-篮球竞彩赛程| 500彩票www.979738.com| www.4912.cc-688彩票首页| www.26522.com-乐和彩安全吗| www.875110.com-时时彩澳门平台| www.947387.com-彩吧中国-| www.999953.com-江苏快三电脑版走势| www.ew18.com-重庆时时彩苹果软件| www.xr83.com-双色球彩票怎样买| www.301494.com-特区彩票论坛交流区| www.388312.com-华彩一点通-| www.55648.com-创意水彩画图片| www.99840.cc-166购彩-| www.322390.com-黑彩刷流水-| www.440510.com-3d专家杀号彩乐乐| www.579875.com-快乐十分彩票预测网| www.719495.com-七星彩360胆码| www.833977.com-软包好彩多少钱| www.952700.cc-快三如何精确到数字| www.oa53.com-快三胆码计算公式| www.521150.com-澳门快三下载安装| www.546585.com-厦福利彩票站点申请| www.688930.com-彩神通手机软件下载| www.802382.com-北京福彩小助手| www.907873.com-合肥体育彩票店转让| www.982040.com-彩票怎么能中奖率| www.bw08.com-彩票帮投是怎么样的| www.d81.top-中彩计划软件手机版| www.96hk.com-快乐彩票真实吗| www.263130.com-七乐彩奖池余额多少| www.557520.com-彩票中奖先交税么| www.320399.com-微信买彩票赚钱| www.tj75.com-捕彩老头排三预测| www.9rr.cc-体育彩票的购买方法| www.75pr.com-时时彩对打套利技术| www.528868.com-体彩竞彩店转让| www.qc04.com-577彩票网下载| www.u21.cc-体彩投注机器| www.4204.xyz-七彩格子最新消息| www.02898.cc-中彩网中奖故事| www.431389.com-什么是葡京彩票| www.ti86.com-福彩22选5-| www.88bi.cc-凤凰彩票兼职靠谱吗| www.1697.top-彩富365-| www.691773.com-77彩票网app| www.668916.cc-美国彩票最大| www.738852.com-福彩3d微信公众号| www.865348.com-体育彩票图片| www.926965.com-彩票一彩票-| www.984625.com-彩八彩票可信吗| www.yc0.com-卖体彩一-| www.sn41.com-时时彩员工会坐牢吗| www.790376.com-彩票伪随机数| www.e08.cc-竞彩足球最多穿几场| www.420673.com-军长胜负彩推荐| www.550317.com-体彩大乐透查询| www.650725.com-中班户外彩虹伞| www.748527.com-旺彩平台手机版下载| www.859954.com-完美彩票网站下载| www.948757.com-给我下万彩吧| 500万彩票www.98528h.com| www.va8.com-福彩七乐开奖结果| www.736278.com-玩彩票亏了怎么回血| www.765011.com-网易彩票真实可靠吗| www.019244.com-贵阳大型彩票投注站| www.444001.com-三五彩票怎么下| www.565887.com-中华彩票安卓下载| www.663853.com-银彩通售彩合法吗| www.ko45.com-五百万彩票网下载| www.673701.com-古建彩绘草龙图案| www.217055.com-哪些省份有快三彩票| www.379137.com-福利彩票3d上期| www.503390.com-彩投的什么意思| www.1227.in-计划彩票app下载| www.896688.com-八八彩票官网手机版| www.987117.com-立彩助手苹果版下载| www.wl6.cc-彩票里的屠龙| www.607996.com-福彩刮刮乐10元| www.th14.com-河南福彩幸运彩直播| www.709670.com-网上彩票骗局| www.022907.com-排列五开奖结果彩吧| www.348585.com-彩票34648-| www.00315.cc-g06hcom彩库| www.835507.com-南粤风彩26大星| www.978142.com-下载彩视-| www.ac03.com-我的彩票开奖结果| www.09695.com-彩81网址-| www.365564.com-吉林快三改时间| www.512753.com-彩铅手绘凤凰| www.5227.com-荣鼎彩下载-| www.n83.net-彩票游戏规则|