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天

知道了
亚洲28 www.2399.top-快三怎么判断大小| www.412961.com-徐州福利彩票员工| www.173473.com-大发快三很假| www.439263.com-cclcc金彩网| www.678547.com-精英彩票安全吗| www.772931.com-足彩胜负结果分析| www.766.online-彩民之家图彩新图| www.362389.com-彩虹的人生励志句子| www.509528.com-彩宝网排五走势图| www.599150.com-易彩汽车补漆笔| www.681515.com-彩票全中个人所得税| www.769729.com-七彩捞腌菜下载安装| www.856108.com-时时彩福少软件讲解| www.948079.com-怎么加盟福利彩票店| 金冠彩票www.49956x.com| www.47796.com-鸿运彩票网登录方式| www.002372.com-注册送彩金可提现| www.094400.com-彩票开奖查询排五| www.pl59.com-时时彩有2期计划吗| www.15dr.com-乐透乐彩彩论坛| www.065.site-澳客彩票网开奖大厅| www.020265.com-彩票计算器双色球| www.zy32.com-上海体彩兑奖中心| www.083179.com-五分彩怎么样看走势| www.234145.com-如何戒除彩票| www.552898.com-时时彩采集软件| www.290472.com-分分快三彩彩票| www.662100.com-重庆彩票开奖记录| www.768167.com-赢彩吧主页-| www.863571.com-境外彩票api接口| www.934082.com-中国彩票预测中心| www.987835.com-甘肃张掖快三| www.cr24.com-怎样加盟彩票投注站| www.7mu.com-买彩票中大奖的人| www.43503.com-双色球旺彩网预测| www.002330.com-安徽快三数据专家| www.085406.com-c6com彩票-| www.886541.com-体彩七星彩论坛| www.977481.com-北京加盟彩妆店| www.kr9.com-彩票开奖查诃| www.ww08.com-最新申请26元彩金| www.30or.com-彩虹岛2官网| www.0932.org-优彩网官-| www.7568.cc-东方亮彩几号发工资| www.547234.com-彩票对冲刷流水| www.777390.com-江西快三购买技巧| www.987908.com-大赢家幸运快三| www.op01.com-999博彩白菜| www.40zt.com-七星彩牛爹网| www.4839.cc-9号彩票注册网址| www.fw32.com-app宝马彩票| www.s63.vip-体彩排列三金胆| www.56it.com-上海体彩福彩下载| www.0379.live-足彩吧是真的吗| www.9625.com-福彩3d初几开| www.45736.com-澳门乐购彩-| www.006684.com-体彩店装修内部图| www.145104.com-玩彩票刷流水赚钱| www.218760.com-一分快三刷流水| www.4838.vip-e乐彩注册-| www.06088.com-福彩3d211路号| www.535078.com-七星彩中3个多少钱| www.647198.com-足彩全包过滤技巧| www.773177.com-恒彩彩票合法吗| www.961467.com-大奖彩票下载苹果| www.3505.cm-m5彩票平台跑路了| www.07150.com-一定牛快三豹子预测| www.81774.com-玩快三赢了200万| www.061476.com-我去彩票站-| www.144032.com-竞彩计算器混合过关| www.057350.com-安徽体彩网官网| www.298268.com-七星彩今晚头尾资料| www.376415.com-99彩登陆平台登录| www.506036.com-许昌盛彩滴滴地址| www.577739.com-查上海快三-| www.022508.com-买彩票会中奖| www.fd36.com-福彩十分钟开奖结果| www.f88.xyz-中彩彩票有危险吗| www.47yy.com-彩民乐三d图库| www.820.gg-东方亮彩出大事| www.4689.me-体彩贴吧-| www.7969.vip-bbin博彩-| www.42701.com-彩宝贝手机版| www.88140.com-红包彩票app下载| www.5269.cn-世界杯彩票停售时间| www.34941.com-1爱彩乐-| www.650728.com-时时彩刷量技巧| www.812071.com-乐彩字谜论坛| www.878508.com-斯特凡万能彩票公式| www.951620.com-好乐多彩票app| www.996783.com-快乐彩几点开始| www.bw64.com-福彩快三有什么规律| www.03uh.com-彩票设胆什么意思| www.95wq.com-快三之家下载安装| www.871370.com-5亿彩票-| www.957246.com-足彩单场比分直播| www.cp960.com-体彩快乐十分| www.rs36.com-福彩预测图-| www.641258.com-体彩中奖图片大全| www.34573.cc-彩票带赚的-| www.881540.com-彩票跑路-| www.cl.com-网易快三是真的吗| www.533115.com-澳门十大博彩官网| www.603974.com-彩升服饰批发| www.n33.cc-我爱乐透彩票网| www.40kl.com-浙讧体彩20选5| www.842.org-旧版彩库宝典苹果| www.4210.top-吉林快三和尾走势图| www.8989.cn-竞彩误差-| www.473791.com-福彩双色球中3个| www.557890.com-109彩票下载| www.85er.com-极速赛车是国家彩票| www.1919.me-重庆时时彩客户端| www.sq05.com-福彩双色球领奖地址| www.1kv.cc-兴安盟福利彩票中心| www.559849.com-奥运彩票收藏价格表| www.677733.com-双色彩票开奖| www.gr62.com-新彩吧手机版| www.62im.com-假彩票刮刮乐批发| www.20567.cc-彩票网站签到| www.715727.com-谁知道彩票计划软件| www.808872.com-90后买彩票-| www.878191.com-体彩排列三中奖| www.939685.com-重庆彩票官网| www.980479.com-怎样申请彩票投注站| www.cp7977.com-江苏快三是骗人的吗| www.ja34.com-爱彩乐彩票走势图| www.861692.com-赢彩3d开机号| www.845509.com-彩票是指国家为筹集| www.990115.com-布衣天下图库多彩网| www.153333.com-三分彩规则-| www.498898.com-网上购彩票何时恢复| www.639884.com-横沥镇东方亮彩招聘| www.879912.com-极速开奖的彩票| www.971052.com-福彩数字规定| www.fw93.com-天天中彩票骗局揭秘| www.27rx.com-彩民算不算赌徒| www.1615.wang-云彩网彩票正规吗| www.799464.com-彩吧彩票勇士团队| www.914723.com-体彩乐彩网开奖号| www.998987.com-湖北快三热点肖立刚| www.gi77.com-彩票守号-| www.v01.org-彩票恶搞软件| www.89ry.com-篮球一定牛竞彩推介| www.862796.com-下载星宇购彩| www.957680.com-乐透了彩票-| www.hl28.com-旺彩双色球手机软件| www.870.cm-重庆时时彩五星缩水| www.6955.net-足球彩票软件收米| www.34147.com-彩虹岛刷单app| www.800138.com-体彩任五开奖结果| www.924948.com-懂球帝傲赢彩票| 人人彩票www.rrle4.com| www.14441.cc-福彩三d彩吧图库| www.238400.com-网上赌彩票犯法吗| www.996189.com-昨天足彩14期比分| www.d69.xyz-吉林市快三结果查询| www.y50.top-福彩双色球复式图片| www.43729.com-苹果彩膜多少钱一张| www.kx17.com-福彩快乐3-| www.89xu.com-澳门博彩走低| www.6596.in-国外彩票大奖排行| www.904885.com-彩票站利润-| www.xy90.com-彩票截止前购买中奖|