如何解决在不使用CSS的情况下调整调整大小的滑块特别是window.resize
我试图仅通过resize事件使此滑块具有响应性,而不在CSS中使用任何度量。我对javascript和编码一般还是很陌生,因此在寻找解决方案数小时后,我找不到任何使它起作用的东西。
这是我的jquery代码:
$(document).ready(function () {
var currentSlide = 1;
var $slider = $('.slider');
var $slides = $(".slides");
var animationTime = 800;
var last = $slides.find('li').last();
var first = $slides.find('li').first();
var slideCount = $slides.children().length;
var win = $(window);
last.clone().prependTo($slides);
first.clone().appendTo($slides);
var width = $slider.width();
$slides.css('marginLeft',-currentSlide * 1344 + 'px').css('width',width * (slideCount + 2));
$('<button type="button" class="left nav"><span><img src="images/left.png" alt="left"></span></button>').prependTo('.slider');
$('<button type="button" class="right nav"><span><img src="images/right.png" alt="right"></span></button>').appendTo('.slider');
$('.nav').click(function (e) {
if (!$('.slides').is(':animated')) {
e.preventDefault();
var marginLeft,initialMarginLeft,resetMargin,resetCurrentSlide;
if ($(this).hasClass('right')) {
currentSlide++;
marginLeft = '-=' + width + 'px';
initialMarginLeft = '-' + width + 'px';
resetMargin = currentSlide > slideCount;
resetCurrentSlide = 1;
$(this).css("margin-left","-1344px");
} else {
currentSlide--;
marginLeft = '+=' + width + 'px';
initialMarginLeft = '-' + width * slideCount + 'px';
resetMargin = currentSlide === 0;
resetCurrentSlide = slideCount;
}
}
function startSlider() {
$slides.animate({
marginLeft: marginLeft
},animationTime,function () {
if (resetMargin) {
currentSlide = resetCurrentSlide;
$(this).css("margin-left",initialMarginLeft);
}
});
}
startSlider();
});
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。