gpt4 book ai didi

javascript - 更改具有不同宽度的元素目标

转载 作者:太空宇宙 更新时间:2023-11-03 18:15:16 24 4
gpt4 key购买 nike

我有一个带有元素列表的旋转木马(Sorgalla 的旋转木马)。我希望,如果窗口的宽度小于 1024px,则它针对滚动上的 3 个元素,如果宽度小于 640px,则针对 2 个元素,如果宽度小于 320px,则针对 1 个元素。

我尝试使用此代码但没有成功(每次调整大小都需要有一个重新加载功能,以便 carrrousel 使用新的滚动选项重新加载):

HTML代码是:

<div class="box1"><a href="#addimg" class="plus2"></a><div id="addimg" style="width: 17.4%;height: 25px;"  class="white-popup mfp-hide">
<input type="button" id="baddimg" style="float: left;" value="Añadir imágenes" onClick="addInput('dynamicInput');" />
<div id="loading"></div>
</div><a href="#" class="jcarouselimgs-control-next arrowimg-next"></a><a href="#" class="jcarouselimgs-control-prev arrowimg-prev"></a><h2 class="infotitle">OUR PORTFOLIO</h2>
<div class="jcarouselimgs" data-jcarousel="true">
<ul class="popupimg">
<li><a href="Imagenes/img1.png" class="image-link"><img src="Imagenes/img1.png" alt="Img1" title="Img1"></a></li>
<li><a href="Imagenes/img2.png" class="image-link"><img src="Imagenes/img2.png" alt="Img2" title="Img2"></a></li>
<li><a href="Imagenes/img3.png" class="image-link"><img src="Imagenes/img3.png" alt="Img3" title="Img3"></a></li>
<li><a href="Imagenes/img4.jpg" class="image-link"><img src="Imagenes/img4.jpg" alt="Img4" title="Img4"></a></li>
<li><a href="Imagenes/img5.jpg" class="image-link"><img src="Imagenes/img5.jpg" alt="Img5" title="Img5"></a></li>
<li><a href="Imagenes/img6.jpg" class="image-link"><img src="Imagenes/img6.jpg" alt="Img6" title="Img6"></a></li>

</ul>
</div>
</div>

还有 JQuery 代码,我尝试了两种方法,这个:

$(window).resize(function(){  
if ($(".sampleClass").css("float") == "none" ){

$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});

$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});

$('.arrowimg-next').jcarouselControl({
target: '+=1'
});


// your code here
}
});

$(window).resize(function(){
if ($(".sampleClass2").css("float") == "none" ){

$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});

$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});

$('.arrowimg-next').jcarouselControl({
target: '+=3'
});


// your code here
}
});

管理示例 CSS 类以设置宽度:

.sampleClass {float:left;}
@media only screen and (max-width: 350px){
.sampleClass {float:none;}

}
.sampleClass2 {float:left;}
@media only screen and (max-width: 1024px){
.sampleClass2 {float:none;}

我也尝试过这种方式,但都没有结果:

(function () {
if ($(window).width() < 300) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});

$('.arrowimg-prev').jcarouselControl({
target: '-=1'
});

$('.arrowimg-next').jcarouselControl({
target: '+=1'
});
$('h1').addClass('blue');

}

if ($(window).width() < 640) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'slow'
});
$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});

$('.arrowimg-prev').jcarouselControl({
target: '-=2'
});

$('.arrowimg-next').jcarouselControl({
target: '+=2'
});


}
if ($(window).width() > 1024) {
$('.jcarouselimgs').jcarousel('reload', {
animation: 'fast'
});

$('.jcarouselimgs').jcarousel({
// Core configuration goes here
});

$('.arrowimg-prev').jcarouselControl({
target: '-=3'
});

$('.arrowimg-next').jcarouselControl({
target: '+=3'
});


}

});

最佳答案

使用这个轮播,效果更好:http://jssor.com/demos/introduction-slider.html

关于javascript - 更改具有不同宽度的元素目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22932978/

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