在制作网站的过程中,经常碰到这样的滚动列表效果--》将列表的所有元素分组,然后进行滚动,比如下图中的效果:
将列表中的元素每5个分为一组(放在一个li里面),然后进行滚动。
在制作动态网站的过程中,无法确定一共有多少个元素,所以不知道改分多少组,在下面的案例中就是不知道该创建多少的li元素来包裹他们,所以需要用js动态的分组。
代码如下:
html:
<div class="sjal_list"> <ul class="ul"> <!-- 600*476 --> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div><div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> <div class="item"> <img src="images/sjal_bimg1.jpg" alt=""> <a href=""><div class="shadow"> <p class="p title">Dara Hotel</p> <span class="more"></span> </div></a> </div> </ul> </div>
js:
var linum=0;var i=0;var j=0; linum=Math.ceil($('.sjal_list .item').length/5); //判断该创建几个li,数字5代表每组里放几个元素 for(i=0;i<linum;i++){ $('.sjal_list>ul').append('<li class="libox libox'+(i+1)+'"></li>'); //循环创建li,并插入到ul中 }; $('.sjal_list .item').each(function(i){ j=Math.ceil((i+1)/5); //判断当前元素应该在哪个分组种 $(this).appendTo('.libox'+j); //该案例中的效果,每组的第一个要把尺寸放大 //.sjal_list img{ 300px;height: 238px;} //.sjal_list .bimg img{ 600px;height: 476px;} if(i%5==0){ $(this).addClass('bimg'); } }); // 用owlCarousel执行滚动效果 $('.sjal_list>ul').owlCarousel({ 'items':1, 'pagination':true, 'stopOnHover':true, 'autoPlay':true });