jquery实现点击左右按钮切换图片


Posted in jQuery onJanuary 27, 2021

本文实例为大家分享了jquery点击左右按钮切换图片的具体代码,供大家参考,具体内容如下

当点击了右边的按钮后,图片向左移动,同理左边按钮。

jquery实现点击左右按钮切换图片

css样式此处省略......直接进入到js代码中

<div class="down-down-div">     
  <div class="pics-frame">
   
    <div class="frame-first">
  <!--第一个div -->
  <div id="left_btn" class="pic-button-left">
    <!--“ < ”按钮-->
    <div style="padding-top: 70px;">
      <
        </div>
   </div>
 </div>
 <!--第二个div -->
 <div class="frame-second">
 
  <div class="frame-second-up">
  <div style="float: left;font-size: 10px;">
      本车型适用的精品配件:
  </div>
  </div>
 
  <div class="frame-second-down">
 
  <div class="frame-second-down-down">
  <!--图片集-->
  <div class="frame-second-down-uppics">
  <img id="img0" style="width: 100%;height: 100%;" src="./images/accessories/t500.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   挡泥板
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--图片集-->
  <div class="frame-second-down-uppics">
   <img id="img1" style="width: 100%;height: 100%;" src="./images/accessories/t501.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   车窗侧雨刷
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--图片集-->
  <div class="frame-second-down-uppics">
   <img id="img2" style="width: 100%;height: 100%;" src="./images/accessories/t502.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   车牌窗饰框
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--图片集-->
  <div class="frame-second-down-uppics">
   <img id="img3" style="width: 100%;height: 100%;" src="./images/accessories/t600.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   地毯(七座)
  </div>
  </div>
 </div>
 
 </div>
 
 <!--第三个div -->
 <div id="right_btn" class="frame-third">
  <!--“ > ”按钮-->
  <div class="pic-button-right">
  <div style="padding-top: 70px;">
  >
  </div>
 </div>
 </div>
 
  </div>
</div>
 
 
<!--隐藏状态的图片集-->
<div id="imgs">
  <img src="images/accessories/t500.png" style="display: none;" />
 <img src="images/accessories/t501.png" style="display: none;" />
 <img src="images/accessories/t502.png" style="display: none;" />
 <img src="images/accessories/t600.png" style="display: none;" />
 <img src="images/accessories/t602.png" style="display: none;" />
  <img src="images/accessories/t603.png" style="display: none;" />
 <img src="images/accessories/t604.png" style="display: none;" />
 <img src="images/accessories/t605.png" style="display: none;" />
 <img src="images/accessories/t606.png" style="display: none;" />
 <img src="images/accessories/t607.png" style="display: none;" />
 <img src="images/accessories/t608.png" style="display: none;" />
</div>
 
 
$(function() {
 var images = [];
 var imgs = $("#imgs img");
 var index = 0; 
 //展示的图片,长度为4
 var displayLength = $(".frame-second-down img").length;  
 for(var i = 0; i < imgs.length; i++) { 
    images.push(imgs[i]);
 }
 
  //相册左边按钮
  $("#left_btn").click(function() {   
    if(index == 0) { 
    alert("已经是第一张照片啦!");
 return;
 
  } else {
 
  for(var j = 0; j < displayLength; j++) {
    $("#img" + j).attr("src", images[index - 1 + j].src);    
    }
   
    index--;
 }
 })
  
//相册右边按钮
  
$("#right_btn").click(function() {    
  if(index == (imgs.length - displayLength)) {   
    alert("已经是最后一张图片了!");
    return 0;
  } else {   
    for(var j = 0; j < displayLength; j++) {   
      $("#img" + j).attr("src", images[j + 1 + index].src);
   
    }
   
    index++;
  
  }
  
  })
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

jQuery 相关文章推荐
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php项目打包方法
2008/02/18 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
js实现select下拉框选择
2020/01/11 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python操作redis的方法
2015/07/07 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Pycharm修改python路径过程图解
2020/05/22 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
建材业务员岗位职责
2013/12/08 职场文书
《尊严》教学反思
2014/02/11 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
Mysql如何查看是否使用到索引
2022/12/24 MySQL