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


Posted in Javascript onJanuary 29, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
Js切换功能的简单方法
Nov 23 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 #Javascript
javascript面向对象程序设计(一)
Jan 29 #Javascript
jquery调取json数据实现省市级联的方法
Jan 29 #Javascript
JavaScript中实现单体模式分享
Jan 29 #Javascript
angular简介和其特点介绍
Jan 29 #Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 #Javascript
浅谈javascript中自定义模版
Jan 29 #Javascript
You might like
用PHP发电子邮件
2006/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jquery中radio checked问题
2015/03/16 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python中的tcp示例详解
2018/12/09 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
个人找工作的自我评价
2013/10/17 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
条幅标语大全
2014/06/20 职场文书
中学生检讨书范文
2014/11/03 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
如何使用Python实现一个简易的ORM模型
2021/05/12 Python