仿着写的一个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. CornerNet-Lite算法笔记

    论文名称:CornerNet-Lite: Efficient Keypoint Based Object Detection 论文链接:https://arxiv.org/abs/1904.08900 ...

  2. 【AMAD】betamax -- 一个ruby-VCR的模仿品，只支持requests

    简介 动机 作用 用法 个人评分 简介 betamax1会记录你的HTTP操作,可以让你在测试的时候不必重复进行真实的请求. 动机 如果你的代码需要和外部资源一起运作,那么测试这段代码的方法就叫做集成 ...

  3. 关于Thread ThreadPool Parallel 的一些小测试demo

    using System; using System.Diagnostics; using System.Runtime.InteropServices; using System.Threading ...

  4. NXP-PN511-antenna-design-quide

    NXP-PN511-antenna-design-quide  文库有下载 C1 C2

  5. 【3.2】【mysql基本实验】mysql GTID复制（基于空数据的配置）

    概述:本质上和传统异步复制没什么区别,就是加了GTID参数. 且可以用传统的方式来配置主从,也可以用GTID的方式来自动配置主从. 这里使用GTID的方式来自动适配主从. 需要mysql5.6.5以上 ...

  6. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  7. azkaban安装步骤

    安装包 1.得到软件包 azkaban-executor-server-2.5.0.tar.gz azkaban-sql-script-2.5.0.tar.gz azkaban-web-server- ...

  8. 3的倍数 或运算构造x（牛客第四场）-- triples I

    题意: 给你一个数,希望你能用最少的3的倍数或运算成它,让你输出答案. 思路: 进制%3有规律,1.2.4.8.16%3是1.2.1.2.1 ... 利用这一点分情况取一些位合成一些数就是答案了. # ...

  9. py2 json字符串转字典去掉前缀u

    def unicode_convert(input): if isinstance(input, dict): return {unicode_convert(key): unicode_conver ...

  10. python-连接mysql实例

    import pymysql # 创建连接 conn = pymysql.connect(host='192.168.71.140', port=3306, user='root', passwd=' ...