使用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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery实现手风琴案例
May 04 jQuery
JQuery表单元素取值赋值方法总结
May 12 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
星际争霸秘籍
2020/03/04 星际争霸
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php实现cookie加密的方法
2015/03/10 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
Jquery选中或取消radio示例
2013/09/29 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
数组越界问题
2015/10/21 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
欢迎领导标语
2014/06/27 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
怎样写家长意见
2015/06/04 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Go 语言结构实例分析
2021/07/04 Golang
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL