jQuery可以制作出与Flash媲美的动画效果，这点绝对毋庸置疑，本文将通过实例演示一个左右按钮点击的图片切换效果。
一、最终效果
二、功能分析
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="/UploadFiles/2021-04-02/activity01-1410.jpg">#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<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="/UploadFiles/2021-04-02/activity01-1410.jpg">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;}以上就是本文的全部内容，希望对大家的学习有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“基于jquery实现左右按钮点击的图片切换效果”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。