余分なプラグインを使用せずにマウスドラッグを使用して画像スライダーを作成したい

Question

余分なプラグインを使用せずにマウスドラッグを使用して画像スライダーを作成したいと思います。次の関数の助けを借りてこれを得るためにjQueryで使用される数式がありますか？私はここに外部プラグインに

Answer 1

をしたくない

$(".cont").on("mousestart",function() { 
    $(".cont").on("mouseend",function() { 
    }); 
}); 

は、クリックイベントに画像を変更する例です。必要に応じて他のイベントをバインドすることもできます。

$(function() { 
 
    var transition_speed = 300; 
 
    var simple_slideshow = $("#exampleSlider"), 
 
     listItems = simple_slideshow.children('li'), 
 
     listLen = listItems.length,i = 0; 
 
    changeList = function() { 
 
    \t \t listItems.eq(i) 
 
     .fadeOut(transition_speed,function() { 
 
     i += 1; 
 
     if (i === listLen) { 
 
      i = 0; 
 
     } 
 
     listItems.eq(i).fadeIn(transition_speed); 
 
     }); 
 
    }; 
 
    listItems.not(':first').hide(); 
 
    $('#exampleSlider').on('click', function() { 
 
     changeList(); // Do this once immediately 
 
    }) 
 
});

img { 
 
    width: 100%: 
 
} 
 
#exampleSlider { 
 
    max-height: 250px; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    width:500px; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="exampleSlider"> 
 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
 
    <li><img src="http://placehold.it/500x260" alt="" /></li> 
 
    <li><img src="http://placehold.it/500x270" alt="" /></li> 
 
    <li><img src="http://placehold.it/500x280" alt="" /></li> 
 
</ul>