轮播插件--可支持视频拖拽和可视区播放

应上头要求写效果插件，实现效果自动轮播、拖动轮播、和支持视频，插件参数提取出来传

slide.js

(function($) {
    $.fn.slide=function(options){
        var Slide = {};    
        var defaults={
            animTime : 500,
            height:'80%',
            width: '70%',
            autoSlideDelay :6000,
            pageView:1,
            btPic:[]
        };
        var opts = jQuery.extend(defaults,options);
        var $slider = $(".slider"),
            myVideo = $("li video"),
            diff = 0,
            animating = false,
            curSlide = 0,
            numOfSlides = $(".slide").length-1,//同方向可滑动的最多次数
            autoSlideTimeout,
            $pagination = $(".slideSortBt");
          myVideo.attr("flag",false);
          //console.log($(".slider-container").eq(0).html())
          
          $('.slider-container').css({
              "width":opts.width,
              "height":opts.height
          })

          //滑动改变
          Slide.changeSlides = function (instant) {
            if (!instant) {
                  animating = true;
                  Slide.manageControls();
                  $slider.addClass("animating");
                  $slider.css("top");
                  $(".slide").removeClass("active");
                  $(".slide-"+curSlide).addClass("active");
                  if(opts.pageView==1){
                      $(".slideSortBt-elem").removeClass("active");
                      $(".slideSortBt-elem"+curSlide).addClass("active");
                  }
                  if(opts.pageView==2){
                      $(".slider-pagi__elem").removeClass("active");
                      $(".slider-pagi__elem-"+curSlide).addClass("active");
                  }
                  //console.log(111,curSlide)
                  setTimeout(function() {
                       $slider.removeClass("animating");
                    animating = false;
                     Slide.isPlayView();
                  }, opts.animTime);
            }
            window.clearTimeout(autoSlideTimeout);
            $slider.css("transform", "translate3d("+ -curSlide*100 +"%,0,0)");
            diff = 0;
            Slide.autoSlide();
        };
        //向左
          Slide.toLeft = function () {
            if (animating) return;
            if (curSlide > 0) curSlide--;
            Slide.changeSlides();
          };
          //向右
          Slide.toRight = function () {
            if (animating) return;
            if (curSlide < numOfSlides) curSlide++;
            Slide.changeSlides();
         };

                   //轮播
        Slide.autoSlide =  function() {
            autoSlideTimeout = setTimeout(function() {
                  curSlide++;
                  if (curSlide > numOfSlides) curSlide = 0;
                 Slide.changeSlides();
                 Slide.isPlayView();
            }, opts.autoSlideDelay);
        };

          Slide.autoSlide();

         //生成切换按钮
          Slide.creatSortBt = function(){
              for (var i = 0; i < numOfSlides+1; i++) {
                  if(opts.pageView == 1){
                      var $li = $("<li class='slideSortBt-elem'></li>");
                    $li.addClass("slideSortBt-elem"+i).data("page", i).css({
                        "background-image": "url("+opts.btPic[i]+")",
                        'background-size':'100% 100%',
                        '-moz-background-size':'100% 100%',
                        '-webkit-background-size':'100% 100%',
                        '-o-background-size':'100% 100%'    
                    });;             
                  }
                if(opts.pageView == 2){
                    var $li = $("<li class='slider-pagi__elem'></li>");
                    $li.addClass("slider-pagi__elem-"+i).data("page", i);
                }
                if (!i) $li.addClass("active");
                $pagination.append($li);
            }
          };

        Slide.creatSortBt();

        //生成左右切换
          Slide.creatChangeBt = function(){
              var str = '<div class="slider-control left inactive"></div><div class="slider-control right"></div>';
              $(".slider-container").append(str);
          }

          Slide.creatChangeBt();
          
          //控制左右切换
        Slide.manageControls = function() {
            $(".slider-control").removeClass("inactive");
            if (!curSlide) $(".slider-control.left").addClass("inactive");
            if (curSlide === numOfSlides) $(".slider-control.right").addClass("inactive");
        };

         Slide.playVideo = function (){         
            if(myVideo.attr("flag")=='true'){
                myVideo[0].play();
            }
            else{
                myVideo[0].pause();
            }
        } ;

        //拖动播放时
        Slide.isPlayAc = function(){
            //var e = event|| window.event;
            //console.log($(this).hasClass("videoPlay"))
            if(!$(this).hasClass("videoPlay")) {
                myVideo.attr("flag",true);
            }
            else{
                myVideo.attr("flag",false);
            }
            Slide.playVideo();
        };

        //可视区播放
        Slide.isPlayView = function() {
            var reg = myVideo.parent("li").hasClass("active");
            if(reg){
                myVideo.attr("flag",true);
            }
            else{
                myVideo.attr("flag",false);
            }
            Slide.playVideo();
        };        

        $(document).on("mousedown touchstart", ".slider", function(e) {
            if (animating) return;
            Slide.isPlayAc();
            window.clearTimeout(autoSlideTimeout);
            var startX = e.pageX || e.originalEvent.touches[0].pageX,
                winW = $(window).width();
                diff = 0;
            $(document).on("mousemove touchmove", function(e) {
                Slide.isPlayAc();
                  var x = e.pageX || e.originalEvent.touches[0].pageX;
                 diff = (startX - x) / winW * 70;
                  if ((!curSlide && diff < 0) || (curSlide === numOfSlides && diff > 0)) diff /= 2;
                  $slider.css("transform", "translate3d("+ (-curSlide*100 - diff) +"%,0,0)");
            });
        });
          
        $(document).on("mouseup touchend", function(e) {
            $(document).off("mousemove touchmove");
               if (animating) return;
            if (!diff) {
                  Slide.changeSlides(true);
                  return;
               }
            if (diff > -8 && diff < 8) {
              Slide.changeSlides();
              return;
            }
            if (diff <= -8) {
              Slide.toLeft();
            }
            if (diff >= 8) {
              Slide.toRight();
            }
        });
      
        $(document).on("click", ".slider-control", function() {
            if ($(this).hasClass("left")) {
                Slide.toLeft();
            } else {
                Slide.toRight();
            }
        });
          
        $(document).on("click", ".slideSortBt-elem", function() {
            curSlide = $(this).data("page");
            Slide.changeSlides();
        }); 

        $(document).on("click", ".slider-pagi__elem", function() {
            curSlide = $(this).data("page");
            Slide.changeSlides();
        }); 

        //兼容处理
        var explorer =navigator.userAgent ;
        if ((explorer.indexOf("MSIE") >= 0)||(explorer.indexOf("Chrome") >= 0)) {
            console.log(111111)
            $("img").on('mousemove',function(event){
                var e = event||window.event;
                e.preventDefault();
            });
        }
        if (explorer.indexOf("Firefox") >= 0) {
            console.log(222)
            var imgL = $(".slide").length;
            for(var k=0;k<=imgL-1;k++){
                var imgElem = document.images[k];
                imgElem.ondragstart = function(){
                    return false;
                }
            }
        }
        //Safari
        // if(explorer.indexOf("Safari") >= 0){
        //     console.log(3333)
        //     $("img").on('mousemove',function(event){
        //         var e = event||window.event;
        //         e.returnValue = false;
        //     });
        // }
        
    }
})(jQuery);

 

