我正在研究这个 slider : http://codepen.io/anon/pen/viBHe
当您打开页面时, slider 获得屏幕的 100% 宽度,这很好用,也是我想要实现的,但问题是当您调整大小并制作 屏幕变大,然后显示下一张幻灯片,如下所示:
关于如何在调整屏幕大小时保持 100% 宽度
有什么想法吗?
另外,有人知道为什么从最后一张幻灯片开始吗?
这是我正在使用的脚本:
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, height: slideHeight });
$('#slider ul li').css({ width: slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 400, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 400, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
最佳答案
只需尝试将 px 添加到@SauriolJf 发布的答案
$(window).resize(function(){
$('li').css({"width":$(window).width()+"px"});
});
Check CodePen demo
我提供了一个用我制作 slider 的方式创建的 fiddle ,定制以匹配提问者想要的输出:
Slider Fiddle
HTML
<div>Header</div>
<div class="container">
<div class="slides">Slide1</div>
<div class="slides">Slide2</div>
<div class="slides">Slide3</div>
<div class="slides">Slide4</div>
<div class="slides">Slide5</div>
</div>
<div class="buttons">
<div class="left"><span><</span></div>
<div class="right" style="text-align:right;"><span>></span></div>
</div>
CSS
html,body,.container,.slides{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.container{
overflow:hidden;
white-space:nowrap;
font-size:0px;
}
.slides{
display:inline-block;
font-size:20px;
background-color:grey;
}
.buttons{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:table;
}
.left,.right{
display:table-cell;
vertical-align:middle;
font-size:50px;
}
.left span,.right span{
padding:10px;
background-color:grey;
cursor:pointer;
}
jQuery
var scrolllft=0;
var curSlide=1;
var firstSlide=$('.slides').first().clone(),
lastSlide=$('.slides').last().clone();
$('.container').append(firstSlide);
$('.container').prepend(lastSlide);
var par=$('.container'),
cld=$('.slides');
par.scrollLeft(par.width());
$('.buttons').css('top',par.offset().top+"px");
$('.buttons').on('click','div span',function(){
if($(this).html() == "<"){
if(!par.is(':animated')){
var pr=par.get(0);
curSlide>0?curSlide--:curSlide=cld.length-3;
if(curSlide==cld.length-3) par.scrollLeft(pr.scrollWidth-(pr.clientWidth*2));
par.stop().animate({scrollLeft: par.scrollLeft()-par.width()+"px"}, 750,function(){
scrolllft = par.scrollLeft()-par.width();
});
}
}
else{
if(!par.is(':animated')){
curSlide<(cld.length-1)?curSlide++:curSlide=2;
if(curSlide==2) par.scrollLeft(par.width());
par.stop().animate({scrollLeft: par.scrollLeft()+par.width()+"px"}, 750,function(){
scrolllft = par.scrollLeft()+par.width();
});
}
}
});
$(window).resize(function(){
par.scrollLeft(par.scrollLeft()+$('.'+cld.attr('class')+':nth-child('+(curSlide+1)+')').position().left-par.position().left);
});
关于javascript - 调整大小时 slider 全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23086477/