仿着写的一个jquery的图片切换小插件，代码如下：

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{ margin:0; padding:0; }

    ul,li{ list-style:none; }

    .cl{ zoom:1; }

    .cl:after{ display:block; content:""; width:0; height:0; clear:both; overflow:hidden; }

    .myDiv{ height:300px; }

    .myDiv li{ float:left; width:100%; height:300px; line-height:300px; text-align:center; }

    .myDiv img{ max-height:300px; }

    </style>

</head>

<body>

    <div class="myDiv cl">

        <ul>

            <li class="js-switch-item"><a href="#"><img data-src="1.jpg" src="load.gif"></a></li>

            <li class="js-switch-item"><a href="#"><img data-src="2.jpg" src="load.gif"></a></li>

            <li class="js-switch-item"><a href="#"><img data-src="3.jpg" src="load.gif"></a></li>

            <li class="js-switch-item"><a href="#"><img data-src="4.jpg" src="load.gif"></a></li>

        </ul>

    </div>

    <script src="js/jquery-1.8.2.min.js"></script>

    <script src="js/lunhuan.js"></script>

    <script>

    $(".myDiv").switchFun();

    </script>

</body>

</html>

js:

;(function($){

  $.extend({

    addStyle: function(cssText){

      var style = document.createElement("style");

      style.type = "text/css";

      try{

        style.appendChild(document.createTextNode(cssText));

      }catch(ex){

        style.styleSheet.cssText = cssText;

      }

      document.getElementsByTagName("head")[0].appendChild(style);

    }

  });

  $.fn.switchFun = function(obj,fun){

    if((typeof obj).toLowerCase() === "function"){

      fun = obj;

      obj = {};

    }

    var opt = $.extend({

      cont: "js-switch-item",

      active: "active",//高亮class

      auto: true, //是否自动

      openNext: true,//是否开启上一个、下一个

      events: "mouseenter",//触发事件

      index: 0, //默认显示值

      navClass: "",//导航class

      navCss: "",//导航样式

      navChildCss: "", //导航内部样式

      init: null,//初始化

      times: 3000,//延时时间

      setFun: null

    }, obj || {});

    var $this = this;

    var items = $this.find("."+opt.cont);

    var itemsLen = items.length;

    var nav,next,prev;//节点

    var addActive = function(inx){//设置当前样式、显示

      if(inx >= itemsLen){

        inx = 0;

      }

      if(inx <){

        inx = itemsLen-1;

      }

      var itemCur = items.eq(inx);

      var imgDom = itemCur.find("img");

      if(imgDom.data("src")){//加载图片

        imgDom.prop("src",imgDom.data("src"));

        imgDom.removeData("src");

      }

      items.fadeOut(500);

      itemCur.fadeIn(500);

      nav.removeClass(opt.active).eq(inx).addClass(opt.active);
      opt.index = inx;

    }

    opt.init = function(){//初始化

      var tw = $this.width()||items.width()+"px";

      var th = $this.height()||items.height()+"px";

      var navHtml = "";

      var activeClass = "";

      $this.css({"position":"relative","width":tw,"height":th});

      for(var i=0; i<itemsLen; i++){

        navHtml = navHtml + '<span></span>';

      }

      items.css({"position":"absolute","left":0,"top":0,"z-index":1});

      var navDom = $('<div class="js-switch-nav '+ opt.navClass +'"></div>').html(navHtml);//创建节点

      var navStyle = ".js-switch-nav{ width:100%; height:20px; position:absolute; left:0; bottom:20px; text-align:center;z-index:9; }.js-switch-nav span{ cursor:pointer; display:inline-block; height:5px; width:20px; background-color:#ddd; margin:0 5px; }.js-switch-nav span.active{ background-color:#c00; }.handleDom{ background:rgba(0,0,0,0.6); display:inline-block; height:40px; line-height:40px; width:35px; text-align:center; font-weight:bold; font-size:20px; font-family:serif,arial; color:#fff; cursor:pointer; position:absolute; z-index:99; text-decoration:none; top:50%; margin-top:-20px; display:none; }.js-preDom{ left:10%; }.js-nextDom{ right:10%; }.handleDom i{ position:absolute; display:inline-block; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0.6; filter:alpha(opacity=60); z-index:-1; }";

      $.addStyle(navStyle + opt.navCss + opt.navChildCss);//创建样式

      $this.append(navDom);

      $this.append($('<a href="javascript:;" class="js-nextDom handleDom"><i></i>&gt;</a><a href="javascript:;" class="js-preDom handleDom"><i></i>&lt;</a>'));//创建上一个、下一个

      nav = $this.find(".js-switch-nav span");

      next = $this.find(".js-nextDom");

      prev = $this.find(".js-preDom");

      addActive(opt.index);

    }

    opt.init();

    function _default(e){//阻止冒泡事件

      try{

        e.stopPrapagation();

      }catch(ex){

        window.event.cancleBubble = false;

      }

    }

    var autoFun = function(){

      opt.setFun = setInterval(function(){

        opt.index++;

        addActive(opt.index);

        if(fun){//返回函数

          fun(items.eq(opt.index),nav.eq(opt.index),opt.index);//当前切换元素，当前导航元素，当前索引

        }

      },opt.times);

    }

    $this.on("mouseenter",function(){

      clearInterval(opt.setFun);

      next.show();

      prev.show();

    }).on("mouseleave",function(){

      clearInterval(opt.setFun);

      autoFun();

      next.hide();

      prev.hide();

    });

    next.on("click",function(){//下一个

      opt.index++;

      addActive(opt.index);

    });

    prev.on("click",function(){//上一个

      opt.index--;

      addActive(opt.index);

    });

    nav.on(opt.events,function(e){

      _default(e);

      var $t = $(this);

      var inx = $t.index();

      clearInterval(opt.setFun);

      if(inx === opt.index){

        return $this;

      }

      addActive(inx);

      opt.index = inx;

    });

    if(opt.auto){

      autoFun();

    }

    return $this;

  }

})(jQuery);

