bootstrap carousel不使用角js

时间:2015-01-21 08:37:18

标签: javascript jquery angularjs twitter-bootstrap carousel

我的页面上有多个标签,而标签中的标签我使用bootstrap carousel显示图像滚动条。但如果我切换其他选项卡并返回此选项卡,则图像停止滚动。有时它也不会在第一次加载的页面上工作,当我刷新页面然后它工作。这个是随机的。

以下是我的代码:

<div style="height: 350px; width: 90%; margin: auto;">
    <div class="carousel ng-isolate-scope" ng-mouseleave="play()"
        ng-mouseenter="pause()" interval="5000">
    <ol ng-show="slides().length &gt; 1" class="carousel-indicators">
        <!-- ngRepeat: slide in slides() -->
        <li ng-click="select(slide)" ng-class="{active: isActive(slide)}"
            ng-repeat="slide in slides()" class="ng-scope"></li>
        <!-- end ngRepeat: slide in slides() -->
        <li ng-click="select(slide)" ng-class="{active: isActive(slide)}"
            ng-repeat="slide in slides()" class="ng-scope"></li>
        <!-- end ngRepeat: slide in slides() -->
        <li ng-click="select(slide)" ng-class="{active: isActive(slide)}"
            ng-repeat="slide in slides()" class="ng-scope active"></li>
        <!-- end ngRepeat: slide in slides() -->
        <li ng-click="select(slide)" ng-class="{active: isActive(slide)}"
            ng-repeat="slide in slides()" class="ng-scope"></li>
        <!-- end ngRepeat: slide in slides() -->
    </ol>
    <div ng-transclude="" class="carousel-inner">
    <div ng-transclude="" class="item text-center ng-isolate-scope"
        ng-class="{ 'active': leaving || (active &amp;&amp; !entering), 'prev': (next || active) &amp;&amp; direction=='prev','next': (next || active) &amp;&amp; direction=='next','right': direction=='prev','left': direction=='next'}"
        active="slide.active"><img
        ng-src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT0SuUAQtA1rW0r8VuzwcNc4VXdIS_k-kQBRygzhUvKSYRAnm9uLQ"
        class="carousel_image ng-scope" alt="1"
        src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT0SuUAQtA1rW0r8VuzwcNc4VXdIS_k-kQBRygzhUvKSYRAnm9uLQ">
    <!-- ngIf: true==true -->
    <div ng-if="true==true" class="ng-scope">
    <div class="carousel-caption">Main Image Description Test</div>
    </div>
    <!-- end ngIf: true==true --></div>
    <div ng-transclude=""
        class="item text-center ng-isolate-scope active left"
        ng-class="{
        'active': leaving || (active &amp;&amp; !entering),
        'prev': (next || active) &amp;&amp; direction=='prev',
        'next': (next || active) &amp;&amp; direction=='next',
        'right': direction=='prev',
        'left': direction=='next'
      }"><img
        ng-src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRqf1G8Ib-xLrKDlHO8BAY0sZhDf3qZzEmbma4dLluy0yf0B40lqw"
        class="carousel_image ng-scope" alt="2"
        src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRqf1G8Ib-xLrKDlHO8BAY0sZhDf3qZzEmbma4dLluy0yf0B40lqw">
    <!-- ngIf: true==true -->
    <div ng-if="true==true" class="ng-scope"><span class="carousel-caption">
    Interior Image 1 Desc </span></div>
    <!-- end ngIf: true==true --></div>
    <div ng-transclude=""
        class="item text-center ng-isolate-scope next left"
        ng-class="{
        'active': leaving || (active &amp;&amp; !entering),
        'prev': (next || active) &amp;&amp; direction=='prev',
        'next': (next || active) &amp;&amp; direction=='next',
        'right': direction=='prev',
        'left': direction=='next'
      }"><img ng-src="&nbsp;" class="carousel_image ng-scope" alt="3"> <!-- ngIf: true==true -->
    <div ng-if="true==true" class="ng-scope">
    <div class="carousel-caption">Interior Image 2 Desc</div>
    </div>
    <!-- end ngIf: true==true --></div>
    <div ng-transclude="" class="item text-center ng-isolate-scope"
        ng-class="{
        'active': leaving || (active &amp;&amp; !entering),
        'prev': (next || active) &amp;&amp; direction=='prev',
        'next': (next || active) &amp;&amp; direction=='next',
        'right': direction=='prev',
        'left': direction=='next'
      }"><img
        ng-src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvKZjFy3_TavQ28K6o9cHTG818YATW8dls7bbCBFwVmcFTdDDV"
        class="carousel_image ng-scope" alt="4"
        src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvKZjFy3_TavQ28K6o9cHTG818YATW8dls7bbCBFwVmcFTdDDV">
    <!-- ngIf: true==false --></div>
    </div>
    <a ng-show="slides().length &gt; 1" ng-click="prev()"
        class="left carousel-control"><span
        class="glyphicon glyphicon-chevron-left black l-btn"></span></a> <a
        ng-show="slides().length &gt; 1" ng-click="next()"
        class="right carousel-control"><span
        class="glyphicon glyphicon-chevron-right black r-btn"></span></a></div>
    </div>

0 个答案:

没有答案