欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js图片轮播插件的封装

程序员文章站 2023-02-24 10:30:20
本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下 我封装的这个轮播插件只需要获取到图片和按钮就可以啦。 css 样式 .body{...

本文为大家分享了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)

效果图

js图片轮播插件的封装

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

上一篇： JS获取填报扩展单元格控件的值的解决办法

下一篇： 基于iScroll实现下拉刷新和上滑加载效果

推荐阅读