文章分類

左右箭頭圖片展示js封裝

2020/12/15 上午 10:28:59發表點閱: 2119 推荐 :405

內容面板收納

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发布会专题页</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="box">
<div class="imgWrap">
  <div class="bigImg">
   <ul class="clearfix">
    <li><a href="#"><img src="images/big.jpg"/></a></li>
    <li><a href="#"><img src="images/1.jpg"/></a></li>
    <li><a href="#"><img src="images/2.jpg"/></a></li>
    <li><a href="#"><img src="images/3.jpg"/></a></li>
    <li><a href="#"><img src="images/4.jpg"/></a></li>
    <li><a href="#"><img src="images/5.jpg"/></a></li>
    <li><a href="#"><img src="images/big.jpg"/></a></li>
    <li><a href="#"><img src="images/1.jpg"/></a></li>
    <li><a href="#"><img src="images/2.jpg"/></a></li>
    <li><a href="#"><img src="images/3.jpg"/></a></li>
   </ul>
  </div>
  <div class="quicknav">
   <ul></ul>
  </div>
  <a href="#" class="btns prev noprev"></a>
  <a href="#" class="btns next"></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript">
(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<len;i++){
     var src=lis.eq(i).find("img").attr("src");
     quicknav.find("ul").append("<li><img src='"+src+"'/></li>");
    }
    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<lnum){
     ls=0;
    }else{
     ls=lnum*options.sWidth;
    }
    quicknav.find("ul").animate({"left":"-"+ls+"px"});
   },
   _next=function(){
    num++;
    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();
</script>
</body>
</html>

我要評論

推荐分享

我要評論

標題
暱稱
郵件
內容
* 驗證碼

文章分類

最新文章

左右箭頭圖片展示js封裝

我要評論