js tab滑动切换

JavaScript013

js tab滑动切换,第1张

楼主的这个代码我看不太懂

是经过压缩的

楼主看下这个代码,经过修改应该可以的

http://www.lanrentuku.com/js/biaoqian-598.html

这是自己封装的原生js方法,为了偷懒,用了电jqurey。调用方法如下:

touchs._left(object)//往左滑动,

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明:object的取值可以是一个id("#id")表达式,或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等,只要可以用jqurey通过这个表达式获取到dom对象,这个表达式怎么写都可以。

1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0

2. 在HTML中引入script

<script type='text/javascript' src='path/to/angular.min.js'></script>

<script src="path/to/ui-bootstrap.min.js"></script>

<script src="path/to/ui-bootstrap-tpls.min.js"></script>

3. HTML示例代码如下:

<!-- 轮播图 -->

<div>

<carousel interval="myInterval">

<slide ng-repeat="slide in slides" active="slide.active">

<img ng-src="{{slide.image}}" style="margin:auto">

<div class="carousel-caption">

<p>{{slide.text}}</p>

</div>

</slide>

</carousel>

</div>

4. PostListController.js代码如下:

ftitAppModule.controller('PostListController',

function ($scope) {

// 设置轮播图图片间隔

$scope.myInterval = 5000

// 轮播图数据初始化

var slides = $scope.slides = []

// 添加轮播图源

slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你,情人节快乐' })

slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你,情人节快乐' })

})