|
要求无限轮播,并且都是从右到左顺序,本以为加上loop : true属性就可以了,发现加上loop : true属性后只轮播一次就不动了,
Html
-
<div class="jb_home_outer">
<div class="jb_yellow" id="jb_yellow"></div>
<div class="jb_content">
<div class="swiper-container jb_carousel" id="jb_carousel">
<div class="swiper-wrapper" >
<div class="swiper-slide" ng-repeat="img in carousel track by $index">
<button
class="ani"
ng-click="homeInfo.CarouselLink(img)"
swiper-animate-effect="fadeIn"
swiper-animate-duration="3s"
swiper-animate-delay=".5s">
阅读详情
</button>
<a href=""
class="car"
ng-click="homeInfo.CarouselLink(img)">
<div class="opcity_bg ani"
swiper-animate-effect="shadowLay"
swiper-animate-duration="1s"
swiper-animate-delay=".5s">
</div>
<img class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay=".2s"
ng-src="{{img.imgPc}}" alt="{{img.title}}">
</a>
<div
class="jb_carousel_text"
id="jb_carousel_text" ng-cloak="">
<p class="ani title"
swiper-animate-effect="bounceInRight"
swiper-animate-duration="1s"
swiper-animate-delay="1s">
{{img.configXml.title}}
</p>
<div
id="jb_carousel_text01"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1.5s"
swiper-animate-delay="1s"
class="ani title jb_carousel_content">
{{img.configXml.content | CarouselContentFilter}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="line_1 ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay=".2s"></div>
<div class="line_2 ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay=".2s"></div>
<div class="line_3 ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay=".2s"></div>
<div class="line_4 ani"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="2s"
swiper-animate-delay=".2s"></div>-->
<div class="page">
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class=" prev fa fa-angle-left " style="outline: none;"></div>
<div class=" next fa fa-angle-right" style="outline: none;"></div>
<div class="jb_realIndex" ng-cloak="">
{{pageIndex+1}} / {{carousel.length}}
</div>
</div>
</div>
JS
-
loginOrRegist.httpPostRequest(getAllAdvertUrl)
.then(function ( response ) {
$rootScope.carousel = [];
if ( response.code === 1 ) {
response.object.forEach(function ( item, idx ) {
item.imgPc = response.map.url + item.imgPc;
if ( item.type === 1 && item.linkType !== 3) {
item.configXml = carouselConfig[idx];
$rootScope.carousel.push(item);
}
else if(item.linkType === 3){
$rootScope.headerShowHide = true;
var global = true;
sessionStorage.setItem('global',global);
latestActivBtn.push(item);
sessionStorage.setItem('latestActivBtn',JSON.stringify(latestActivBtn))
}
});
if ( $rootScope.carousel.length > 6 ) {
$rootScope.carousel.length = 6;
}
var mySwiper = new Swiper('.swiper-container', { //重置轮播加载方法
loop : true,
direction: 'horizontal',
speed : 1000,
// runCallbacksOnInit:true,
// updateOnImagesReady:true,
pagination : {
el : '.swiper-pagination',
clickable : true
},
navigation : {
nextEl : '.next',
prevEl : '.prev'
},
slidesPerView : 1,
paginationClickable : true,
spaceBetween : 20,
// loop : true,
// loopAdditionalSlides:1,
autoplay : {
delay : 2000,
disableOnInteraction : false,
waitForTransition: false
},
keyboardControl : true,
observer : true,//修改swiper自己或子元素时,自动初始化swiper
observeParents : true,//修改swiper的父元素时,自动初始化swiper
on : {
init : function () { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(this); //隐藏动画元素
setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了
swiperAnimate(mySwiper); //初始化完成开始动画
},500)
},
slideChangeTransitionEnd : function () {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
},
autoplay : function () {
clearInterval(pageTime);
pageTime = setInterval(function () {
$(".page").css({
animation : 'fadeIn 5s linear 0s infinite'
});
}, 0);
}
}
},0);
var timerIndex = setInterval(function () {
$scope.$apply(function () {
var pageIndex = $scope.pageIndex = mySwiper.realIndex;
});
}, 800);
}
else {
$modalService.modalConfirm(response.message, '现在登录', $state, 'login');
}
});
|
|