javascript - 我想通过使用鼠标拖动来创建图像 slider 而不使用额外的插件

Question

我想通过使用鼠标拖动来创建图像 slider ，而不使用额外的插件。 jQuery 中是否有任何数学公式可以在以下函数的帮助下使用它？

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

我不需要外部插件

Answer 1

这是在点击事件上更改图像的示例。如果需要，您还可以绑定(bind)任何其他事件。

$(function () {
    var transition_speed = 300;
    var simple_slideshow = $("#exampleSlider"),
        listItems = simple_slideshow.children('li'),
        listLen = listItems.length,i = 0;
    changeList = function () {
  		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>