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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery插件实现图片悬浮
Apr 16 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
实现jquery放大镜的两种方法
2018/02/22 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
python批量制作雷达图的实现方法
2016/07/26 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python字符串判断密码强弱
2020/03/18 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
恒华伟业笔试面试题
2015/02/26 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
庆祝国庆节标语
2014/10/09 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
作弊检讨书
2015/01/27 职场文书