Web-Frontendjs-TutorialImplementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery
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="/static/imghwm/default1.png" data-src="images/activity01-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li> <li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity02-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li> <li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity03-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li> <li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity03-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li> <li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity02-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li> </ul> </div>
#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 id="热门活动">热门活动</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="/static/imghwm/default1.png" data-src="images/activity01-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li>
<li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity02-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li>
<li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity03-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li>
<li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity03-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></a></li>
<li><a href="javascript:;"><img src="/static/imghwm/default1.png" data-src="images/activity02-1410.jpg" class="lazy" alt="Implementieren Sie den Bildwechseleffekt bei Klicks mit der linken und rechten Maustaste basierend auf jquery_jquery" ></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>
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;}
以上就是本文的全部内容，希望对大家的学习有所帮助。
JavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AMUnterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.
Jenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AMZu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.
Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AMIch habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen
So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AMDieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten
JavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AMJavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.
Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AMZu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.
Entmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AMJavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.
Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AMPython eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Dreamweaver Mac
Visuelle Webentwicklungstools
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
