Js 实现轮播

Js实现轮播使用Swiper。

Swiper是纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端；开源、免费、能实现触屏焦点图、触屏Tab切换等。

需要加载的Js、Css：

<link rel="stylesheet" href="dist/css/swiper.min.css" type="text/css"></link>
<script type="text/javascript" src="dist/js/swiper.min.js"></script>

HTML：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

Js（初始化Swiper）：

var mySwiper = new Swiper ('.swiper-container', {
	autoplay: {
				stopOnLastSlide: true
			},//自动播放
	direction: 'horizontal', // 垂直切换选项
	loop: true, // 循环模式选项
	
	// 如果需要分页器
	pagination: {
	  el: '.swiper-pagination',
	  clickable: true,
	},
	
	// 如果需要前进后退按钮
	navigation: {
	  nextEl: '.swiper-button-next',
	  prevEl: '.swiper-button-prev',
	  hideOnClick: true,
	},
	
	// 如果需要滚动条
	scrollbar: {
	  el: '.swiper-scrollbar',
	},
})

详细内容参考官网：https://www.swiper.com.cn/