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


Posted in jQuery onAugust 04, 2017

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

使用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实现拖动效果的实例代码
Jun 25 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
You might like
谈谈PHP的输入输出流
2007/02/14 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
php的debug相关函数用法示例
2016/07/11 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
js 内存释放问题
2010/04/25 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Python中print函数简单使用总结
2019/08/05 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 多线程中join()的作用
2020/10/29 Python
python中append函数用法讲解
2020/12/11 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
教师演讲稿范文
2014/01/08 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
采购内勤岗位职责
2015/04/13 职场文书
管理失职检讨书
2015/05/05 职场文书
电力培训学习心得体会
2016/01/11 职场文书
开网店计划分析
2019/07/30 职场文书
Django实现翻页的示例代码
2021/05/24 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python