demo.html

<head>
        <meta charset="UTF-8">
        <title>轮播5</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
        <link rel="stylesheet" href="css/style.css">
        <style>
            .slide:nth-child(1) {
              left: 0;
            }
            .slide:nth-child(2) {
              left: 100%;
            }
            .slide:nth-child(3) {
              left: 200%;
              margin: 0 !important；
            }
            .slide:nth-child(4) {
              left: 300%;
            }
            .slide:nth-child(5) {
              left: 400%;
            }
        </style>
    </head>
<body>
    <div class="slider-container">
        <ul class="slider">
            <li class="slide slide-0 active"><img src="images/1.png"></li>
            <li class="slide slide-1"><img src="images/2.png"></li>
            <li class="slide slide-2">
                <video src="images/Lamborghini.mp4"   class="videoPlay" style="width:100%;height:100%;"></video>
            </li>
            <li class="slide slide-3"><img src="images/4.png"></li>
            <li class="slide slide-4"><img src="images/3.png"></li>         
        </ul>
        <ul class="slideSortBt"></ul>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/slide.js"></script>
    <script>
        $(function () {
            $(".slider-container").slide(
                {
                    height:'80%',//轮播宽高
                    width: '70%',
                    autoSlideDelay : 3000,//轮播时间间隔
                    animTime : 500,//图片切换时间间隔
                    pageView:1,//切换按钮样式1,2
                    btPic:['images/1.jpg','images/2.jpg','images/5.jpg','images/4.jpg','images/3.jpg']//切换按钮样式为一时需设置样式图片
                });
            console.log(Math.atan(0.40)*(180/Math.PI));
        });
    </script>
</body>