博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
带左右箭头的图片展示js封装
阅读量:6431 次
发布时间:2019-06-23

本文共 2247 字,大约阅读时间需要 7 分钟。

hot3.png

发布会专题页
 
  
   
    
  •     
  •     
  •     
  •     
  •     
  •     
  •     
  •     
  •     
  •        
       
          
        
       
      (function($){ $.fn.jjsImgs=function(options){  var defaults={   bWidth:770,//大图宽   sWidth:130,//小图宽   qknavCurr:'on',//当前缩略图样式   qknavLen:6,//设置小缩略图展示个数   auto:1,   //设为1则为自动播放   time:3000,//自动播放可设置时间间隔   disabPrev:'noprev',   disabNext:'nonext',   callback:null  };  var options=$.extend(defaults,options);  this.each(function(){   var self=$(this),    bigImg=self.find(".bigImg"),    quicknav=self.find(".quicknav"),    prevBtn=self.find(".prev"),    nextBtn=self.find(".next");   var timer,num=0,flag,lis=bigImg.find("ul").children('li'),len=lis.length;   var _init=function(){    for(var i=0;i
    • ");    }    quicknav.find("ul").children("li").eq(0).addClass(options.qknavCurr);    quicknav.find("li").each(function(){     $(this).click(function(){       num=$(this).index();       _nowPic(num,true);      });    });    nextBtn.click(function(){     _next();    });    prevBtn.click(function(){     _prev();    });   },   _nowPic=function(num,flag){    var lb=num*options.bWidth;    var ls=num*options.sWidth;    var lnum=Math.abs(quicknav.find("ul").css("left").split('p')[0]/options.sWidth);       quicknav.find("li").eq(num).addClass(options.qknavCurr).siblings().removeClass(options.qknavCurr);    bigImg.find("ul").animate({'left':'-'+lb+'px'});    _btnValid(num);    if(!flag) return;    if(num==lnum){     ls=num<3?0:(num-3)*options.sWidth;    }else if(num==(lnum+options.qknavLen-1)){     ls=(len-num)<3?(len-options.qknavLen)*options.sWidth:(lnum+3)*options.sWidth;    }else if(num
      len-1){     num=len-1;     return;    }    _nowPic(num,true);   },   _prev=function(){    num--;    if(num<0){     num=0;     return;    }    _nowPic(num,true);   },   _btnValid=function(num){    if(num==0){     prevBtn.addClass(options.disabPrev);     nextBtn.removeClass(options.disabNext);    }else if(num==len-1){     nextBtn.addClass(options.disabNext);     prevBtn.removeClass(options.disabPrev);    }else{     prevBtn.removeClass(options.disabPrev);     nextBtn.removeClass(options.disabNext);    }   },   _autoPlay=function(){    timer=setInterval(function(){     if(num==len-1){num=-1;}     _next();    },options.time);   };   self.bind('mouseover',function(){clearInterval(timer);});   self.bind('mouseout',function(){if(!!options.auto){_autoPlay();}});   _init();   if(!!options.auto){_autoPlay();}     }); }})(jQuery);$(".imgWrap").jjsImgs(); 

      转载于:https://my.oschina.net/u/879103/blog/415062

      你可能感兴趣的文章
      了解轮询、长轮询、长连接、websocket
      查看>>
      bzoj2427[HAOI2010]软件安装
      查看>>
      bzoj1593[Usaco2008 Feb]Hotel 旅馆*
      查看>>
      WPF个人助手更新
      查看>>
      NLPIR技术助力中文智能数据挖掘
      查看>>
      python操作redis--------------数据库增删改查
      查看>>
      Android中仿IOS提示框的实现
      查看>>
      php初学第一课
      查看>>
      Windows下与Linux下编写socket程序的区别 《转载》
      查看>>
      java学习笔记 --- IO(3)
      查看>>
      Mysql 的FIND_IN_SET函数慢的忧化
      查看>>
      Web service是什么?
      查看>>
      浅析HTML5的10大优势
      查看>>
      实例讲解基于 React+Redux 的前端开发流程
      查看>>
      [转]Vim配置与高级技巧
      查看>>
      查找SQL数据表或视图中的字段属性信息
      查看>>
      如何优化UPS的工作模式为数据中心节省运营成本
      查看>>
      使用python来访问Hadoop HDFS存储实现文件的操作
      查看>>
      靠能力赚大钱,是最最可笑的谎言
      查看>>
      WORD设置节起始页码后出现诡异隐藏页/跳页、节首页页面边框丢失
      查看>>