js图片轮播插件的封装

本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

css 样式

.body{
    width: 700px;
    margin: 100px auto;
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .body img{
    width: 700px;
    position: absolute;
    display: none;
  }
  .body ul{
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);

  }
  .body li{
    list-style: none;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    background: none;
    border: 2px solid #fff;
    margin-right: 10px;
    cursor: pointer;
  }
  .active{
    background-color: #fff !important;

  }
  .body a{
    text-decoration: none;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 30px;
    background-size: 100% 60%;
    background-color: rgba(0,0,0,0.3);
  }
  .left{
    left: 0;
    background: url('../img/left.png') no-repeat center center;
  }
  .right{
    right: 0;
    background: url('../img/right.png') no-repeat center center;
  }

页面结构 html 代码

<body>
  <div class="body">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">

<ul>
      <li class="active"></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:;" class="left"></a>
    <a href="javascript:;" class="right"></a>
  </div>

js部分，插件调用

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/slider.js"></script>
  <script type="text/javascript">
  $.slider({
    imgElement:$(".body img"),
    liElement:$(".body li"),
    leftBtn:$(".left"),
    rightBtn:$(".right"),
    time:2000
  })
</script>

封装的插件

(function($){
  function slider(options){
    this.opts=$.extend({},slider.defaluts,options);
    this._imgSlider();
  }
  //设置默认值
  slider.defaluts={
    imgElement:null,
    liElement:null,
    leftBtn:null,
    rightBtn:null,
    time:2000
  }
  slider.prototype._imgSlider=function(){
    var opts=this.opts,
      index=0,
      len=opts.imgElement.length,
      timeInter=null;
    if(opts.imgElement=='') return;
    opts.imgElement.eq(0).show();
    showTime();
     //当鼠标经过 轮播停止，移开继续
     opts.imgElement.hover(function() {
       clearInterval(timeInter);
     }, function() {
       showTime();
     });

    //点击li 显示对应的图片
    opts.liElement.click(function(){
      var id=$(this).index();
      show(id);
    });
    //向左向右
    opts.leftBtn.click(function(){
      clearInterval(timeInter);
      --index;
      index=Math.max(0,index);
      show(index);
      showTime();
    });
    opts.rightBtn.click(function(){
      clearInterval(timeInter);
      ++index;
      index=Math.min(len-1,index);
      show(index);
      showTime();
    });

    function showTime(){
      timeInter=setInterval(function(){
        index++;
        if(index>len){
          index=0;
        }
        show(index);
      },opts.time);
    }
    function show(index){
      opts.imgElement.eq(index).fadeIn(1000).siblings('img').fadeOut(1000);
      opts.liElement.eq(index).addClass('active').siblings('li').removeClass('active');
    }

  }
  $.extend({
    slider:function(options){
      new slider(options);
    }
  })
})(jQuery)

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。