Javascript 如何在最后一张幻灯片后停止动画?
我已经为图像滑块创建了自定义插件。它类似于要显示的图像数量的pass参数。 当最后一个图像可见时,如何停止动画?有时,上一次单击也会出现问题。帮助我优化代码 CSSJavascript 如何在最后一张幻灯片后停止动画?,javascript,jquery,Javascript,Jquery,我已经为图像滑块创建了自定义插件。它类似于要显示的图像数量的pass参数。 当最后一个图像可见时,如何停止动画?有时,上一次单击也会出现问题。帮助我优化代码 CSS .imgpresentation { width: 520px; height: 110px; overflow: hidden; border: 1px solid #ddd; position: relative; } .imgpresentation img { float: left; padding: 5px; } .
.imgpresentation {
width: 520px;
height: 110px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
.imgpresentation img {
float: left;
padding: 5px;
}
.imgpresentation .prev {
left: 0;
position: absolute;
top: 40%;
}
.imgpresentation .next {
right: 0;
position: absolute;
top: 40%;
}
.slidethemimgpresentation {
position: absolute;
}
<script>
$.fn.imgSlider = function(nImages) {
var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation');
that.append('<a href="#" class="prev">Previous</a>'+
' <a href="#" class="next">Next</a>').css({
'width': nImages * imgW,
'height': imgH
});
container.css({
'width': imgW * imgL
});
imgW = nImages * imgW;
that.find('.next').on('click', function() {
var currLeft = parseInt(container.css('left'));
currLeft += -imgW;
container.animate({
'left': currLeft
});
return false;
});
that.find('.prev').on('click', function() {
var currLeft = parseInt(container.css('left'));
if (currLeft == 0) {
return false;
}
currLeft += imgW;
container.animate({
'left': currLeft
});
return false;
});
};
$(document).ready(function() {
$('#imgpresentation').imgSlider(2);
$('#imgpresentation2').imgSlider(3);
$('#imgpresentation3').imgSlider(4);
$('#imgpresentation4').imgSlider(1);
});
</script>
JS
.imgpresentation {
width: 520px;
height: 110px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
.imgpresentation img {
float: left;
padding: 5px;
}
.imgpresentation .prev {
left: 0;
position: absolute;
top: 40%;
}
.imgpresentation .next {
right: 0;
position: absolute;
top: 40%;
}
.slidethemimgpresentation {
position: absolute;
}
<script>
$.fn.imgSlider = function(nImages) {
var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation');
that.append('<a href="#" class="prev">Previous</a>'+
' <a href="#" class="next">Next</a>').css({
'width': nImages * imgW,
'height': imgH
});
container.css({
'width': imgW * imgL
});
imgW = nImages * imgW;
that.find('.next').on('click', function() {
var currLeft = parseInt(container.css('left'));
currLeft += -imgW;
container.animate({
'left': currLeft
});
return false;
});
that.find('.prev').on('click', function() {
var currLeft = parseInt(container.css('left'));
if (currLeft == 0) {
return false;
}
currLeft += imgW;
container.animate({
'left': currLeft
});
return false;
});
};
$(document).ready(function() {
$('#imgpresentation').imgSlider(2);
$('#imgpresentation2').imgSlider(3);
$('#imgpresentation3').imgSlider(4);
$('#imgpresentation4').imgSlider(1);
});
</script>
$.fn.imgSlider=函数(nImages){
var imgW=$(this).find('img').outerWidth(),
imgH=$(this).find('img').outerHeight(),
imgL=$(this).find('img').length,
那=$(这个),
container=that.find('.slidethemimgpresentation');
那。附加(“”)+
'').css({
“宽度”:nImages*imgW,
“高度”:imgH
});
container.css({
“宽度”:imgW*imgL
});
imgW=nImages*imgW;
在('click',function()上{
var currlefit=parseInt(container.css('left'));
电流左+=-imgW;
容器动画({
“左”:左
});
返回false;
});
.find('.prev')。on('click',function(){
var currlefit=parseInt(container.css('left'));
如果(currLeft==0){
返回false;
}
currLeft+=imgW;
容器动画({
“左”:左
});
返回false;
});
};
$(文档).ready(函数(){
$('imgpresentation')。imgSlider(2);
$('imgpresentation2')。imgSlider(3);
$('imgpresentation3')。imgSlider(4);
$('imgpresentation4')。imgSlider(1);
});
html`
<div id="imgpresentation4" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide301" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide302" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide303" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide304" />
<img class="presentatinthis" src="http://placehold.it/150x150&text=Slide305" />
</div>
</div>
<div id="imgpresentation" class="imgpresentation">
<div id="slidethemimgpresentation" class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide101" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide102" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide103" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide104" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide105" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide106" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide107" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide108" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide109" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide110" />
</div>
</div>
<div id="imgpresentation2" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide201" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide202" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide203" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide204" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide205" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide206" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide207" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide208" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide209" />
<img class="presentatinthis" src="http://placehold.it/250x100&text=Slide210" />
</div>
</div>
<div id="imgpresentation3" class="imgpresentation">
<div class="slidethemimgpresentation">
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide301" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide302" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide303" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide304" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide305" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide306" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide307" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide308" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide309" />
<img class="presentatinthis" src="http://placehold.it/350x150&text=Slide310" />
</div>
</div>
这是一种有点棘手的方法。因为它不是由数组驱动的,而是每次移动容器+=X 您需要检查
if(container.style.left+imgW>totalWidth)
要调试,请尝试使用console.log(container.style.left)
我建议使用一个现有的滑块iDangerio.us Swiper,它有一个非常好的API
另一方面,这有点低效,并不是说它太重要,因为它只在init上运行
var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation')
只解析jquery对象一次将是更好的实践和更高效的方法
var that = $(this),
img = that.find('img'),
imgW = img.outerWidth(),
imgH = img.outerHeight(),
imgL = img.length,
container = that.find('.slidethemimgpresentation'),
totalWidth = imgW * imgL;
请创建小提琴或编辑此小提琴: