你的位置:首页 > Java教程

[Java教程]jquery——左右按钮点击切换一组图片功能


一、最终效果

二、功能分析

1、需求分析

点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片。初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示。

2、html结构分析

 <div class="activity" id="activity-slide">    <a href="javascript:void(0)" class="pg_left ps_pre"></a>    <a href="javascript:void(0)" class="pg_right ps_next" ></a>     <ul class="clearfix">      <li><a href="javascript:;"><img src="images/activity01-1410.jpg"></a></li>      <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>      <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>      <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>      <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>   </ul></div>

 #activity-slide是整个幻灯的入口,后面会将其作为参数来调用幻灯功能。

 两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。

 3、功能分析

因为左右切换都是三个为一组的切换,如果li总个数不是3的倍数时,需要增加li节点填满。

//需要追加的li节点个数var addli = 0;//一组切换3个livar num=3;var lisize = a.find("ul li").size();//获取li个数//判断需要添加的li节点数量var reminder=lisize%num;if(lisize%num!=0){addli = num-reminder;}else{addli = 0;}addlist();

上面是判断得到需要追加的个数lisize,然后调用addlist追加。

addlist如下,从ul的第一个li开始复制,需要几个就复制出几个节点追加。节点追加完毕后重新计算ul的宽度。

    function addlist(){      for(i=0;i<addli;i++){        var html = a.find("ul li").eq(i).html();        a.find("ul").append("<li>"+html+"</li>");        }      a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});    }

