zoukankan      html  css  js  c++  java
  • jQuery插件图片切换(第一次自已偿试写插件)

    // JavaScript Document
    ;(function($){
        $.fn.extend({
            "zj_ppt":function(value){
                
                //默认参数定义
                var $this = $(this);
                value = $.extend({
                    "time":2000,        //间隔变化动画时间
                    "con":0,
                    "sto":true,
                    "count":"count",    //切换小图的父级class名字
                    "src":"src",        //切换小图片路径
                    "src_cur":"src_cur"    //当前切换小图片路径
                    },value);
                
                //图片切换函数
                function autopic(){
                    $("li",$this[0]).hide();
                    $("li:eq("+value.con+")",$this[0]).show();
                    $(value.count).find("ul li img").attr("src",value.src);
                    $(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur);
                    if(value.con>$("li",$this[0]).length-2){
                        value.con = 0;        
                    }else{
                        value.con += 1;
                    }
                }
                
                //每间隔多少时间执行一次图片切换
                function sett(){
                    if(value.sto){autopic()};
                    setTimeout(sett,value.time);
                }
                
                //鼠标悬停时切换图片,并停止自动切换
                $(value.count).find("ul li").hover(function(){
                    var _index = $(this).index();
                    value.con = _index;
                    value.sto = false;
                    autopic();
                },function(){
                    var _index = $(this).index();
                    value.sto = true;
                    value.con = _index;
    
                });
                
                sett();    
                
                //反回原对像,以便连缀JQuery的其它方法
                return $this;
            }
        });
    })(jQuery);

    以上是插件部分代码;

    下面可以下载demo

     [下载].demo

     

  • 相关阅读:
    CSRF跨站请求伪造
    FineReport 导出汉字乱码
    Java 程序中中文没有乱码,存入数据库后中文乱码问题
    分析函数
    Redis的持久化与主从复制
    分布式Redis的使用
    redis的介绍和安装
    Solr后台管理及SolrJ的使用
    Solr总结
    bootstrap 点击回到顶部 超简单
  • 原文地址:https://www.cnblogs.com/lufy/p/2487566.html
Copyright © 2011-2022 走看看