切换图片 JQuery鼠标事件 swiper轮播 mousedown事件

切换图片 JQuery鼠标事件

小米官网切换图片效果
轮播效果使用的swiper插件(https://www.swiper.com.cn/ )

图片素材源于小米官网

1. javascript代码

//轮播
var swiper4 = new Swiper('.swiper-container4', {
   
        loop:true,
        autoplay:true,
        slidesPerView: 1,
        pagination: {
   
            el: '.swiper-pagination4',
            clickable: true,
        },
        centeredSlides: false,
        touchRatio:0,
        allowTouchMove: false,//禁止拖动  不加这个的话 使用mousedown获取不到左键
    });
// 切换图片 section_UI
    section_UI();
    function section_UI(){
   
        //鼠标移入目标区域  触发下面的事件
        $(".swiper-slide").mouseover(function () {
   
            // 获取当前元素区域下的 按钮 图片元素  避免影响其他区域的相同元素
            var $btn=$(this).children(".fix_btn");
            var $img=$(this).children(".fix_img");
            //鼠标按下  获取left值 获取当前操作按钮的父级
            $btn.mousedown(function (e) {
   
                var positionDiv = $(this).position();//获取
                var distenceX = e.pageX - positionDiv.left;
                var $slide = $(this).parent(".swiper-slide")</