• 售前

  • 售后

热门帖子
入门百科

jquery实现点击左右按钮切换图片

[复制链接]
T七醫生 显示全部楼层 发表于 2021-10-25 19:35:38 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了jquery点击左右按钮切换图片的详细代码,供各人参考,详细内容如下
当点击了右边的按钮后,图片向左移动,同理左边按钮。

css样式此处省略......直接进入到js代码中
  1. <div class="down-down-div">     
  2.   <div class="pics-frame">
  3.    
  4.     <div class="frame-first">
  5.   <!--第一个div -->
  6.   <div id="left_btn" class="pic-button-left">
  7.     <!--“ < ”按钮-->
  8.     <div style="padding-top: 70px;">
  9.       <
  10.         </div>
  11.    </div>
  12. </div>
  13. <!--第二个div -->
  14. <div class="frame-second">
  15.   <div class="frame-second-up">
  16.   <div style="float: left;font-size: 10px;">
  17.    &nbsp;&nbsp;&nbsp;本车型适用的精品配件:
  18.   </div>
  19.   </div>
  20.   <div class="frame-second-down">
  21.   <div class="frame-second-down-down">
  22.   <!--图片集-->
  23.   <div class="frame-second-down-uppics">
  24.   <img id="img0" style="width: 100%;height: 100%;" src="./images/accessories/t500.png" />
  25.   </div>
  26.   <!--文字-->
  27.   <div class="frame-second-down-downtext">
  28.    挡泥板
  29.   </div>
  30.   </div>
  31.   <div class="frame-second-down-down">
  32.   <!--图片集-->
  33.   <div class="frame-second-down-uppics">
  34.    <img id="img1" style="width: 100%;height: 100%;" src="./images/accessories/t501.png" />
  35.   </div>
  36.   <!--文字-->
  37.   <div class="frame-second-down-downtext">
  38.    车窗侧雨刷
  39.   </div>
  40.   </div>
  41.   <div class="frame-second-down-down">
  42.   <!--图片集-->
  43.   <div class="frame-second-down-uppics">
  44.    <img id="img2" style="width: 100%;height: 100%;" src="./images/accessories/t502.png" />
  45.   </div>
  46.   <!--文字-->
  47.   <div class="frame-second-down-downtext">
  48.    车牌窗饰框
  49.   </div>
  50.   </div>
  51.   <div class="frame-second-down-down">
  52.   <!--图片集-->
  53.   <div class="frame-second-down-uppics">
  54.    <img id="img3" style="width: 100%;height: 100%;" src="./images/accessories/t600.png" />
  55.   </div>
  56.   <!--文字-->
  57.   <div class="frame-second-down-downtext">
  58.    地毯(七座)
  59.   </div>
  60.   </div>
  61. </div>
  62. </div>
  63. <!--第三个div -->
  64. <div id="right_btn" class="frame-third">
  65.   <!--“ > ”按钮-->
  66.   <div class="pic-button-right">
  67.   <div style="padding-top: 70px;">
  68.   >
  69.   </div>
  70. </div>
  71. </div>
  72.   </div>
  73. </div>
  74. <!--隐藏状态的图片集-->
  75. <div id="imgs">
  76.   <img src="images/accessories/t500.png" style="display: none;" />
  77. <img src="images/accessories/t501.png" style="display: none;" />
  78. <img src="images/accessories/t502.png" style="display: none;" />
  79. <img src="images/accessories/t600.png" style="display: none;" />
  80. <img src="images/accessories/t602.png" style="display: none;" />
  81.   <img src="images/accessories/t603.png" style="display: none;" />
  82. <img src="images/accessories/t604.png" style="display: none;" />
  83. <img src="images/accessories/t605.png" style="display: none;" />
  84. <img src="images/accessories/t606.png" style="display: none;" />
  85. <img src="images/accessories/t607.png" style="display: none;" />
  86. <img src="images/accessories/t608.png" style="display: none;" />
  87. </div>
  88. $(function() {
  89. var images = [];
  90. var imgs = $("#imgs img");
  91. var index = 0;
  92. //展示的图片,长度为4
  93. var displayLength = $(".frame-second-down img").length;  
  94. for(var i = 0; i < imgs.length; i++) {
  95.     images.push(imgs[i]);
  96. }
  97.   //相册左边按钮
  98.   $("#left_btn").click(function() {   
  99.     if(index == 0) {
  100.     alert("已经是第一张照片啦!");
  101. return;
  102.   } else {
  103.   for(var j = 0; j < displayLength; j++) {
  104.     $("#img" + j).attr("src", images[index - 1 + j].src);   
  105.     }
  106.    
  107.     index--;
  108. }
  109. })
  110.   
  111. //相册右边按钮
  112.   
  113. $("#right_btn").click(function() {   
  114.   if(index == (imgs.length - displayLength)) {   
  115.     alert("已经是最后一张图片了!");
  116.     return 0;
  117.   } else {   
  118.     for(var j = 0; j < displayLength; j++) {   
  119.       $("#img" + j).attr("src", images[j + 1 + index].src);
  120.    
  121.     }
  122.    
  123.     index++;
  124.   
  125.   }
  126.   
  127.   })
  128. })
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作