js 可以左右滑动的导航栏以及展示对应页面

嘿嘿，刚做好的，展示给大家，我也是参考别人做的
参考网址
https://blog.csdn.net/fengtingYan/article/details/87446652
https://blog.csdn.net/Gaia_qi/article/details/79528832 主要做的这个，因为代码少
https://blog.csdn.net/qq_33563147/article/details/78789831

效果图
在这里插入图片描述

我的 html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" /> 
  <title>专利</title> 
  <script src="__PUBLIC__/community/js/sweet-alert.min.js"></script>
  

  <!-- 滑动导航栏引入的 -->
  <script src="__PUBLIC__/activity/js/jquery-1.11.3.js"></script>
  <script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.min.js"></script>

  <link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">


<style>

	/*滑动导航栏*/
	
	 .swiper-container{
	      width: 100%;
	      height: 50px;
	      /*border: 1px solid #999999;*/
	  }
	  .swiper-slide{
	      text-align: center;
	      line-height: 50px;
	      font-size: 12px;
	  }
	  .active{
	      color: #eb4610;
	  }
	





	/*下面是文章的格式*/



	.find-money-list2{
	  clear:both;
	  position:relative;
	  width:100%;
	}
	.find-money-list2 .item{
	  width:100%;
	  height:90px;
	  /*border:1px solid #e1e1e1;*/
	  background-color:#fff;
	  margin-top:10px;
	}
	.find-money-list2 .item .item-avatar{
	  height:50px;
	  /*width:24%;*/
	  float:left;
	  margin-left: 2%
	}
	.find-money-list2 .item .item-avatar img{
	  width:90px;
	  height:90px;
	  border-radius:20px;
	  /*vertical-align:middle;*/
	}
	.find-money-list2 .item .item-text{
	  width:50%;
	  height:50px;
	  float:left;
	}
	
	
	
	
	
	.find-money-list2 .item .item-text .text-name {
	
	  height:90px;
	  font-size:20px;
	  line-height:50px;
	  overflow:hidden;
	  white-space: nowrap;
	  text-overflow:ellipsis;
	  overflow: hidden;
	  color:#000;
	}
	
	.find-money-list2 .item .item-text .text-js{
	  margin-top: -60px;
	  height:60px;
	  line-height: 50px;
	  font-size:15px;
	  color:#403e3e ;
	  overflow: hidden;
	}
	
	.find-money-list2 .item .item-text .text-js2{
	  margin-top: -40px;
	  height:60px;
	  line-height: 50px;
	  font-size:15px;
	  color:#403e3e ;
	  overflow: hidden;
	}
	
	
	.find-money-list2 .item .item-oth{
	  width:17%;
	  height:60px;
	  line-height: 50px;
	  font-size:20px;
	  overflow: hidden;
	  border:1px solid #1a8cff;
	  border-radius:50px;
	  background-color:#1a8cff;
	  color:#fff;
	  text-align: center;
	  margin-top:15px;
	  margin-right:2%; 
	}
	.find-money-list2 .item .item-text .core{
	  color:#ff0000;
	}
	




</style>



 </head> 
<body>
  <header class="full-header">
    专利 
   <a href="javascript:history.back();" class="iconleft icon-arrowleft iconfont"></a> 
   <a href="{:U('User/Public/nologin')}" class="iconright icon-account iconfont"></a> 
  </header>


<section class="swiper-container">
    <div class="swiper-wrapper">
        <div data-id="1" class="swiper-slide active">全部</div>
        <div data-id="2" class="swiper-slide">电气自动</div>
        <div data-id="3" class="swiper-slide">医药医学</div>
        <div data-id="4" class="swiper-slide">机械加工</div>
        <div data-id="5" class="swiper-slide">化学化工</div>
        <div data-id="6" class="swiper-slide">电子信息</div>
        <div data-id="7" class="swiper-slide">安全防护</div>
        <div data-id="8" class="swiper-slide">新能源</div>
        <div data-id="9" class="swiper-slide">仪器仪表</div>

    </div>
</section>

	<header class="full-header">


      <div class="tab_content" id="tab_content1">
        <!-- ajax中 追加数据 到这个 div 中-->
            <div class="find-money-list2"> 
                <a href="#">
                      <div class="item">
                          <div class="item-avatar"><img src="__PUBLIC__/images/1.jpg"></div>
                          <div class="item-text">
                              <div class="text-name">张三</div>
                              <div class="text-js">州学院 | 专职教师</div>
                              <div class="text-js2">产品创新科技，产品优化仿真</div>
                          </div>
                      </div>
                  </a>
              </div>
      </div>

</header>


<!-- 滑动导航栏效果 -->

<script>
var swiper = new Swiper('.swiper-container', {
    slidesPerView: 6,
    spaceBetween: 1,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
</script>

<script type="text/javascript">

$(document).ready(function(){
    $('.swiper-container>.swiper-wrapper>.swiper-slide').click(function(){

        $(this).addClass("active").siblings().removeClass("active");

         $(".tab_content").empty();  //清空之前点击导航栏的展示数据

        // 获取自定义id，传到ajax
        var id = $(this).attr('data-id');
        alert(id);
        // console.log(id);
        // 返回数据，再反映到页面
        $.ajax({
            url: "{:U('Activity/Chengguo/ajaxpatent')}",
            data:{id:id},
            type:'POST',
            // async: false,
            dataType: "json",
            success: function(data){
                // alert(111);
                
                // var data2 = JSON.parse(data);  // JSON.parse() 把 json字符串 转化成 json 对象
                // var a = JSON.stringify(data);  //把json对象转化成字符串
                
                // 如何把 json对象转换成 数组
                // https://www.cnblogs.com/wancheng7/p/8735168.html
                var data2 = [];   // 某种意义上来说，数组也是object
                for (let i in data) {
                    let o = {};
                    o[i] = data[i];
                    data2.push(o)
                }
              
                // 去除最后两个元素
                var data3 = data2.pop();
                data2.pop();

                var item = ""; 
                // 这不行，每点击一下的时候，都要清空
                // $(".tab_content").empty(); //清空

                for(var i = 0 ; i < data2.length; i++) { 
                
                	item += "<div class='find-money-list2'><a href='#'>
                	<div class='item'><div class='item-avatar'><img src
                	='__PUBLIC__/images/"+data2[i][i].img+"'></div><div 
                	class='item-text'><div class='text-name'>"+
                	data2[i][i].pat_name+"</div><div class='text-js'>"+
                	data2[i][i].pat_cate+"</div><div class='text-js2'>"+
                	data2[i][i].pat_num+"</div></div></div></a></div>"; 
               

                  // console.log(data2[i][i]);
                  // console.log(data2[i][i].id);
                  // console.log(data2[i][i].id);

                } 
                $(".tab_content").append(item); 
                // 显示到里面 
                },
            error:function(data){ 
              alert(222); 
              console.log(data); 
            }


        });



    });
});
</script>

最后我控制器中返回ajax

 // ajax 反应数据到页面
 
public function ajaxpatent()
{
    $id = $_POST['id'];
     // var_dump($id);

    $pat_model=M('patent');
    $where['pat_industry'] = $id;
    $result = $pat_model->where($where)->select();
    // var_dump($result);
    // die;
    // 返回的时候不能打印，否则报错
    $this->ajaxReturn($result,'JSON');
    // return json_encode($result);
}

js 可以左右滑动的导航栏 以及 展示对应页面

猜你喜欢

js 可以左右滑动的导航栏以及展示对应页面