http://www.gdhf.gov.cn/js/index.js

1//图片新闻
2    var swiper01 = new Swiper('.xwdt_banner',{
3        pagination: {
4            clickable: true,
5            el: '.xwdt_banner .swiper-pagination',
6        },
7        loop: true,
8		autoplay: {
9			disableOnInteraction: false, //手动滑动之后不打断播放
10			delay: 5000
11		}, 
12		navigation: {
13			nextEl: ".swiper-button-next",
14			prevEl: ".swiper-button-prev",
15		},
16    });
17  	$(function(){     
18//海丰新闻选项卡 
19	$("#tab1").each(function(){
20		var $tab = $(this);
21		var $lis = $tab.find("li");
22		var swiperEle = $tab.next(".contten").find(".tab-swiper")[0];
23
24		var tabSwiper = new Swiper(swiperEle, {
25			slidesPerView: 1,
26			spaceBetween: 0,
27			loop: false,
28			allowTouchMove: true,
29			speed: 300,
30			on: {
31				slideChange: function() {
32					var idx = this.activeIndex;
33					$lis.removeClass("selected");
34					$lis.eq(idx).addClass("selected");
35				}
36			}
37		});
38
39		$lis.mouseover(function(){
40			tabSwiper.slideTo( $(this).index() );
41		});
42	});
43//政务公开选项卡  
44    $("#tab2").each(function(){
45		var $tab = $(this);
46		var $lis = $tab.find("li");
47		var swiperEle = $tab.next(".contten").find(".tab-swiper")[0];
48
49		var tabSwiper = new Swiper(swiperEle, {
50			slidesPerView: 1,
51			spaceBetween: 0,
52			loop: false,
53			allowTouchMove: true,
54			speed: 300,
55			on: {
56				slideChange: function() {
57					var idx = this.activeIndex;
58					$lis.removeClass("seles2");
59					$lis.eq(idx).addClass("seles2");
60				}
61			}
62		});
63
64		$lis.mouseover(function(){
65			tabSwiper.slideTo( $(this).index() );
66		});
67	});
68 //互动交流选项卡  
69     $("#tab3").each(function(){
70		var $tab = $(this);
71		var $lis = $tab.find("li");
72		var swiperEle = $tab.next(".contten").find(".tab-swiper")[0];
73
74		var tabSwiper = new Swiper(swiperEle, {
75			slidesPerView: 1,
76			spaceBetween: 0,
77			loop: false,
78			allowTouchMove: true,
79			speed: 300,
80			on: {
81				slideChange: function() {
82					var idx = this.activeIndex;
83					$lis.removeClass("seles2");
84					$lis.eq(idx).addClass("seles2");
85				}
86			}
87		});
88
89		$lis.mouseover(function(){
90			tabSwiper.slideTo( $(this).index() );
91		});
92	});		
93}); 
94    
95//横幅
96   var swiper02 = new Swiper('.hftp', {
97      pagination: {
98      	clickable: true,
99        el: '.hftp .swiper-pagination',
100      },
101       loop: true, 
102    }); 
103    
104//服务选项卡 + 左右滑动动画
105$(function(){	
106    var $tab4 = $('.biaoti ul'); 
107    var $lis = $tab4.find('li');
108    var $products = $('.product');
109    var $wrap = $('.product_wrap');
110    var $line = $tab4.find('p');
111    var len = $lis.length;
112    var currentIndex = 0;
113    var isAnimating = false;
114    // 移动底部线条
115    function setLine($item) {
116        var left = $item.position().left;
117        var width = $item.outerWidth();
118        $line.stop(true).animate({ left: left, width: width }, 300);
119    }
120    // 初始化
121    $lis.first().addClass('onn'); 
122    $products.eq(0).addClass('active');
123    setLine($lis.first());
124
125    // 切换面板
126    function switchTab(idx, dir){
127        if(idx < 0 || idx >= len || isAnimating) return;
128        isAnimating = true;
129        var prevIndex = currentIndex;
130        currentIndex = idx;
131
132        var $curLi = $lis.eq(idx);
133        var $prevProduct = $products.eq(prevIndex);
134        var $nextProduct = $products.eq(idx);
135
136        // 切换选中类
137        $lis.removeClass('onn');
138        $curLi.addClass('onn');
139
140        // 左右滑动动画
141        if(dir === 'left'){
142            $prevProduct.removeClass('active leave-right').addClass('leave-left');
143            $nextProduct.removeClass('leave-left leave-right').addClass('active');
144        }else{
145            $prevProduct.removeClass('active leave-left').addClass('leave-right');
146            $nextProduct.removeClass('leave-left leave-right').addClass('active');
147        }
148
149        setLine($curLi);
150
151        setTimeout(function(){
152            isAnimating = false;
153        }, 300);
154    }
155
156    // 电脑鼠标移入
157    $lis.mouseenter(function(){
158        var index = $lis.index($(this));
159        var dir = index > currentIndex ? 'left' : 'right';
160        switchTab(index, dir);
161    });

162
163    // 手机触摸滑动
164    var startX = 0, moveX = 0;
165    $wrap.on('touchstart', function(e){
166        startX = e.originalEvent.touches[0].clientX;
167    });
168    $wrap.on('touchmove', function(e){
169        moveX = e.originalEvent.touches[0].clientX;
170    });
171    $wrap.on('touchend', function(){
172        var diff = startX - moveX;
173        if(Math.abs(diff) > 30){
174            if(diff > 0){
175                switchTab(currentIndex + 1, 'left');
176            }else{
177                switchTab(currentIndex - 1, 'right');
178            }
179        }
180        startX = moveX = 0;
181    });
182});
183//政民互动轮播图 	
184$(document).ready(function(){
185    var $dotLi    = $('.baninf_dot li');
186    var $titleLi  = $('.baninf_title li');
187    var swiperEle = document.querySelector('.banner-swiper');
188
189    // 初始化Swiper
190    var bannerSwiper = new Swiper(swiperEle, {
191        slidesPerView: 1,
192        spaceBetween: 0,
193        loop: true,          // 循环轮播
194        autoplay: {
195            delay: 5000,    // 5秒切换，和原代码一致
196            disableOnInteraction: false
197        },
198        speed: 300,
199        allowTouchMove: true,
200
201        // 切换时同步圆点 + 标题动画
202        on: {
203            slideChange: function(){
204                var idx = this.realIndex; // 获取真实索引（排除loop复制项）
205                // 圆点切换
206                $dotLi.removeClass('baninf_ondot');
207                $dotLi.eq(idx).addClass('baninf_ondot');
208
209                // 标题动画（和原逻辑一致）
210                $titleLi.hide().css('width','0');
211                $titleLi.eq(idx).show().stop().animate({width:'290px'}, 200);
212            }
213        }
214    });
215
216    // 鼠标hover 圆点 → 切换轮播
217    $dotLi.hover(function(){
218        var index = $(this).index();
219        bannerSwiper.slideToLoop(index);
220    });
221
222    // 鼠标进入banner区域 暂停轮播
223    $('#banimg').hover(function(){
224        bannerSwiper.autoplay.stop();
225    },function(){
226        bannerSwiper.autoplay.start();
227    });
228});
229//专题专栏
230	var swiper = new Swiper('.ztzl_con', {
231		slidesPerView: 4,
232		spaceBetween: 15,
233		loop: true, 
234		autoplay: {
235			disableOnInteraction: false, //手动滑动之后不打断播放
236			delay: 5000
237		}, 
238		navigation: {
239			nextEl: '.swiper-button-next',
240			prevEl: '.swiper-button-prev',
241		},				     
242
243		});	
244        // 监听窗口变化，手机端调整显示数量
245function setSwiperView() {
246    var winW = $(window).width();
247    if (winW <= 768) { // 手机/平板断点，可自行修改
248        swiper.params.slidesPerView = 2; // 手机端显示2张，单张占比更大=视觉放大
249        swiper.params.spaceBetween = 10; // 手机端缩小间距
250    } else {
251        swiper.params.slidesPerView = 4; // 大屏恢复4张
252        swiper.params.spaceBetween = 15;
253    }
254    swiper.update(); // 刷新轮播布局
255}
256
257// 初始化执行一次
258setSwiperView();
259// 窗口缩放实时执行
260$(window).resize(function(){
261    setSwiperView();
262});