现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏,所以先说这个按钮显示功能,将此分装成一个函数btnshow。

    /***    参数说明:    now:当前是第几组,默认是0    c:总共有几组    d:初始化时li的个数    e:每组显示li个数    ***/    function btnshow(now,c,d,e){      if(d<=e){//如果初始化时li的个数小于一组要显示的数,则不显示pre和next按钮        a.find(".ps_next").hide();        a.find(".ps_pre").hide();      }else if(now==0){//初始化now=0,显示第一组,只显示next        a.find(".ps_next").show();        a.find(".ps_pre").hide();        }else if(now==c-1){//显示到最后一组,只显示pre        a.find(".ps_next").hide();        a.find(".ps_pre").show();        }else{//显示中间组,pre和next都需要显示        a.find(".ps_next").show();        a.find(".ps_pre").show();      }    }

 接下来幻灯切换。这里a是传入的参数,也就是 #activity-slide。给它下面的所以的pre和next添加响应。

向前一组,组数now减一,now是几,就让ul的margin-left为负几倍的组宽(即3倍的(li宽度+margin宽度)),然后显示对于按钮即可。

向后滑动一组li同理。

    function photoscroll(){      a.find(".ps_pre").on("click",function(){//console.log(num);          now--;        if(now >= 0){                   a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});          btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }      });      a.find(".ps_next").on("click",function(){//console.log(num);          now++;        if(now < (lisize+addli)/num){            a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});          btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }        });        btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }

三、代码

1、用到图片

2、完整代码

完整代码

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/style.css"><script>window.onresize=function(){  var winWidth = document.body.clientWidth;  if(winWidth <=1180){    body.className="grid-960";   }else if (winWidth<= 1410){    body.className="grid-1180";   }else if (winWidth>1410){    body.className="grid-1410";   }else {    alert("do not know!");  }}</script></head><body id="body" class=""><script>//初始化状态显示样式判断,放在body后面var winWidth = document.body.clientWidth;if (winWidth <=1180){  body.className="grid-960"; }else if (winWidth<= 1410){  body.className="grid-1180"; }else if (winWidth>1410){  body.className="grid-1410"; }else {  alert("do not know!");}</script><div class="wapper">    <div class="section">    <h2 class="title">热门活动</h2>    <div class="activity" class="movie" id="activity-slide">      <a href="javascript:void(0)" class="pg_left ps_pre"></a>      <a href="javascript:void(0)" class="pg_right ps_next" ></a>      <ul class="clearfix">        <li><a href="javascript:;"><img src="images/activity01-1410.jpg"></a></li>        <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>        <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>        <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>        <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>      </ul>    </div>  </div></div></body></html><script src="http://code.jquery.com/jquery-latest.js"></script><script>//首页图片滚动切换(function($){  $.photolist=function(a){        var w_li = a.find("li").width();    var h_li = a.find("li").height();    var margin_li=parseInt(a.find("li").css("marginLeft"));    var now = 0;    var num = 0;    var addli = 0;    var lisize = a.find("ul li").size();    var htmlall = a.find("ul").html();        //判断每次滚动数量    /*    var w_body = $("body").width();    if(w_body <=1170){      var num = 3;    }else if(w_body<= 1380){      var num = 4;    }else if(w_body>1380){      var num = 5;    }    */    var num=3;        //判断需要添加的li节点数量    var reminder=lisize%num;    if(lisize%num!=0){addli = num-reminder;}    else{addli = 0;}    addlist();    //点击滚动事件    photoscroll();        $(window).resize(function(){      //location.reload();      now = 0;      addli = 0;      a.find("ul").html(htmlall);//html内容还原初始值      a.find(".ps_next").show();//按钮样式初始化      a.find(".ps_pre").hide();      //判断每次滚动数量      /*      var w_body = $("body").width();      if(w_body <=1170){        var num = 3;      }else if(w_body<= 1380){        var num = 4;      }else if(w_body>1380){        var num = 5;      }      */      var num=3;      //判断需要添加的li节点数量      var reminder=lisize%num;      if(lisize%num!=0){addli = num-reminder;}      else{addli = 0;}      addlist();      w_li = a.find("li").width();      margin_li=parseInt(a.find("li").css("marginLeft"));      a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});      a.find("ul").animate({"margin-left":0});//ul位置还原      btnshow(now,parseInt((lisize+addli)/num),lisize,num);    });            function addlist(){      for(i=0;i<addli;i++){        var html = a.find("ul li").eq(i).html();        a.find("ul").append("<li>"+html+"</li>");        }      a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});      //console.log(a.find("ul li").size());    }    function photoscroll(){      a.find(".ps_pre").on("click",function(){//console.log(num);          now--;        if(now >= 0){                   a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});          btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }      });      a.find(".ps_next").on("click",function(){//console.log(num);          now++;        if(now < (lisize+addli)/num){            a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});          btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }        });        btnshow(now,parseInt((lisize+addli)/num),lisize,num);        }    /***    参数说明:    now:当前是第几组,默认是0    c:总共有几组    d:初始化时li的个数    e:每组显示li个数    ***/    function btnshow(now,c,d,e){      if(d<=e){//如果初始化时li的个数小于一组要显示的数,则不显示pre和next按钮        a.find(".ps_next").hide();        a.find(".ps_pre").hide();      }else if(now==0){//初始化now=0,显示第一组,只显示next        a.find(".ps_next").show();        a.find(".ps_pre").hide();        }else if(now==c-1){//显示到最后一组,只显示pre        a.find(".ps_next").hide();        a.find(".ps_pre").show();        }else{//显示中间组,pre和next都需要显示        a.find(".ps_next").show();        a.find(".ps_pre").show();      }    }      }})(jQuery); $.photolist($("#activity-slide"));</script>

View Code

css部分:

@charset "utf-8";body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, button, textarea, table, tbody, tfoot, thead, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; outline:nonebackground:transparent;}article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }body, button, input, select, textarea { font: 12px/1.5 arial, \5b8b\4f53, sans-serif; }h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; outline: none }address, cite, dfn, em, var { font-style: normal; }code, kbd, pre, samp { font-family: courier new, courier, monospace; }small { font-size: 12px; }ul, ol, li { list-style: none; }img { border: none; }a { text-decoration: none; outline: thin none; }a:hover { text-decoration: underline; }table { border-collapse: collapse; border-spacing: 0; }.clear { clear: both; }.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }html { -webkit-text-size-adjust: none; }body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif; }.grid-960 .wapper { width: 100%; min-width:960px;height: auto; margin: 0 auto; background: url(../images/bg-body-960.jpg) no-repeat center top; }.grid-1180 .wapper { width: 100%; min-width:1180px;height: auto; margin: 0 auto; background: url(../images/bg-body-1180.jpg) no-repeat center top; }.grid-1410 .wapper { width: 100%; min-width:1410px;height: auto; margin: 0 auto; background: url(../images/bg-body-1410.jpg) no-repeat center top; }/*热门活动*/.grid-960 .section { width: 960px; margin: 0 auto;background-color:#eaf2ff; }.grid-1180 .section { width: 1180px; margin: 0 auto;background-color:#eaf2ff;}.grid-1410 .section { width: 1410px; margin: 0 auto;background-color:#eaf2ff;}.title{padding:0 102px;height:70px;line-height:70px;font-size:24px;font-weight:normal;color:#fff;text-shadow: 0 3px #df2828, 3px 0 #df2828;background:#cc2223 url(../images/bg-title.jpg) no-repeat left top;}.viewall:hover{text-decoration:none;}.viewall{font-size:18px;;color:#fff;text-shadow: 0 3px #df2828, 3px 0 #df2828;float:right;}.grid-1410 .title {padding:0 116px;background-image:url(../images/bg-title-1410.jpg);}.grid-960 .contentwrap{width:800px;margin:0 auto;}.grid-1180 .contentwrap{width:980px;margin:0 auto;}.grid-1410 .contentwrap{width:1180px;margin:0 auto;}.grid-960 .activity{width:826px;height:152px;overflow:hidden;margin:0 auto;position:relative;}.grid-1180 .activity{width:1020px;height:192px;overflow:hidden;margin:0 auto;position:relative;}.grid-1410 .activity{width:1230px;height:232px;overflow:hidden;margin:0 auto;position:relative;}.grid-960 .activity ul{height:152px;overflow:hidden;}.grid-1180 .activity ul{height:192px;overflow:hidden;}.grid-1410 .activity ul{height:232px;overflow:hidden;}.activity li img{display:block;width:100%;height:100%;}.activity li{display:block;float:left;}.grid-960 .activity li{width:250px;height:125px;overflow:hidden;margin:12px;}.grid-1180 .activity li{width:300px;height:150px;overflow:hidden;margin:20px;}.grid-1410 .activity li{width:360px;height:180px;overflow:hidden;margin:25px;}/*js切换*/.pg_left,.pg_right {position: absolute;z-index: 999;width: 35px;height: 50px;overflow: hidden;}.pg_right {background: transparent url(../images/pg_right.png) no-repeat scroll 5px 7px;}.pg_right:hover {background: transparent url(../images/hover.png) no-repeat scroll 0 0;}.grid-960 .pg_right{top:75px;right:16px;margin-top:-25px;}.grid-1180 .pg_right{top:95px;right:20px;margin-top:-25px;}.grid-1410 .pg_right{top:115px;right:25px;margin-top:-25px;}.pg_left {background: transparent url(../images/pg_left.png) no-repeat scroll 5px 7px;}.pg_left:hover {background: transparent url(../images/hover.png) no-repeat scroll right 0;}.grid-960 .pg_left{top:75px;left:13px;margin-top:-25px;}.grid-1180 .pg_left{top:95px;left:20px;margin-top:-25px;}.grid-1410 .pg_left{top:115px;left:25px;margin-top:-25px;}

View Code

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4956293.html有问题欢迎与我讨论,共同进步。