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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
jQuery实现影院选座订座效果
Apr 13 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
Protoss建筑一览
2020/03/14 星际争霸
Admin generator, filters and I18n
2011/10/06 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
itchat接口使用示例
2017/10/23 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL