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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
javascript中new关键字详解
Dec 14 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 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在线打包程序源码
2008/07/27 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
解析Python编程中的包结构
2015/10/25 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python 自定义装饰器实例详解
2019/07/20 Python
python实现超市商品销售管理系统
2019/10/25 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
文化活动实施方案
2014/03/28 职场文书
理财学专业自荐书
2014/06/28 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
企业法人授权委托书
2014/09/25 职场文书
工厂标语大全
2014/10/06 职场文书
工作表扬信
2015/01/17 职场文书
西柏坡观后感
2015/06/08 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android