swiper走马灯效果加自动轮播鼠标放上去暂停当前动作移除立即恢复

灵魂歌手小慢

已于 2023-12-28 13:52:59 修改

阅读量1.1k

点赞数 7

文章标签：前端 javascript html

于 2023-12-28 13:51:13 首次发布

本文链接：https://blog.csdn.net/weixin_51406702/article/details/135267511

版权

<div class="scroll-target">
    <div class="targr">
        <div class="swiper-container onebottm">
            <div class="swiper-wrapper">
                <div class="swiper-slide>
                    <div class="img"><img src="images/zanwei.jpg" alt=""></div>
                </div>
                <div class="swiper-slide>
                    <div class="img"><img src="images/zanwei.jpg" alt=""></div>
                </div>
                <div class="swiper-slide>
                    <div class="img"><img src="images/zanwei.jpg" alt=""></div>
                </div>
                <div class="swiper-slide>
                    <div class="img"><img src="images/zanwei.jpg" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
        var jointVentureSwiper = new Swiper(".onebottm", {
            slidesPerView: 1.2,
            spaceBetween: 20,
            loop: true,
            breakpoints: {
                1480: {
                    slidesPerView: 2.12,
                    spaceBetween: 20,
                },
            },
            speed: 4000,
            autoplay: {
                delay: 0, //自动切换的时间间隔
                disableOnInteraction: false,
                pauseOnMouseEnter: true, //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
                stopOnLastSlide: false,
                pauseOnMouseEnter:true,
                disableOnInteraction:false,
                disableOnInteraction: false
            },
            loopFillGroupWithBlank: true,
            normalizeSlideIndex:true,
            freeMode: true,
        });

         var jSpeed = 4000;
        var nextTransForm = '';
        var nextSpeed = 0;
        $('.onebottm').on('mouseenter', function () {
          nextTransForm = 'transform:' + $('.onebottm').find('.swiper-wrapper').eq(0).attr('style').split('transform:')[1].split(';')[0];
          var nextS = -1 * parseInt(nextTransForm.split('translate3d(')[1].split('px')[0]);
          var nowS = -1 * parseInt($('.onebottm').find('.swiper-wrapper').eq(0).css('transform').split('1, ')[2].split(',')[0]);
          nextSpeed = jSpeed * ((nextS - nowS) / $('.onebottm').find('.swiper-slide').eq(0).width());
          $('.onebottm').find('.swiper-wrapper').eq(0).attr('style', `${$('.onebottm').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}transform: ${$('.onebottm').find('.swiper-wrapper').eq(0).css('transform')};transition-duration:0ms;`);
        });

        $('.onebottm').on('mouseleave', function () {
          $('.onebottm').find('.swiper-wrapper').eq(0).attr('style', `${$('.onebottm').find('.swiper-wrapper').eq(0).attr('style').split('transform: ')[0]}${nextTransForm};transition-duration:${nextSpeed}ms;`);
          jointVentureSwiper.startAutoplay();
        }); 

        $(".scroll-target .targr").hover(function(){
            $(".targr").toggleClass("cie");
        });

</script>