欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于jquery实现左右按钮点击的图片切换效果_jquery

程序员文章站 2022-04-21 09:42:38
...
jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果。

一、最终效果

基于jquery实现左右按钮点击的图片切换效果_jquery

二、功能分析
1、需求分析
点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片。初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示。
2、html结构分析

 
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery

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

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

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

//需要追加的li节点个数
var addli = 0;
//一组切换3个li
var 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"+html+""); 
   }
   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

接下来幻灯切换。这里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 

三、实例代码
1、用到图片

基于jquery实现左右按钮点击的图片切换效果_jquery

基于jquery实现左右按钮点击的图片切换效果_jquery

基于jquery实现左右按钮点击的图片切换效果_jquery基于jquery实现左右按钮点击的图片切换效果_jquery

基于jquery实现左右按钮点击的图片切换效果_jquery基于jquery实现左右按钮点击的图片切换效果_jquery基于jquery实现左右按钮点击的图片切换效果_jquery

2、完整代码



热门活动

  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery
  • 基于jquery实现左右按钮点击的图片切换效果_jquery

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;}

以上就是本文的全部内容,希望对大家的学习有所帮助。