<script> | |
| -------- | -------------------------------------------------------------------------------------- |
| | init(); |
| | /* fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。 */ |
| | let arr = ['fade','cube','coverflow','flip','cards','creative'] |
| | let type = '' |
| | function fn() { |
| | |
| | let num = Math.floor(Math.random() * (5-0+1) ) + 0 ; |
| | type = arr[num]; |
| | console.log(num,type) |
| | $('.main').html(` |
| | <div class="swiper"> |
| | <div class="swiper-wrapper"> |
| | </div> |
| | <div class="swiper-pagination"></div> |
| | <div class="swiper-button-prev"></div> |
| | <div class="swiper-button-next"></div> |
| | </div> |
| | `) |
| | init(); |
| | } |
| | |
| | /* Swiper('对应的类名') */ |
| | function init() { |
| | $.ajax({ |
| | url: "https://api.apiopen.top/getWangYiNews", |
| | method: "post", |
| | data: { |
| | page: 1, |
| | count: 5 |
| | }, |
| | success: function (res) { |
| | let { result } = res; |
| | let str = ''; |
| | result.forEach(r => { |
| | str += ` |
| | <div class="swiper-slide"> |
| | <img src="${r.image}" alt=""> |
| | </div> |
| | ` |
| | }) |
| | $('.swiper-wrapper').html(str) |
| | new Swiper('.swiper', { |
| | // direction: 'vertical', // 垂直切换选项 |
| | loop: true, // 循环模式选项 |
| | effect: type, |
| | |
| | // 如果需要分页器 |
| | pagination: { |
| | el: '.swiper-pagination', |
| | }, |
| | // 如果需要前进后退按钮 |
| | navigation: { |
| | nextEl: '.swiper-button-next', |
| | prevEl: '.swiper-button-prev', |
| | }, |
| | }) |
| | } |
| | }) |
| | |
| | } |
| | |
| | </script>
