首页
所有分类
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调用WebService的示例
Apr 07 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Bootstrap入门书籍之（四）菜单、按钮及导航
Feb 17 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
scrapy(1) localStorage(1) 横向滚动(1) virtualenv(1) 反射(1) BottomSheetDialog(1) 注解(1) Postman(1) 加载异常(1) DeOldify(1)
You might like
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php使用GeoIP库实例
2014/06/27 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
vue实现打地鼠小游戏
2020/08/21 Javascript
整理Python中的赋值运算符
2015/05/13 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
想学python 这5本书籍你必看！
2018/12/11 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python进程，多进程，获取进程id，给子进程传递参数操作示例
2019/10/11 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python urllib.request对象案例解析
2020/05/11 Python
植物选择：Botanic Choice
2017/02/15 全球购物
基本款天堂：Everlane
2017/05/13 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
医学生自荐信范文
2013/12/03 职场文书
旅游网创业计划书
2014/01/31 职场文书
服装店营销方案
2014/03/10 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2015年公司工作总结
2015/04/25 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js