仿着写的一个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. Mybatis是什么？mybatis中的对一和对多关系怎么配置

    Mybatis是什么? 1.mybatis出来之前,由java的jdbc连接数据库,mybatis出来之后,将jdbc进行封装,实现更有效的连接:   2.mybatis的对象SqlSession,s ...

  2. [转帖]Linux /tmp目录下执行脚本失败提示Permission denied

    Linux /tmp目录下执行脚本失败提示Permission denied https://www.cnblogs.com/linyfeng/p/11087655.html 国产化的环境上 就有一个 ...

  3. [转帖]RPM的原理及rpm命令常用参数

    RPM的原理及rpm命令常用参数 2015年09月14日 15:39:43 lose_wait 阅读数 1298 https://blog.csdn.net/u012012939/article/de ...

  4. [转帖]docker清理日志

    docker清理日志 2017年05月03日 10:37:27 不想当码农的程序员 阅读数 12827    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...

  5. Fiddler--模拟弱网

    1.首先要勾选Rules--Performance--Simulate Modem Speeds 2.点击Customer Rules 3.然后找到 修改这个值就好. 备注:修改完保存后,要重新勾选第 ...

  6. Django之ORM操作.md

    1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  7. python_0基础开始_day08

    第八节 1,文件操作 文件操作目的: 持久化,永久存储 (数据库之前 -- 文件操作就是代替数据库) 读 1,找到文件位 2,双击打开 3,进行一些操作 4,关闭文件 open() 打开,通过pyth ...

  8. 从尾到头打印列表——牛客剑指offer

    题目描述 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 解题思路 思路1: 顺序遍历链表,取出每个结点的数据,插入list中. 由于要求list倒序存储链表中的数据,而我们是顺序取 ...

  9. 【Java】Java程序报错：EXCEPTION_ACCESS_VIOLATION (0xc0000005)

    运行Java程序的时候,报错:EXCEPTION_ACCESS_VIOLATION (0xc0000005): 根据原网页的说明: EXCEPTION_ACCESS_VIOLATION In rare ...

  10. node工具之pm2

    pm2 PM2是带有内置负载平衡器的Node.js应用程序的生产过程管理器.它使您可以使应用程序永远保持活动状态,无需停机即可重新加载它们,并简化常见的系统管理任务. 安装 npm install p ...