Javascript 屏幕调整时带边距动画中断的图像滑块（未使用滑块插件）
我正在尝试创建一个流体JQuery滑块，而不使用任何类型的滑块插件和媒体查询（仅CSS和JQuery）。大多数解决方案涉及滑块插件和媒体查询。出于教育的目的，我正努力做到没有 我使用边距动画来移动幻灯片（我不知道这是否是实现响应的最佳方法）。 不幸的是，这不是响应，因为幻灯片宽度在css中是固定的 请参阅下面的代码以了解可能的修复方法。对于这些图片，我刚刚在paint上创建了一个650px x 350px的矩形作为占位符Javascript 屏幕调整时带边距动画中断的图像滑块（未使用滑块插件）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个流体JQuery滑块，而不使用任何类型的滑块插件和媒体查询（仅CSS和JQuery）。大多数解决方案涉及滑块插件和媒体查询。出于教育的目的，我正努力做到没有 我使用边距动画来移动幻灯片（我不知道这是否是实现响应的最佳方法）。 不幸的是，这不是响应，因为幻灯片宽度在css中是固定的 请参阅下面的代码以了解可能的修复方法。对于这些图片，我刚刚在paint上创建了一个650px x 350px的矩形作为占位符 <!DOCTYPE html> <html>
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
*{
margin: 0;padding: 0;
}
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.carousel{
border: 2px solid #000;
max-width: 650px;
margin: 0 auto;
overflow: hidden;
}
.carousel__canvas{
width: 3900px;
}
.carousel__item{
float: left;
list-style-type: none;
}
.carousel__item img{
width: 100%
}
</style>
</head>
<body>
<div class="carousel">
<ul class="carousel__canvas">
<li class="carousel__item"><img src="p1.png" alt="First Image"></li>
<li class="carousel__item"><img src="p2.png" alt="Second Image"></li>
<li class="carousel__item"><img src="p3.png" alt="Third Image"></li>
<li class="carousel__item"><img src="p4.png" alt="Fourth Image"></li>
<li class="carousel__item"><img src="p5.png" alt="Fifth Image"></li>
<li class="carousel__item"><img src="p1.png" alt="First Image"></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentSlide = 1;
var $carousel__item = $('.carousel__item');
var numSlides = $carousel__item.length;
var slideWidth = $carousel__item.width();
var $viewport = $('.carousel');
var $slideContainer = $viewport.find('.carousel__canvas');
var $slide = $slideContainer.find('.carousel__item');
var trasitionTime = 500;
var slideViewTime = 3500;
var interval;
slideContainerWidth = slideWidth * numSlides;
function startCarousel(){
interval = setInterval(function(){
if(numSlides>1){
$slideContainer.animate({'margin-left':'-='+slideWidth+'px'}, trasitionTime,function(){
if(++currentSlide === numSlides){
$slideContainer.animate({'margin-left':'0'},0);
currentSlide = 1;
}
});
}
},slideViewTime);
}
function stopCarousel(){
clearInterval(interval);
}
$viewport.on('mouseover',stopCarousel).on('mouseleave', startCarousel);
startCarousel();
});
</script>
</body>
</html>
滑块
*{
边距：0；填充：0；
}
html{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
*，*：之前，*：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
旋转木马{
边框：2倍实心#000；
最大宽度：650px；
保证金：0自动；
溢出：隐藏；
}
.旋转木马{
宽度：3900px；
}
.旋转木马项目{
浮动：左；
列表样式类型：无；
}
.旋转木马项目img{
宽度：100%
}
$（文档）.ready（函数（）{
var currentSlide=1；
变量$carousel_uuitem=$（'.carousel_uitem'）；
var numSlides=$carousel__item.length；
var slideWidth=$carousel__item.width（）；
变量$viewport=$（'.carousel'）；
var$slideContainer=$viewport.find（'.carousel__canvas'）；
var$slide=$slideContainer.find（'.carousel__项'）；
var trasitionTime=500；
var slideViewTime=3500；
var区间；
slideContainerWidth=滑动宽度*numSlides；
函数startCarousel（）{
间隔=设置间隔（函数（）{
如果（numSlides>1）{
$slideContainer.animate（{'margin-left'：'-='+slideWidth+'px'}，trasitionTime，function（）{
如果（++currentSlide===numSlides）{
$slideContainer.animate（{'margin-left'：'0'}，0）；
currentSlide=1；
}
});
}
}，slideViewTime）；
}
函数stopCarousel（）{
间隔时间；
}
$viewport.on（'mouseover'，stopCarousel.）。on（'mouseleave'，startCarousel）；
startCarousel（）；
});