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实现文字打印动态效果
Apr 21 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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教程 预定义变量
2009/10/23 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Vue的Options用法说明
2020/08/14 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
用python写爬虫简单吗
2020/07/28 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
运动会稿件50字
2014/02/17 职场文书
高一军训决心书
2015/02/05 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书