仿着写的一个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. 【CUDA开发】__syncthreads的理解

    __syncthreads()是cuda的内建函数,用于块内线程通信. __syncthreads() is you garden variety thread barrier. Any thread ...

  2. LeetCode | DP专题详解

    221 medium     221. Maximal Square Medium Given a 2D binary matrix filled with 0's and 1's, find the ...

  3. 纯css实现单选框样式

    html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...

  4. pikachu-SQL注入

    参考网址: http://www.mamicode.com/info-detail-2795438.html

  5. skiplist(跳表)的原理及JAVA实现

    前记 最近在看Redis,之间就尝试用sortedSet用在实现排行榜的项目,那么sortedSet底层是什么结构呢? "Redis sorted set的内部使用HashMap和跳跃表(S ...

  6. 使用vs工具查看dll依赖（也可查看pyc文件的依赖）

    vs工具中有个工具叫dumpin.exe,可以用来查看exe文件.dll文件.pyc文件依赖于哪些dll,从而针对性地去检查具体缺失哪些文件(目前是在装TensorFlow时查看具体需要哪个版本的cu ...

  7. python PEP8常用规范(看完你会感谢我的！)

    完整的规范移步传送门 pep8规范 官方文档:[https://www.python.org/dev/peps/pep-0008/](https://www.python.org/dev/peps/p ...

  8. Python-RabbitMQ-fanout（广播模式）

    生产者:fanout_publiser.py import pika import sys connection = pika.BlockingConnection(pika.ConnectionPa ...

  9. VMware Ubuntu18.04 安装及配置笔记

    安装Ubuntu 下载虚拟机VMware 下载镜像Ubuntu 过程略, 参考 https://zhuanlan.zhihu.com/p/38797088 Ubuntu配置 特别提示: 在Ubuntu ...

  10. Box-shadow制作漂亮的外阴影输入框

    背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...