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 如果改变span标签的是否隐藏属性
Oct 06 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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 Mysql编程之高级技巧
2008/08/27 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
actionscript与javascript的区别
2011/05/25 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Python列表计数及插入实例
2014/12/17 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python descriptor(描述符)的实现
2020/11/15 Python
详解rem 适配布局
2018/10/31 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
四好少年事迹材料
2014/01/12 职场文书
社团活动总结格式
2014/08/29 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
工程部岗位职责范本
2015/04/11 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS