修改底部轮播

master
chen 2021-12-10 11:27:27 +08:00
parent afeed637a8
commit 7b3303fa22
2 changed files with 5 additions and 51 deletions

View File

@ -133,10 +133,14 @@
var mySwiper = new Swiper('.swiper-container', { var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', direction: 'horizontal',
loop: true, loop: true,
autoplay: 5000,
slidesPerView: "auto", slidesPerView: "auto",
centeredSlides:true, centeredSlides:true,
spaceBetween: 20, spaceBetween: 20,
autoplay: {//开启自动播放
delay:3000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换鼠标离开时恢复自动切换。
},
}) })
} }
</script> </script>

View File

@ -1,54 +1,4 @@
jQuery(function($){ jQuery(function($){
// banner轮播
var bannerSwiper = new Swiper('.banner-swiper',{
loop:true,//开启循环播放
autoplay: {//开启自动播放
delay:3000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换鼠标离开时恢复自动切换。
},
pagination: {//分页器
el: '.swiper-pagination',
type: 'bullets',//指示点样式 bullets圆点默认、fraction分式、progressbar进度条、custom自定义
progressbarOpposite: false,//水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
dynamicBullets: false,//当slide很多时分页器小点的数量会部分隐藏。针对bullets
dynamicMainBullets: 2,//主展示的数量
hideOnClick :true,//点击时隐藏分页器
clickable :true,//点击分页器的指示点控制Swiper切换
// bulletClass : 'my-bullet',//需设置.my-bullet样式
// bulletActiveClass: 'my-bullet-active',//当前活动块的指示小点的类名。需设置.my-bullet-active样式
renderBullet: function (index, className) {
switch(index){
case 0:text='壹';break;
case 1:text='贰';break;
case 2:text='叁';break;
case 3:text='肆';break;
case 4:text='伍';break;
case 5:text='六';break;
case 6:text='柒';break;
case 7:text='捌';break;
case 8:text='玖';break;
case 9:text='拾';break;
}
return '<span class="' + className + '">' + text + '</span>';
},
},
effect : 'fade',//轮播的动效 默认为"slide"(普通位移切换),还可设置为"fade"(淡入)、"cube"(方块)、"coverflow"3d流、"flip"3d翻转、"cards"(卡片式)、"creative"(创意性)。
fadeEffect: {
crossFade: true,
},
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次去除ani类名
}
}
})
$(".massage-box ul li").on('click',function(){ $(".massage-box ul li").on('click',function(){
$(".massage-box ul li").removeClass('itemActive'); $(".massage-box ul li").removeClass('itemActive');
$(this).addClass('itemActive'); $(this).addClass('itemActive');