导航双屏遍历列子

宿海仁太

今天写的一个, 感觉还行,有一定的学习价值,分享下:js生成一段滚动屏的内容
类似美团网的导航
<div data-am-widget="slider" class="am-slider am-slider-a1 header-top-nav" data-am-slider='{&quot;directionNav&quot;:false}'>
  <ul class="am-slides" id="navigation">
<!--这里是要显示的内容-->
</ul>
</div>


js:


<script>
$(function(){
    //获取首页信息
    $.ajax({
        url:""        //请求数据
        data:{},
        type:'post',
        dataType:'jsonp',   //跨域请求
        jsonp: 'callback',
        jsonpCallback:"success_mallsCallback",
        success:function(ret){
            if(ret.status==1){
                 var navdata=ret.data.NavInfo;
                 navigation(navdata);
            }
        }
    });
    //导航
    function navigation(data){
        var navinfo="";
        var navdata=data.length;
        var pagesize=Math.ceil(navdata / 8);
        var page=0;
        for( var i = 0; i < pagesize ; i++){
           navinfo+='<li><nav class="siteshop-nav">'
           navinfo+='<section><div class="am-g navigation-site">';
         if(i!=pagesize-1){
            for(var k=0;k < navdata%8;k++){
                page++
                navinfo+='<a href="#"><div class="am-u-sm-3 navigation-item">';
                navinfo+='<div class="icon-round FD7C42"><img src="<?php echo Yii::app()->request->baseUrl; ?>/assets/v1/i/goods/ico1.png">';
                navinfo+='</div><div class="icon-title">'+page+'</div>';
                navinfo+='</div></a>';
           }
         }else{
            for(var k=0;k < 8;k++){
            page++
                navinfo+='<a href="#"><div class="am-u-sm-3 navigation-item">';
                navinfo+='<div class="icon-round FD7C42"><img src="<?php echo Yii::app()->request->baseUrl; ?>/assets/v1/i/goods/ico1.png">';
                navinfo+='</div><div class="icon-title">'+page+'</div>';
                navinfo+='</div></a>';
            }
         }
            navinfo+='</div></section></nav></li>'
         }
           $("#navigation").html(navinfo);
        $('.am-slider').flexslider();
    }
});






</script>

a8461959

学习了.....