首页
所有分类
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操纵Cookie实现购物车程序
Nov 23 Javascript
js利用div背景，做一个竖线的效果。
Nov 22 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
开幕词(63) 汇报材料(247) 导游词(322) 工作总结(1972) 计划(88) 口号(179) 闭幕词(9) 党团范文(807) 慰问信(53) 报告(147)
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
php session 检测和注销
2009/03/16 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
微信小程序视图容器（swiper）组件创建轮播图
2020/06/19 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
Python实现读取Properties配置文件的方法
2018/03/29 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
英国泰坦旅游网站：全球陪同游览，邮轮和铁路旅行
2016/11/29 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
党员十八大心得体会
2014/09/12 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
简易离婚协议书（范本）
2014/10/25 职场文书
2015年体育部工作总结
2015/04/02 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
2016党校培训心得体会
2016/01/07 职场文书
七年级作文之下雨天
2019/12/23 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL