不用swiper写轮播，自己封装写轮播（PC，移动端均适用）

不用swiper，写轮播（PC，移动端均适用）

有些项目需要控制文件大小或者削小工程包体积时，swiper会过于的大了，这时候一般会想到自己书写一个轮播，这里放出一个我大佬他封装的轮播。我觉得好用嘻嘻（~00<），不喜请× bye~

1、js代码

function lunbo() {
       //轮播切换
       !function(){
        var lunbo = function(obj,time){
         var index = 0;
         var resize = function(num){
         //这里是绑定轮播item，可自行更换绑定，cur样式控制显示与隐藏
          obj.find('.lb .gif_box_img').hide().eq(num).show();
          obj.find('.room_btn li,.dot ul li').removeClass('cur');
          obj.find('.room_btn li,.dot ul li').eq(num).addClass('cur');
        }
        resize(index);
        var timer = setInterval(function(){
          index++;
          if(index > obj.find('.lb .gif_box_img').length-1) index =0;
          resize(index);
        },time);
        // 左滑动
        function leftgo() {
          clearInterval(timer);
          index--;
          if(index < -obj.find('.lb .gif_box_img').length) index =-1;
          resize(index);
          timer = setInterval(function(){
           index++;
           if(index > obj.find('.lb .gif_box_img').length-1) index =0;
           resize(index);
         },time);
        }
        // 右滑动
        function rightgo() {
          clearInterval(timer);
          index++;
          if(index > obj.find('.lb .gif_box_img').length-1) index =0;
          resize(index);
          timer = setInterval(function(){
           index++;
           if(index > obj.find('.lb .gif_box_img').length-1) index =0;
           resize(index);
         },time);
        }
        //按钮
		obj.find('.room_btn li').on('click',function(){
			clearInterval(timer);
			index = $(this).index();
			resize(index);
			timer = setInterval(function(){
			   index++;
			   if(index > obj.find('.lb .gif_box_img').length-1) index =0;
			   resize(index);
			},time);
		 }); 
        // 左箭头   
        obj.find('.left_box').click(function() {
         leftgo();
       });
        // 右箭头
        obj.find('.right_box').click(function() {
         rightgo();
       });
        // 手势滑动
        var p_move,p_cy;
        obj.find(".touch-box").bind("touchstart", function (event) {
          var b = event.originalEvent.changedTouches[0];
          p_cy = b.clientX; //获取初始纵坐标

        });
        obj.find(".touch-box").bind("touchmove", function (event) {
          // event.preventDefault(); //锁定系统滑动
          var b = event.originalEvent.changedTouches[0];
          p_cy_now = b.clientX; //获取活动纵坐标
          p_move = p_cy_now - p_cy; //计算移动距离 

        });
        obj.find(".touch-box").bind("touchend", function (event) {
          if (p_move<-30) {
            // 左滑
            rightgo();
          }else if(p_move>30){
            // 右滑
            leftgo();

          };
        });

      };
      
    };
    // 调用;
    //lunbo(要轮播的容器,时间)
     lunbo($('.lunbo_b'),1500);

2、html代码

<!-- css代码就自己写啦哈哈哈哈（叉腰） -->
<div class='lunbo_4 lazy_box lunbo_b'>
     <div class='lb'>
        <div class="gif_box_img">
             <img   class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_1_02.png?v=aa"  alt="" />
        </div>
        <div class="gif_box_img">
             <img   class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_2_02.png?v=aa"  alt="" />
        </div>
        <div class="gif_box_img">
             <img   class="lazyload" src="<?=$loading?>" data-src="<?=$cdn_path?>images/lunbo2_3_02.png?v=aa"  alt="" />
        </div>
     </div>
    <!-- 移动端的触摸范围 -->
     <div class="touch-box"></div>
</div>

今天又是小白的一天呢。祝各位脱单不脱发，bug没有哈哈哈哈（其实是我的心愿TAT）