设计图如下：

需要做图片无间断滚动切换效果。

找了半天焦点图js代码，图片相册代码也没找到个合适的。

后来跟老板沟通，他说参考这个网站的页面：http://www.iraytek.com/abouts/

做成这个样子的就行。

查看了代码，是用了swiper这个插件。

查了一下相关资料

swiper中文官方网站：https://www.swiper.com.cn/   https://2.swiper.com.cn/ 可以从这里下载源文件包，查看演示效果，还有使用方法。

---

下面是拿了iraytek这个站的代码直接用。没问题的哦

1、页面引入swiper.min.css和swiper.min.js文件。

2、对应html代码：

<div class="swiper-container">

            <div class="swiper-wrapper">

            <div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005736506867.jpg" alt=" T3S FCC认证">

                <p>T3S FCC认证</p>

              </div>
<div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005339045124.jpg" alt="T2S/T3S/T3Pro/T6S CE认证">

                <p>T2S/T3S/T3Pro/T6S CE认证</p>

              </div>
<div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005527480998.jpg" alt="E2M RoHS证书">

                <p>E2M RoHS证书</p>

              </div>
<div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005062469513.jpg" alt="FT384 RoHS证书">

                <p>FT384 RoHS证书</p>

              </div>
<div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005293441194.jpg" alt="SL35 RoHS证书">

                <p>SL35 RoHS证书</p>

              </div>

<div class="swiper-slide roll-img">                

                <img src="http://www.ulirvision.com/cn/upfiles/202005590752913.jpg" alt="高新技术企业">

                <p>高新技术企业</p>

              </div>


            </div>        

        </div>

<!-- 左右切换按钮 -->
<div class="button">
    
         <div class="swiper-button-prev">&lt;</div>
         <div class="swiper-button-next">&gt;</div>
    
 </div>

3、页面的script代码

<script>

    window.onload = function() {

    var swiper = new Swiper('.swiper-container',{

    autoplay:3000,
    speed:1000,
    autoplayDisableOnInteraction : false,
    loop:true,
    centeredSlides : true,
    slidesPerView:3,
        pagination : '.swiper-pagination',
    paginationClickable:true,
    prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',

    onInit:function(swiper){

        swiper.slides[3].className="swiper-slide  roll-img swiper-slide-active";//第一次打开不要动画

        },

    breakpoints: { 

            668: {

                slidesPerView: 1,

             }

        }

    });

    }

</script>

4、还有对应的css样式。这里就不写了。

 

这些代码放上去，效果是妥妥的了。

其实，swiper的用法很多，可以做很多的效果。还有它的参数，控制、修改也挺方便。有空再去看演示看文档吧，今天就写到这里了哈哈。

---

---

2020.6.11添加更新

关于swiper滚动方向问题。

早之前的版本是用mode参数控制方向的。

<script> 
var mySwiper = new Swiper('.swiper-container',{
mode : 'vertical',//默认是horizontal水平方向
})
</script>

更新一点的版本，改为direction: ‘vertical’了，我还傻傻排查了半天~

特记。