Ich möchte Bild-Schieberegler mit der Maus ziehen, ohne zusätzliche Plugins zu verwenden

Question

Ich möchte Bild-Slider mit der Maus ziehen, ohne zusätzliche Plugins zu verwenden. Gibt es irgendeine mathematische Formel, die in jQuery verwendet werden kann, um dies mit Hilfe der folgenden Funktionen zu erreichen?

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

Ich will nicht externen Plugins

Answer 1

hier ist das Beispiel der Bildänderungs auf Click-Ereignisse. Sie können auch jedes andere Ereignis binden, falls erforderlich.

$(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>