首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 27, 2021

jQuery可以制作出与Flash媲美的动画效果，这点绝对毋庸置疑，本文将通过实例演示一个左右按钮点击的图片切换效果。

一、最终效果

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

二、功能分析

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、用到图片

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

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

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

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

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

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery 回调函数（callback）的使用和基础
Feb 26 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
js图片轮播效果实现代码
Apr 18 #Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 #Javascript
javascript发送短信验证码实现代码
Nov 12 #Javascript
javascript倒计时效果实现
Nov 12 #Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
进销存(1) csv(4) Coroutine(1) greenlet(1) list(1) pytest(3) gevent(1) enumerate(1) find(1) Excel(4)
You might like
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
python中as用法实例分析
2015/04/30 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
英国儿童图书网站：Scholastic
2017/03/26 全球购物
美国办公用品折扣网站：Shoplet.com
2019/11/24 全球购物
爱情检讨书大全
2014/01/21 职场文书
幼儿教师考核制度
2014/01/25 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
购房委托书范本
2014/09/18 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers