我的页面上有多个标签,而标签中的标签我使用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 > 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 && !entering), 'prev': (next || active) && direction=='prev','next': (next || active) && 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 && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && 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 && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}"><img ng-src=" " 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 && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && 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 > 1" ng-click="prev()"
class="left carousel-control"><span
class="glyphicon glyphicon-chevron-left black l-btn"></span></a> <a
ng-show="slides().length > 1" ng-click="next()"
class="right carousel-control"><span
class="glyphicon glyphicon-chevron-right black r-btn"></span></a></div>
</div>