diff --git a/index.html b/index.html index 5483021..8e95e61 100644 --- a/index.html +++ b/index.html @@ -133,10 +133,14 @@ var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, - autoplay: 5000, slidesPerView: "auto", centeredSlides:true, spaceBetween: 20, + autoplay: {//开启自动播放 + delay:3000, + disableOnInteraction: false,//触摸后不会停止自动滚动 + pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换,鼠标离开时恢复自动切换。 + }, }) } diff --git a/js/javascript.js b/js/javascript.js index c49efa2..89ed8d5 100644 --- a/js/javascript.js +++ b/js/javascript.js @@ -1,54 +1,4 @@ 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 '' + text + ''; - }, - }, - 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").removeClass('itemActive'); $(this).addClass('itemActive');