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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现轮播图特效
Apr 12 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
javascript正则表达式总结
2016/02/29 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python AES加密模块用法分析
2017/05/22 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
车间组长岗位职责
2013/12/20 职场文书
教师绩效工资方案
2014/02/01 职场文书
优秀求职信
2014/05/29 职场文书
主题团日活动总结
2014/06/25 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang