js实现点击左右按钮轮播图片效果实例

2019-12-18,,,,,,,,

本文实例讲述了js实现点击左右按钮轮播图片效果的方法。分享给大家供大家参考。具体实现方法如下:

$(function () { 
  var index = 1; 
  var pPage = 1; 
  var $v_citemss = $(".citemss"); 
  var $v_show = $v_citemss.find("ul"); 
  v_width = $v_citemss.width();//图片展示区外围div的大小 
 
  //注:若为整数,前边不能再加var,否则会被提示underfine 
  p_count = $v_citemss.find("li").length;//获取此处li的个数 
  $(".slideprev1").click(function () { 
    if (!$v_show.is(":animated")) { 
      if (pPage == index) { 
        $v_show.animate({ right: '0px' }, "3000"); 
        pPage = 4; 
      } else { 
        $v_show.animate({right: '-=' + v_width },"3000"); 
        pPage--; 
      } 
    } 
  }); 
 
  $(".slidenext").click(function () { 
    if (!$v_show.is(":animated")) { 
      if (pPage == p_count) { 
        $v_show.animate({ left: '0px' }, "3000"); 
        pPage = 1; 
      } else { 
        $v_show.animate({ left: '-=' + v_width }, "3000"); 
        pPage++; 
      } 
    } 
  }); 
});

对于鼠标悬浮上去,下方出现横条描述、左右出现按钮等效果,完全可以用css实现,不需要使用js来实现了。

具体操作:css中绝对或相对定位,left,right或bottom为负数,鼠标悬浮上去后,分别正确显示,再设置一下transition,作为动画的缓冲即可。

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

  • 原生js实现轮播图的示例代码
  • js实现支持手机滑动切换的轮播图片效果实例
  • js实现轮播图的完整代码
  • JS实现左右无缝轮播图代码
  • JS轮播图实现简单代码
  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
  • 原生js实现无限循环轮播图效果
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图
  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
  • 原生JS无缝滑动轮播图

《js实现点击左右按钮轮播图片效果实例.doc》

下载本文的Word格式文档,以方便收藏与打印。