我正在尝试创建一个流畅的JQuery滑块,而不使用任何类型的滑块插件和媒体查询(只是CSS和jquery)。大多数解决方案涉及滑块插件和媒体查询。出于教育目的,我试图不这样做。
我正在使用边距动画来移动幻灯片(我不知道这是否是实现响应能力的最佳方法)。不幸的是,这是没有响应的,因为幻灯片宽度在 css 中是固定的。
请参阅下面的代码以获取可能的修复。 对于图片,我刚刚在油漆上创建了一个 650px x 350px 的矩形作为占位符。
<!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>
为什么要使用静态宽度。您可以始终使用百分比和 css 中的"height:auto"来使其响应!!