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.753621.com-彩72彩票-| www.900087.cc-22彩票网-| www.983181.com-澳门赌博技巧彩票| www.ji52.cc-五分时时彩-| www.p26.cc-体彩怎样选号| www.47mf.com-环彩网官方网站| www.0528.cc-福彩牛彩图迷| www.07264.com-天津体彩app下载| www.59722.cc-彩虹玫瑰花束| www.033607.com-帮别人时时彩下单| www.130514.com-汇彩网违法吗| www.216252.com-大马彩最新开彩成绩| www.302055.com-北京快三走行态势图| www.383468.com-英国有什么彩票开奖| www.550590.com-体彩有中过大奖的吗| www.645917.com-2016生肖彩-| www.746655.com-冀彩宝什么时候能用| www.830259.com-pk567彩票-| www.911092.com-浙江有快三么| www.980573.com-成功彩票平台可靠吗| www.hv37.com-e球彩玩法窍门| www.f31.xyz-乐彩国际娱乐安全吗| www.46ct.com-ig传统彩官网| www.0004.org-买彩票有什么窍门吗| www.8809.loan-福建体彩报码聊天| www.50713.com-一分快三开奖走势图| www.99609.cc-北京单场彩票店能买| www.079718.com-员工中彩票-| www.154979.com-体彩足球6串22| www.283380.com-七星彩开什么号码| www.377917.com-幸运彩3132-| www.508830.com-机选七星彩能中奖吗| www.588633.com-七星彩今晚开什么将| www.669823.com-北京福彩11选五| www.756445.com-竞彩网官方app| www.879071.com-合肥快三跨度| www.965201.com-买大发快三的方法| www.cai2342.com北京快三预测推荐| www.mk16.com-彩票网站大全app| www.8ex.cc-彩票提点多少| www.73sr.com-总彩票心得体会| www.1911.cc-彩福快三是官方的吗| www.8041.biz-陈流风景水彩视频| www.33643.com-专家说彩李迎| www.82309.com-网络彩票中奖骗局| www.041098.com-彩票中奖者的故事| www.198541.com-快三时时计划表| www.277383.com-彩票赔-| www.379844.com-彩丰行-| www.562809.com-正彩文具联系电话| www.639342.com-够力七星彩奖麦| www.744553.com-詹天佑福彩3d| www.822711.com-怎么求仙家中彩票| www.899464.com-彩神通代理会员| www.969342.com-梅州市福彩中心| www.fw22.com-宝马彩票登录网址| www.yr72.com-吉林市体彩中心| www.31at.com-彩虹app制作方法| www.0429.cn-肌肉同志彩漫| www.7210.vip-怎样买黑彩-| www.24057.cc-如何戒彩票的坏处| www.70798.com-新人送彩金的彩票| www.059261.com-彩票的四季发财玩法| www.143043.com-炫彩陀螺软件| www.222562.com-云顶彩票送45| www.301908.com-七星彩开奖时间查询| www.375052.com-福彩算号-| www.529816.com-乐盈彩票计划群| www.615408.com-四川福彩开奖信息| www.688699.cc-广东福彩电话投注| www.770411.com-搜索福彩排列五| www.877192.com-七乐彩咋样算中奖| www.958772.com-过年后彩票几号开始| 凤凰彩票www.77802g.com| www.gm99.cc-2018年各省彩礼| www.xy07.com-千万彩票官方| www.19hh.com-网上买私彩犯法不| www.949.me-体彩七位要不要顺序| www.6340.com-亚洲彩导航-| www.15577.cc-k彩彩民福地注册| www.58131.cc-福彩双色复试图解| www.029544.com-利彩可以相信不| www.104369.com-彩神争霸犀牛彩票| www.170626.com-幸运快三代玩骗局| www.278216.com-安徽省福彩中心地图| www.365258.com-香港彩票报刊大全| www.451883.com-七星彩每星期几开奖| www.542669.com-体彩大乐透游戏规则| www.649298.com-彩跑粉怎么洗| www.732062.com-彩票中奖几天过期| www.804465.com-彩票输改赢软件代码| www.876840.cc-可以买体彩的软件| www.965123.com-彩票江苏快三是撒| 大玩家彩票www.84499l.com| www.em60.com-我想买彩票中大奖| www.vk63.com-大发快三开奖源| www.07sg.com-手绘彩铅-| www.75kn.com-彩票店的风水| www.1222.top-全民双色球彩票| www.05119.com-有些什么彩票软件| www.47587.com-辽宁省福彩3d走势| www.90897.com-福彩论坛175oo| www.045342.com-彩神通下载-| www.157357.com-91竞彩-| www.240119.com-新3d彩定位胆技巧| www.312706.com-彩票生日选号器| www.378848.com-k彩app登录-| www.520640.com-快三15点号码| www.586190.com-特吧彩吧高手网吧| www.655716.com-彩妆学校教育培训| www.760480.com-诚信彩票官网| www.841006.com-利民彩票网-| www.905018.com-甘肃快三跨度走试图| www.966377.com-福彩排7开奖结果| 头条彩票www.58870t.com| www.dt99.cc-大发快三破解器软件| www.uj92.com-大发快三提现不到账| www.03js.com-玉林茂林镇彩票店| www.70ce.com-中彩票网首页| www.0632.in-彩票主持人李琳| www.33356.com-彩迷推荐-| www.73769.cc-3456彩票-| www.020088.com-中彩网3的推荐号| www.083948.com-智博彩票网登录| www.139567.cc-彩31彩票领导官网| www.213515.com-福建快三中奖金额| www.280352.com-新时时彩基本走势图| www.438700.com-湖南体彩网彩吧论坛| www.525629.com-澳门博彩五星在线| www.613539.com-qq群彩票机器人| www.678273.com-中国彩吧更懂彩票| www.750543.com-彩票三星挂机方案| www.812602.com-彩票双色球走势预测| www.878673.cc-江西快三彩票中心| www.989163.com-新浪数字彩票网| www.cai9166.comhao123彩票| www.jg72.com-福利彩票下载安装| www.yw89.com-福利彩票夺宝连连看| www.15ev.com-结婚彩礼和嫁妆问题| www.412.tv-幸运彩一河南福彩| www.3296.biz-彩色简笔画风景| www.8203.cc-辉煌彩票在线| www.23760.com-葵花泽众彩网| www.60266.cc-58黑彩-| www.269456.com-3分彩是什么| www.353577.com-彩票走势图表图| www.559854.com-菠菜网彩金论坛| www.635926.com-appcp快乐彩票| www.743249.com-皇室彩票平台| www.805059.com-福彩双色球胆拖中奖| www.889901.com-体彩nba推荐| www.947407.com-优彩在线彩票赔了| www.993380.com-足彩任选九场怎么玩| www.cp211.com-江苏快三开奖统计| www.js61.com-彩神x下载网址| www.ye62.com-派彩每日推荐大乐透| www.10yt.com-76858彩票官网| www.77nh.cc-彩娃彩票-| www.0909.me-凤凰彩票40088| www.9891.cc-汇丰彩票软件| www.44141.com-彩球官网aap| www.81762.com-飞腾彩票不是赌博吗| www.024784.com-大发彩票江西快三| www.088020.com-双赢彩票网址|