Web Front-end
JS Tutorial
Implement image switching effect on left and right button clicks based on jquery_jquery
Implement image switching effect on left and right button clicks based on 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="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个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="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>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;}
以上就是本文的全部内容，希望对大家的学习有所帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1317
25
1268
29
1243
24
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
JavaScript Engines: Comparing Implementations
Apr 13, 2025 am 12:05 AM
Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
JavaScript: Exploring the Versatility of a Web Language
Apr 11, 2025 am 12:01 AM
JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
