首页
所有分类
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 相关文章推荐
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue购物车插件编写代码
Nov 27 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
任命书(51) 工作总结(1972) 协议书(568) 检举信(8) 报告(147) 口号(179) 汇报材料(247) 说明书(38) 党团范文(807) 标语(336)
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
xml文档转换工具，附图表例子(hta)
2010/11/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python导入坐标点的具体操作
2019/05/10 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python PIL库图片灰化处理
2020/04/07 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Charlotte Tilbury澳大利亚官网：英国美妆品牌
2018/10/05 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
2019经典广告词集锦！
2019/07/02 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL