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天

知道了
TT快3 www.214943.com-大发彩票-| www.23955.com-福彩3d彩乐乐预测| www.201067.com-七星彩808论坛| www.379458.com-宝马彩线路导航| www.828210.com-新生娱乐彩票| 万历彩票www.77114w.com| www.62466.com-海南七星彩开码结果| www.015550.com-彩票服务中信| www.vy20.com-竞彩网购停售| www.61im.com-心脏彩超参考值| www.5190.com-爱彩乐咋看-| www.ce65.com-快三会不会赔| www.29cs.com-中国体彩网手机在线| www.8868.me-天下精英高手彩票网| www.334759.com-中彩手彩票电脑版| www.523605.com-东湖社区福彩讨论区| www.656262.com-众发彩票合法| www.781646.com-2019体彩新规| www.904919.com-彩票属于什么行业| 大赢家彩票网www.636121.com| www.177663.com-快三计划网页版| www.355459.com-五分彩个位是哪个| www.482065.com-重庆vr十分彩| www.001365.cc-雪缘足彩比分直播1| www.108009.com-足彩胜负彩预测分析| www.246449.com-广州快三查询| www.353108.com-485彩票-| www.493234.com-姓名选号大乐透彩票| www.587059.com-快三时间调整通知| www.675867.com-大彩网空心菜博客| www.779966.com-福彩3d教学-| www.895466.com-网投彩票可靠吗| www.979264.com-好彩香烟双爆价格| www.168.red-合肥体彩转让信息| www.6826.in-下载全民彩票| www.32633.cc-大发云一分快三| www.020763.com-彩88开奖历史号码| www.120815.com-福彩双色球顺口溜| www.082086.com-彩钢围挡报价| www.296243.com-吉林快三计划书| www.04566.com-河北省彩票中心| www.243531.com-360彩票计算器| www.393131.com-彩铅画海边-| www.601904.com-好像中彩票-| www.003234.com-彩票技术实战网| www.126755.com-彩票api平台| www.344300.com-重庆时时彩长龙买法| www.611936.com-万彩吧彩票双色预测| www.810779.com-七乐彩中奖表图片| www.959577.com-6060彩-| www.ls10.com-时时彩开奖号| www.62729.com-福建体彩购买方法| www.522359.com-腾讯分分彩避免连挂| www.635583.com-福利彩票税率| www.739362.com-竞彩4串6什么意思| www.158779.com-启航团队买彩票骗局| www.557937.com-海南四码彩票软件| www.651755.com-3d开奖中彩网开奖| www.835065.com-好彩爆珠烟焦油量| www.58180.com-彩助手首页-| www.971401.com-体彩排列三开奖公告| www.699275.com-七乐彩如何玩法| www.834405.com-日免红好彩价格| www.gl30.com-河南体彩中心| www.99622.cc-体彩双色球开奖| www.426288.com-中国福彩彩吧图库| www.569312.com-福彩三d黑圣手字谜| www.692834.com-福建体彩走势| www.801302.cc-彩猫怎么玩-| www.44038.cc-江苏快三违法吗| www.028710.com-黑彩票店-| www.193107.com-乐购28彩票网| www.70606.com-内蒙福彩快三玩法| www.110106.com-广东彩票快乐十分| www.289793.com-福彩≡地-| www.525044.com-北京时时彩五分彩| www.667202.com-乐彩专家预测排行| www.825045.com-竞彩猫直播看不了| www.947846.com-竞彩彩店宝-| www.mq.com-快三能不能赚钱| www.8902.top-射阳县竞彩城西店| www.22817.cc-41彩票cc199| www.376961.com-海南7星彩对数表| www.585409.com-阿理彩票是什么网址| www.464369.com-体彩怎么看中奖方式| www.654983.com-红辣椒够七星彩安装| www.814918.com-彩票基本-| www.932973.com-众信彩票app下载| www.297365.cc-湖北快三开奖号今天| www.234645.com-福彩3d专业版下载| www.271499.com-广东500彩票网| www.522045.com-时时彩怎样分辨虎龙| www.673127.com-福彩夏天-| www.810535.com-今体彩开奖结果查询| www.908038.com-网上彩票的骗局揭秘| www.328658.com-天下彩票九龙精英网| www.893477.com-千亿彩票-| www.981102.com-彩票彩六-| www.67qe.com-彩色混凝土效果图| www.5026.cn-吉祥彩05005| www.01372.com-澳客足彩必发盈亏| www.035988.com-神彩趋势软件破解版| www.207679.com-手机彩票过滤工具| www.339124.com-时彩族官网软件| www.540668.com-懂球帝里面买彩票| www.686411.com-3000万彩票| www.850874.com-免费时时彩源码论坛| www.299721.com-冠彩网下载-| www.445245.com-德惠彩票销售| www.615866.com-双数开彩打一生肖| www.773596.com-彩票百分百中奖秘籍| www.57153.cc-武汉休闲快三拉花| www.211884.com-掌上购彩三分快三| www.343023.com-体育彩票兑奖表| www.535134.com-哪种彩票是5位数| www.669503.com-彩凤临门的意思| www.818612.com-彩乐汇手机版| www.907678.com-威尼斯彩票出款失败| www.5588.xyz-网上买彩票能兑奖吗| www.289156.com-神彩福牛-| 中彩网www.71233d.com| www.pb33.com-体彩排列三选号技巧| www.23lp.com-南充市福彩中心站| www.4068.biz-合乐彩888官网| www.284967.com-彩票以后会倒闭吗| www.517269.com-七星彩现场开奖| www.618738.com-明天开什么奖彩票| www.51987.cc-旺彩全国开奖大全| www.58pz.cc-三月十号彩票开奖| www.88452.com-榆林开个福彩挣钱吗| www.976514.com-豫彩通功能-| www.99ru.com-彩世界时时彩下载| www.bw42.com-足彩310什么意思| www.1804.cm-无需本金的彩票| www.61108.com-网络销售彩票工作| www.119608.com-即开彩下载安装| www.266237.com-恒大彩票可靠吗| www.451130.com-七星彩奖号码| www.688565.com-买福利彩票用手机| www.817918.com-足彩19040分析| www.88546.com-彩票离婚案例| www.7006.pw-体彩欧洲杯-| www.161651.com-中国体育彩票地图| www.756608.com-76858彩票om| 金冠彩票www.49956k.com| www.qh25.com-新加坡版好彩双爆珠| www.847.live-电视怎么调彩呀| www.20848.com-彩状元彩票是骗局吗| www.263903.com-六福彩下载安装| www.547685.com-彩票开奖采集源码| www.65at.cc-互联网购彩票| www.0371.vip-彩93是正规的吗| www.52853.cc-十十彩票怎么玩法| www.029132.com-玩彩票最忌讳什么| www.9011.vip-乐彩彩票是真的假的| www.79538.com-彩9安卓下载安装| www.055018.com-沉迷彩票20年| www.344409.com-山东彩票群英会下载| www.457358.com-买彩票科学方法| www.590182.com-3d走势图彩宝| www.701409.com-足彩比分玩法规则| www.hm68.com-时时彩包胆看号技巧| www.87ed.com-福彩一九3d图库| www.799671.com-彩金今日价格表|