Showing
2 changed files
with
35 additions
and
20 deletions
| @@ -111,26 +111,40 @@ class GuangNew extends Page { | @@ -111,26 +111,40 @@ class GuangNew extends Page { | ||
| 111 | // 频道swiper | 111 | // 频道swiper |
| 112 | swiperTab() { | 112 | swiperTab() { |
| 113 | if ($('.swiper-tab').length > 0) { | 113 | if ($('.swiper-tab').length > 0) { |
| 114 | - new Swiper('.swiper-tab .swiper-container', { | ||
| 115 | - effect: 'coverflow', | ||
| 116 | - loop: true, | ||
| 117 | - grabCursor: true, | ||
| 118 | - slidesPerView: 'auto', | ||
| 119 | - followFinger: false, | ||
| 120 | - centeredSlides: true, | ||
| 121 | - speed: 200, | ||
| 122 | - coverflow: { | ||
| 123 | - rotate: 0, | ||
| 124 | - stretch: 0, | ||
| 125 | - depth: 0, | ||
| 126 | - modifier: 1, | ||
| 127 | - slideShadows: false | ||
| 128 | - }, | ||
| 129 | - touchRatio: 0.01, | ||
| 130 | - onInit: function(swiper) { | ||
| 131 | - swiper.update({ | ||
| 132 | - updateTranslate: true | ||
| 133 | - }); | 114 | + let startX = 0; |
| 115 | + let moveEndX = 0; | ||
| 116 | + let X = 0; | ||
| 117 | + let $active = ''; | ||
| 118 | + let $swiperTab = $('.swiper-tab'); | ||
| 119 | + let $first = ''; | ||
| 120 | + let $last = ''; | ||
| 121 | + let perWidth = $(window).width() / 750 * 104; | ||
| 122 | + | ||
| 123 | + $swiperTab.find('.swiper-slide:eq(2)').addClass('swiper-slide-active'); | ||
| 124 | + $swiperTab.on('touchstart', (e) => { | ||
| 125 | + startX = e.originalEvent.changedTouches[0].pageX; | ||
| 126 | + }); | ||
| 127 | + $swiperTab.on('touchend', (e) => { | ||
| 128 | + moveEndX = e.originalEvent.changedTouches[0].pageX; | ||
| 129 | + X = moveEndX - startX; | ||
| 130 | + $active = $swiperTab.find('.swiper-slide-active'); | ||
| 131 | + $first = $swiperTab.find('.swiper-slide:first').clone(); | ||
| 132 | + $last = $swiperTab.find('.swiper-slide:last').clone(); | ||
| 133 | + if (X < 0) { // 向左滑动 | ||
| 134 | + $swiperTab.css('margin-left', `-${perWidth}px`); | ||
| 135 | + $active.next('div').addClass('swiper-slide-active').siblings('div') | ||
| 136 | + .removeClass('swiper-slide-active'); | ||
| 137 | + $swiperTab.find('.swiper-wrapper').append($first); | ||
| 138 | + $swiperTab.find('.swiper-slide:first').remove(); | ||
| 139 | + $swiperTab.css('margin-left', 0); | ||
| 140 | + } | ||
| 141 | + if (X > 0) { // 向右滑动 | ||
| 142 | + $swiperTab.css('margin-right', `-${perWidth}px`); | ||
| 143 | + $active.prev('div').addClass('swiper-slide-active').siblings('div') | ||
| 144 | + .removeClass('swiper-slide-active'); | ||
| 145 | + $swiperTab.find('.swiper-wrapper').prepend($last); | ||
| 146 | + $swiperTab.find('.swiper-slide:last').remove(); | ||
| 147 | + $swiperTab.css('margin-right', 0); | ||
| 134 | } | 148 | } |
| 135 | }); | 149 | }); |
| 136 | } | 150 | } |
-
Please register or login to post a comment