jQuery可滚动动态
我正在做一个网站,我需要根据分辨率动态更改一张幻灯片中的项目数量。我正在使用Jquery工具滚动 为了更好地理解,这里是基本的标记jQuery可滚动动态,jquery,jquery-plugins,Jquery,Jquery Plugins,我正在做一个网站,我需要根据分辨率动态更改一张幻灯片中的项目数量。我正在使用Jquery工具滚动 为了更好地理解,这里是基本的标记 <div class="scrollable"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div> <img src="http://fa
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
好的,现在我想设置,如果我的分辨率低于1440,我将只显示例如3个图像
<div class="scrollable">
<!-- root element for the items --> <div class="items">
<!-- 1-3 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
</div>
<!-- 3-6 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
</div>
..etc
</div>
</div>
等
我知道我应该使用screen.width();函数,但如何根据分辨率对其进行切片和解析
谢谢你的评论 您可以在此处使用JQuery的选择器:
$(function(){
if (screen.width() < 1440)
{
$('div.scrollable img:gt(2)').hide(); // hide other images and show only three
}
// you can setup similar if conditions for other cases.
});
$(函数(){
如果(屏幕宽度()<1440)
{
$('div.scrollable img:gt(2)').hide();//隐藏其他图像并仅显示三个
}
//您可以为其他情况设置类似的if条件。
});
如果这是您唯一的规则,那么您需要设置:
$(document).ready(function() {
if (screen.width < 1440){
var i = $("img").clone();
$('.items div').remove();
for (var a = 0; a <= i.length/3; a++){
var d = $('<div></div>');
d.append(i.slice(a * 3 - 3, a * 3));
$('.items').append(d);
}
}
});
$(文档).就绪(函数(){
如果(屏幕宽度<1440){
变量i=$(“img”).clone();
$('.items div').remove();
对于(var a=0;a