gpt4 book ai didi

javascript - 调整大小时 slider 全宽

转载 作者:行者123 更新时间:2023-11-28 17:46:40 28 4
gpt4 key购买 nike

我正在研究这个 slider : http://codepen.io/anon/pen/viBHe

当您打开页面时, slider 获得屏幕的 100% 宽度,这很好用,也是我想要实现的,但问题是当您调整大小并制作 屏幕变大,然后显示下一张幻灯片,如下所示:

enter image description here

关于如何在调整屏幕大小时保持 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>&lt;</span></div>
<div class="right" style="text-align:right;"><span>&gt;</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() == "&lt;"){
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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com