发表于： 2017-02-15 01:29:02
0 1204
今天完成的事情：
修改了找职位页面纵向轮播，修改了首页轮播的布局
明天计划的事情：
修改找职位页面侧边栏
遇到的问题：
侧边栏想用JQ操作DOM，现在还没写出来。自己写filter不是很熟练，需要练习。
收获：
总结了下轮播图的一些知识点
1.轮播头
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
轮播的头，注意一个页面有两个轮播Id一定不能相同，data-ride="carousel"用于标记轮播在页面加载时就在页面播放，无需使用js。
data-interval="2000"设置轮播时间
2.控制轮播的小圆点
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
3.轮播的图片
<div class="item" ng-repeat="company in vm.companyList track by $index" ng-class="{active:!$index}">
<div class="findJob-content-carousel2" >
<div class="findJob-content-carousel2left">
<div class="findJob-content-carousel2i"><img ng-src="{{company.logo}}"></div>
<div class="findJob-content-carouselDel">
<div class="findJob-content-carouselCom">{{company.name}}</div>
<div class="findJob-content-carouselSlogan">{{company.slogan}}</div>
<div class="findJob-content-carouselLabel" >
<p class="findJob-content-carouselLabel1" ng-repeat=" industry in company.industryList">{{industry | chooseIndustry}}</p>
注意：轮播的第一个class有active，下面的没有。可以用ng-class控制，图片用ng-src。
4.左右的前进后退样式
<a data-target="#carousel-example-generic" role="button" data-slide="prev">
<div class="findJob-carousel-left">
<span class=" glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
</a>
<a data-target=" #carousel-example-generic" role="button" data-slide="next">
<div class="findJob-carousel-right">
<span class=" glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</a>
返回列表
评论