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.04ey.com-体彩5码最大遗漏| www.858746.com-七乐彩直播开奖软件| www.941893.com-红彩邀请码是多少| 网易彩票www.061wy.com| www.9867.biz-安徽体彩15选5| www.963015.com-体彩绿翡翠9中奖率| www.v99.in-体彩微信宣传语| www.1260.xyz-大华彩票无法提现| www.079660.com-福彩群英会app| www.pj85.cc-甘肃快三遗漏查询表| www.2509.cn-彩票计划86-| www.678074.com-乐彩论坛软件下载| www.761511.com-搜神传蓟彩芝喜欢谁| www.850675.com-外国彩票截止就开奖| www.918199.com-彩票哪个平台最好| 五星彩票www.5xca.com| www.289585.com-凤凰彩票属于私彩| www.8266.me-杨幂品彩丝袜| www.120201.com-河北省体育彩票兑奖| www.674511.com-淮安最新彩票店转让| www.962341.com-湖兆省快三开奖查询| www.36es.com-703彩票心水图| www.086602.com-福利彩票怎么玩的| www.386307.com-足球体彩彩票怎么看| www.507322.com-亿彩堂是怎么回事| www.002379.com-福彩七星彩玩法介绍| www.108311.com-想赢足彩-| www.fq80.com-彩神之霸ll-| www.0472.win-时时彩长龙提醒| www.19861.com-彩票站返点-| www.75342.com-怎么买彩票会发财| www.44934.com-华夏快三-| www.520521.com-e球彩总进球数奖项| www.594854.com-三地乐彩论坛| www.665423.com-上申体彩店-| www.747178.com-全球彩票所有版本| www.77696.com-精彩小视频下载| www.51lj.cc-双色球新浪彩票网| www.4248.in-博纳彩票真的吗| www.37728.com-98彩票官方网站| www.681117.com-怎样才能戒掉买彩票| www.781005.com-好盈彩票app下载| www.892739.com-竞彩足球全包稳赚| www.998862.com-彩乐汇官方下载| www.qz08.com-吉林快三选号器| www.294.gg-网上购买七星彩| www.8459.pw-下载一个爱彩乐| www.5468.vip-今天彩票预测号| www.ft.com-彩票大赢家软件| www.rj63.com-福彩8app-| www.07ug.com-刚力彩芽滴-| www.86658.cc-七星彩走势图专业版| www.512744.com-卖福利彩票多少提成| www.so77.com-台湾时时彩结果| www.654.org-3d福彩彩报第三版| www.6080.site-奇门彩票准到可怕| www.25438.com-福彩群英会开桨| www.023103.com-五星彩开奖-| www.744243.com-8888彩票极速| www.62ae.com-台湾福彩奖-| www.1740.press-彩票滚球什么意思| www.0735.date-开心七星彩网图版区| www.29361.cc-无忧四溢彩-| www.71347.com-福利彩票刮刮卡视频| www.81854.com-周六能买啥彩票号| www.705077.com-福彩中心开机号夏天| www.786596.com-购买世界杯彩票| www.872107.com-湖北体育彩票中奖| www.933047.com-网络快三能玩吗| www.981524.com-306老版彩票| www.cp7522.com-福彩快三开奖一定牛| www.nl36.com-足球体彩计算器| www.79992.com-足彩开奖结果500| www.az88.com-哪个彩票网站好| www.106648.com-快三网站破解结果| www.005455.com-十分彩的骗局| www.109997.com-真帝王宝图彩吧图库| www.204515.com-江西快3彩票| www.367125.com-查询体彩的软件下载| www.07477.com-中国彩票客户端| www.021287.com-最安全的私彩平台| www.025171.com-一定牛江西快三| www.385678.com-易算时时彩软件官网| www.13qb.com-河南彩票大奖得主| www.584418.com-签到送彩金平台| www.678475.com-vr彩票对接接口| www.777009.com-锋彩直播苹果下载| www.886317.com-儿童彩铅画图片大全| www.984037.com-老猫研彩的微博| www.ld47.com-彩票怎么代理| www.413256.com-台球彩八对战真人版| www.517714.com-福利彩结果-| www.596536.com-3d彩博士预测今天| www.667208.com-7乐彩免费网推荐| www.738898.com-彩票微信合买群| www.810885.com-福彩快三怎样能中奖| www.884650.com-百度上买彩票| www.957364.com-今甘肃快三-| 网易彩票www.26163h.com| www.57pg.com-江西福利彩票快3| www.2186.xyz-腾讯分分彩遗漏软件| www.8416.vip-乐彩快三是私盘吗| www.30195.com-竞彩完场比分直播| www.70345.com-亿彩购物中心| www.ge82.com-快捷彩票app| www.qp65.com-今日新鲜事彩票查询| www.098685.com-今日彩票3d图纸| www.66wz.com-星游彩票-| www.000039.com-名游彩票-| www.086257.com-凤凰彩票网计划| www.912816.com-彩票店一辅助生意| www.038245.com-下载财神彩票app| www.543995.com-彩吧图第四版| www.5773.cm-美狮彩票网-| www.144856.com-福彩3口d字迷画迷| www.654752.com-七星彩预测图规| www.749912.com-3d双彩论坛试机号| www.834824.com-彩票直播版区| www.906415.com-福彩快三规律图| www.961424.com-快三上海开奖| 易彩网www.12455d.com| www.872795.com-uu快三直播下载| www.957459.com-北京彩票站电话| www.ui1.com-百宝彩票网手机版| www.877863.com-福彩20选5开奖| www.973281.com-彩虹在线听周杰伦| www.01ci.com-彩票对打是什么意思| www.04jl.com-中超竞猜彩票投注| www.166414.com-武汉快三开奖| www.9554.loan-海南彩网-| www.82379.com-海南东方快三销售点| www.031469.com-下彩网旧版本下载| www.19717.com-如何搭建彩票网| www.89el.com-竞彩体育篮球比分| www.690025.com-彩票分分快三下载| www.679688.com-戒烟戒毒戒彩票| www.521274.com-有专门破解黑彩平台| www.979852.com-驻马店快三开奖结果| www.768229.com-最赚钱的高频彩种| www.984217.com-鸿运彩票app下载| www.ep17.com-彩要开奖查询公告| www.4505.org-19021期七星彩| www.j63.me-彩18-| www.782707.com-福彩中心下载安装| www.886419.com-90彩票哪个公司| 中彩网www.71233m.com| www.99094.com-极速时时彩有几种| www.5957.cm-体彩彩吧-| www.27dx.com-合肥体彩店新报价| www.92cx.com-山东体彩联系| www.yt67.com-省体育彩票孙宪斌| www.455118.com-福彩坊551-| www.611653.com-彩虹主站搭建| www.715353.cc-四季彩骗局是真的吗| www.818020.com-奥博彩票平台下载| www.168896.com-內蒙古快三-| www.2486.vip-福利彩票奖励| www.150923.com-湖北福彩快三新| www.296977.com-彩票中奖的灵异事件| www.347955.com-添光溢彩近义词| www.392996.com-彩铅画梅花图片大全| www.481572.com-亿乐彩彩票-| www.7181.win-宝乐彩票app下载| www.80840.com-竞彩大神网名|