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)

效果图

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

赞 (0)

相关推荐

  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • JS实现简易图片轮播效果的方法

    JS实现简易图片轮播效果的方法

    本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

  • js图片自动轮播代码分享(js图片轮播)

    1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 简单的js图片轮换代码(js图片轮播)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv=&quo

  • 原生js和jquery实现图片轮播特效

    原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • 最简单的JavaScript图片轮播代码(两种方法)

    最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

随机推荐