使用jQuery实现鼠标点击左右按钮滑动切换_网络技术

使用jQuery实现鼠标点击左右按钮滑动切换

发布时间 - 2026-01-11 02:39:08 点击率：次

使用jQuery实现点击左右滑动切换特效：

HTML代码如下：

<!--整体背景div-->
 <div class="warp">
  <!--中间内容div-->
 <div class="divContent">
   <div class="content">
    <ul class="contentUl">
     <li>
     <img src="/JS1/img/1.jpg" />
      <span>生命如歌，春天似梦 </span>
      <hr />
      <p>生命如歌，春天似梦，初春更是如诗如画。春似花季靓女，让人悸动，春似那雍容少妇，令人憧憬</p>
     </li>
     <li id="second">
      <img src="/JS1/img/2.jpg" />
      <span>如花的季节，赞扬 </span>
      <hr />
      <p>一切的生命力开始复苏，温暖如我，正是如花的季节，不是吗？</p>
     </li>
     <li>
      <img src="/JS1/img/3_1.jpg" />
      <span>梦想，不休不止</span>
      <hr />
      <p>畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。</p>
     </li>
     <li>
      <img src="/JS1/img/4.jpg" />
      <span>时间在叶子的摆动里</span>
      <hr />
      <p>时间会消磨一切的，她会让我们忘记的。突然想：如果我们忘记了时间，是不是想忘掉的就都能忘掉。</p>
     </li>
     <li>
      <img src="/JS1/img/5.jpg" />
      <span>异乡的海韵,落日的余辉</span>
      <hr />
      <p>每个人或许都有一个愿望，希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下，落日余晖的海滩中，细数彼此生活的点点滴滴。</p>
     </li>
     <li>
      <img src="/JS1/img/6.jpg" />
      <span>城市夜，一个静谧的夜</span>
      <hr />
      <p>城市夜，一个静谧的夜。城市里，寒风瑟瑟。酒吧灯红酒绿，这，才是夜市的开始。</p>
     </li>
    </ul>
   </div>
   <!--向左按钮-->
   <div class="leftBtn"><img src="/JS1/img/left.png" /></div>
   <!--向右按钮-->
   <div class="rightBtn"><img src="/JS1/img/right.png" /></div>
  </div>
 </div>

js代码如下：

 $(document).ready(function(){ 
  //向左按钮点击事件
  var index = 0;
  var liLen;
  $(".leftBtn").click(function(){
   index++;
   liLen = $(".content ul.contentUl li").length; //目前长度返回值为6
   if(index >= 4)
   {
    $(".content ul.contentUl").stop();
    alert("已经到达最后一页！");
    index = 3;
   }else{
    if(index == 1)
    {
     $(".content ul.contentUl").animate({left:-index*330},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*305},700);
    }
   }
  });
  //向右按钮点击事件
  $(".rightBtn").click(function(){
   if(index == 0)
   {
    $(".content ul.contentUl").stop();
    alert("这是第一页，不能再往前翻了！");
   }else{
    index--;
    if(index == 0)
    {
     $(".content ul.contentUl").animate({left:-40},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*310},700);
    }
   }
  });
 });

以上所述是小编给大家介绍的使用jQuery实现鼠标点击左右按钮滑动切换，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jquery实现左右滑动切换 # jquery实现点击左右按钮切换图片 # 基于jquery实现左右按钮点击的图片切换效果 # jquery带有索引按钮且自动轮播切换特效代码分享 # jQuery幻灯片特效代码分享鼠标滑过按钮时切换（2） # Jquery幻灯片特效代码分享鼠标点击按钮时切换(1) # 基于jquery插件制作左右按钮与标题文字图片切换效果 # jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换 # jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果 # jQuery实现简单的按钮颜色变化 # 如花 # 小编 # 如歌 # 的人 # 这是 # 春天 # 让人 # 都有 # 让我们 # 才是 # 在此 # 每个人 # 都能 # 给大家 # 夕阳西下 # 灯红酒绿 # 她会 # 初春 # 翻了 # 第一页

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：nginx负载均衡有什么用

下一篇：有域名有空间如何建站？域名解析与建站步骤详解

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：nginx负载均衡有什么用

下一篇：有域名有空间如何建站？域名解析与建站步骤详解