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异步提交表单实例
May 30 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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
php实例分享之二维数组排序
2014/05/15 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php中JSON的使用与转换
2015/01/14 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Django实现文件上传下载
2019/10/06 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
导致python中import错误的原因是什么
2020/07/01 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
经销商年会策划方案
2014/05/29 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
老公保证书怎么写
2015/02/26 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript