我想通過使用鼠標拖動來創建圖像滑塊而不使用額外的插件

Question

我想通過使用鼠標拖動來創建圖像滑塊，而不使用額外的插件。是否有任何數學公式可用於jQuery以獲得此功能的幫助下列功能？

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

我不希望外部插件

Answer 1

這裏是click事件改變圖像的例子。如果需要，您還可以綁定任何其他事件。

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