zoukankan      html  css  js  c++  java
  • 动态将元素重新分组

    在制作网站的过程中,经常碰到这样的滚动列表效果--》将列表的所有元素分组,然后进行滚动,比如下图中的效果:

    将列表中的元素每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
    	});
    

      

  • 相关阅读:
    Linux中Shell的算数运算符和位运算符用法笔记
    Linux中Shell的算数运算符和位运算符用法笔记
    Linux中Shell的命令替换用法笔记
    Linux中Shell的命令替换用法笔记
    Linux中shell变量作用域笔记
    Linux中shell变量作用域笔记
    模块进阶、标准库、扩展库
    模块的导入
    私有化
    python作用域与LEGB规则
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6676651.html
Copyright © 2011-2022 走看看