我想通过使用鼠标拖动来创建图像 slider ,而不使用额外的插件。 jQuery 中是否有任何数学公式可以在以下函数的帮助下使用它?
$(".cont").on("mousestart",function() {
$(".cont").on("mouseend",function() {
});
});
我不需要外部插件
最佳答案
这是在点击事件上更改图像的示例。如果需要,您还可以绑定(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>
关于javascript - 我想通过使用鼠标拖动来创建图像 slider 而不使用额外的插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36257046/