仿着写的一个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. 网络编程介绍，C/S 架构，网络通讯协议，osi七层

    网络编程: 什么是网络编程: 网络通常指的是计算机中的互联网,是由多台计算机通过网线或其他媒介相互链接组成的 编写基于网络的应用程序的过程序称之为网络编程 为什么要学习网络编程: 我们已经知道计算机, ...

  2. CentOS7使用阿里云源安装Docker

    安装步骤 1.删除已安装的Docker # Uninstall installed docker sudo yum remove docker \ docker-client \ docker-cli ...

  3. 网站性能优化（website performance optimization）

    提高代码运行速度,或许我们从来没有优化这些页面来提高速度 想要开发优秀的网站,你必须了解你的用户,知道他们想要达到什么目的,同时还要明白浏览器的工作原理,从而能够打造快速良好的体验,我最近在PageS ...

  4. Logger Rate Limiter

    Design a logger system that receive stream of messages along with its timestamps, each message shoul ...

  5. C++笔记（3）——string.h相关的一些小知识

    strlen() 用于得到字符数组中第一个\0前的字符的个数,格式如下: strlen(数组); 例子: #include <stdio.h> #include <string.h& ...

  6. 封装CURD

    <?php include ('ft.php'); $db=Danli::show(); //查询 //$re=$db->table('stree')->where(['name'= ...

  7. Ruby学习中(条件判断, 循环, 异常处理)

    一. 条件判断 详情参看:https://www.runoob.com/ruby/ruby-decision.html 1.详情实例(看看就中了) #---------------# # LOL场均人 ...

  8. Python-RabbitMQ-topic（细致消息过滤的广播模式）

    生产者:topic_publiser.py import pika,sys connection = pika.BlockingConnection(pika.ConnectionParameters ...

  9. 转载Spring Data JPA 指南——整理自官方参考文档

    转载:https://blog.csdn.net/u014633852/article/details/52607346 官方文档 https://docs.spring.io/spring-data ...

  10. java中jar包的使用

    1:在工程目录下新建一个文件lib  导入jar包在里面 2:在jar包上右键  ——>build path——>add to bulid path OK!