Heim Web-Frontend js-Tutorial Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery

Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery

May 16, 2016 pm 03:32 PM

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="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>
Nach dem Login kopieren

#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();

Nach dem Login kopieren

上面是判断得到需要追加的个数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)});
  }
Nach dem Login kopieren

现在准备工作已经完成了。接下来就是给按钮添加响应事件。在幻灯切换时涉及到左右按钮的显示和隐藏,所以先说这个按钮显示功能,将此分装成一个函数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();
   }
  }
Nach dem Login kopieren

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

Nach dem Login kopieren

三、实例代码
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>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

Wer bekommt mehr Python oder JavaScript bezahlt? Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen? Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen? Mar 18, 2025 pm 03:17 PM

In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

TypeScript für Anfänger, Teil 2: Grundlegende Datentypen TypeScript für Anfänger, Teil 2: Grundlegende Datentypen Mar 19, 2025 am 09:10 AM

Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript

See all articles