MissAsia项目官网总结

樱花味的小奶牛

于 2019-03-21 10:01:54 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/WSSQYHW/article/details/88707682

MissAsia官网项目遇到动态页面问题，赞助商一栏不知具体个数却需无限循环滚动。运用swiper，通过多个swiper的jQuery插件实现多个图片在同窗口无限滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MissAsia官网项目中遇到了诸多问题：
问题一动态页面在赞助商一栏中不知其具体个数，却需要无线循环的滚动！
解决代码运用了swiper！！

							<script>
							    var appendNumber = 6;
							    var prependNumber = 1;
							    var swiper = new Swiper('#666', {
							      autoplay: {
							      delay: 2000,
							      stopOnLastSlide: false,
							      disableOnInteraction: true,
							      },
							      loop: true,
							      slidesPerView: 6,
							      centeredSlides: true,
							      spaceBetween: 30,
							    });
							    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
							      e.preventDefault();
							      swiper.prependSlide([
							        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
							        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
							        ]);
							    });
							    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
							      e.preventDefault();
							      swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
							    });
							    document.querySelector('.append-slide').addEventListener('click', function (e) {
							      e.preventDefault();
							      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
							    });
							    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
							      e.preventDefault();
							      swiper.appendSlide([
							        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
							        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
							        ]);
							    });
							  </script>

通过多个swiper的jQuery插件实现多个图片同窗口无线滚动！！如图：

在这里插入图片描述