jquery 图片切换的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  3. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  4. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  5. jquery图片切换

    图片的切换主要用的知识点事JavaScript和jquery,只要掌握着二种,基本可以写出图片切换效果,如果要好看点的特效,那就到网上找一个插件吧,我自己也是学后端的,偶尔也写一下前段, 我没有专业写 ...

  6. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. 30款jQuery常用网页焦点图banner图片切换 下载

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  9. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

随机推荐

  1. ubuntu 16.04 server 扩容(LVM)磁盘

    因为发现我的本地server出现磁盘满了的情况 所以进行lvm的扩容 1 查看磁盘情况 df -h 原本发现 /dev/mapper/ubuntu1604--vg-root 这个磁盘满了 所以要进行扩 ...

  2. Job for jenkins.service failed because the control process exited with error code.

    root@xiakaibi-PC:~# service jenkins restartJob for jenkins.service failed because the control proces ...

  3. [转帖]IntelliJ IDEA 2018.3.3破解方法

    IntelliJ IDEA 2018.3.3破解方法 https://blog.csdn.net/qq_42862882/article/details/86477495 验证了下 也可以激活.   ...

  4. 【Python】【基础知识】【内置函数】【input的使用方法】

    原英文帮助文档: input([prompt]) If the prompt argument is present, it is written to standard output without ...

  5. IDEA项目目录里下找不到src，但是src确实存在的的解决方案

    写代码的时候可能出现写着写着src就找不到了,我个人认为是触发了热键导致src被隐藏了,下面就是设置src可见和不可见的操作 这个其实是被隐藏了,打开就好,位置如下:

  6. win10自带虚拟机的使用(Hyper-v)

    昨天刚发现的觉得特别好用,故推荐一下,跟VM虚拟机的使用方法是一样的 1.点击开始菜单中的<设置>图标,进入设置页码 2.点击<应用>图标,进入应用页码,并找到程序和功能 3. ...

  7. CSS(下)

    目录 CSS(下) CSS属性相关 宽和高 字体属性 背景属性 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 浮动(float) 限制 ...

  8. Thinkphp5.0上传图片与运行python脚本

    这里只体现了php可以通过批处理文件调用python脚本的效果 控制器代码 访问路径为127.0.0.1/index/index/upload. index模块,index控制器,upload方法. ...

  9. O021、创建 Image

    参考https://www.cnblogs.com/CloudMan6/p/5393376.html   本节演示如何通过 Web GUI 和 CLI 两种方法创建image.   OpenStack ...

  10. WebSocket的兼容性

    https://github.com/sockjs/sockjs-client https://socket.io/ https://github.com/gimite/web-socket-js h ...