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.5322.com-4567彩票正规么| www.960357.com-12彩票安卓-| www.cai5711.com上海快三彩票| www.j59.me-另版福彩3d藏机诗| www.6760.cc-彩票负面新闻| www.328609.com-七星彩开奖直播视频| www.496806.com-彩票3d破解方法| www.gz02.com-新盈彩骗局-| www.cp0655.com-快三开挂软件下载| www.946848.com-高频快开彩票停止| www.222694.com-吉林快三计划收费| www.355434.com-彩经网是什么网站| www.0390.cm-百乐彩是黑平台吗| www.574922.com-时时彩怎么改期数了| www.755500.com-旺彩双色球历史版本| www.903388.com-赢彩网大发快3下载| 易旺彩票www.ywzuqiu.com| www.mx40.com-手机购彩软件下载| www.372058.com-诚信快捷体彩实体店| www.537760.com-彩色面团-| www.997840.com-彩神软件安卓| www.mo03.com-快3购彩小贴士| www.38in.com-彩铅脸部上色技巧| www.345.cn-北京时时彩官网| www.59293.cc-福彩站点如何申请| www.005551.com-租彩票平台-| www.59663.cc-赢彩彩票可信吗| www.012022.com-彩种在哪下载app| www.529999.com-彩票时时彩开奖直播| www.164422.com-cba彩票在哪买| www.249447.com-555彩票首页| www.672906.com-三地南方双彩开机号| www.277737.com-破解彩票平台网站| www.364168.com-新浪微博世界杯彩票| www.464949.com-武汉足彩到哪领奖| www.559505.com-彩经网彩票走势| www.639681.com-竞彩改革2019| www.743588.com-中彩网擂台赛图表| www.880930.com-黑彩平台登陆| www.967940.com-宁夏休育彩票| 大赢家彩票平台www.802837.com| www.239806.com-王者彩票可以挣钱吗| www.153145.com-旺彩游戏注册| www.092058.com-百信彩票bx11| www.271517.com-福彩26-| www.894896.com-超级大乐透彩票投注| www.0086.name-牛彩3d字迷图迷| www.129205.com-彩票一分-| www.276807.com-彩民之星破解| www.132195.com-濮阳县定亲彩礼| www.04213.com-下载全中彩票| www.682469.com-网上买足彩放开了吗| www.895694.com-广东快三查询| www.il53.com-山东彩友沙龙论坛| www.55048.cc-彩票开奖查询单式| www.295676.com-北京全天时时彩计划| www.05044.com-好一点的彩票软件| www.589346.com-足彩310官方网址| www.961682.com-福彩快三开奖日期表| www.859281.com-山西体彩快乐十分钟| www.882415.com-易彩堂可靠吗| www.a75.net-时时彩越玩越输| www.ny55.com-甘肃快三杀号技巧| www.280390.com-时时彩apk-| www.526009.com-福彩3d试机号规律| www.536709.com-今日七星彩开奖| www.650918.com-水彩画教程花| www.2xd.cc-手机黑彩平台改余额| www.771539.com-如何申请体彩销售点| www.501069.com-体彩多少号码| www.755025.com-百乐彩手机版客户端| www.936261.com-福彩自助终端机盈利| www.33108.com-七星彩开奖全部历史| www.056320.com-贵州七星彩领奖地点| www.659036.com-c彩61彩票网| www.781648.com-开彩票店怎么申请| www.861337.com-体彩十一选五三单式| www.939539.com-网络售彩-| www.982706.com-体彩微信公众号| www.vr5.com-排三乐彩17500| www.pw02.com-太阳彩票骗局| www.717044.com-儿童彩铅画的好处| www.796914.com-彩票概率计算方法| www.879552.com-网上彩票代理| www.947070.com-体育彩票api接口| www.990612.com-267彩票-| www.cb54.com-天天彩票助手| www.tx99.cc-足彩8串1技巧| www.020695.com-湖北快三快赢网预测| www.4550.biz-天天购彩票靠谱吗| www.23413.com-四季彩可靠吗| www.126873.com-3d彩票魔图-| www.354970.com-怎么买体彩才能中奖| www.777595.com-彩票收米gif图| www.1200.com-全民汇彩app| www.53619.cc-澳门5分彩走势图| www.167925.com-中国福彩快3下载| www.538690.com-威尼斯国际时时彩| www.690607.com-竞彩足球在线购买| www.947650.com-福利彩票营销计划| www.22vo.com-助赢软件贵州快三| www.609517.com-福州市体彩店| www.822191.com-全国福彩3d预测| www.993370.com-足彩任选九规则| www.422542.com-如何申请卖福利彩票| www.128880.cc-七乐彩设奖方式| www.08913.com-福利彩票关注公众号| www.95697.com-中国最早的彩票| www.148550.com-乐优炫彩提现不了| www.289947.com-贵州快三玩法规则| www.516918.com-色彩花-| www.223863.com-竞彩计算器-| www.356956.com-彩票怎么中几百万| www.11708.com-如何代理彩票平台| www.004510.com-双色球彩票开奖分析| www.654022.com-高手彩票网开奖查询| www.786547.com-下载全民赢福彩| www.953621.com-宝乐彩票可信吗| www.ho73.com-广东十一选五爱彩乐| www.4712.top-彩客网怎样玩| www.61047.com-福豪彩彩票可信吗| www.691016.com-足彩妖刀微博| www.kr57.com-乐飞彩票app| www.07tq.com-港彩力芽-| www.148.in-彩虹的了解-| www.7528.vip-彩票店桌椅摆设| www.32978.com-华夏彩票代理| www.00cf.com-爱乐透彩票app| www.71fd.com-买彩票的语录| www.4927.cc-彩经网p3试机号| www.18455.com-彩票双色球选号器| www.44751.com-买彩票计划群违法么| www.909953.com-吉林新快三360| www.kr18.com-上海福彩快三官网| www.47hy.com-今日福彩p3中奖| www.kx39.com-苹果版彩神通下载| www.736730.com-福建11选5彩经网| www.ei2.com-江苏福彩快3玩法| www.88993.cc-可以买卖二手彩票| www.580230.com-世界杯彩票去哪买的| www.201481.com-河北快三一天多少期| www.323913.com-乐彩提现很慢| www.640614.com-博彩导师-| www.735311.com-高频彩大揭秘| www.377976.com-体彩店电视机怎么装| www.508885.com-福利彩票的形式| www.441700.cc-竞彩258彩票骗局| www.3044.xyz-博彩世家-| www.726163.com-彩宝贝网双色球预测| www.56gl.com-五彩绳-| www.847219.com-彩票平台pc蛋蛋| www.27265.com-博友彩邀请码| www.95794.com-公益彩票玩法规则| www.60im.com-银彩彩票-| www.b30.xyz-炫彩彩票-| www.519966.com-趣彩彩票安卓版| www.221527.com-瑞彩祥云倒闭了吗| www.220925.com-uu快三邀请码| www.253168.com-好彩36福利彩票| www.41uz.com-中体彩运营中心| www.019637.com-超级赛车彩票怎么玩| www.170759.com-大发快三高手计划| www.296365.com-湖北彩票中奖图| www.373383.com-快三大型平台|