修改底部轮播
							parent
							
								
									afeed637a8
								
							
						
					
					
						commit
						7b3303fa22
					
				| 
						 | 
				
			
			@ -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时暂停自动切换,鼠标离开时恢复自动切换。
 | 
			
		||||
							},
 | 
			
		||||
						})
 | 
			
		||||
					}
 | 
			
		||||
				</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 '<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").removeClass('itemActive');
 | 
			
		||||
		$(this).addClass('itemActive');
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue