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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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+MySql编写聊天室
2006/10/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Flask之flask-session的具体使用
2018/07/26 Python
对Django外键关系的描述
2019/07/26 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python如何提升爬虫效率
2020/09/27 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
什么是索引指示器
2012/08/20 面试题
学术会议主持词
2014/03/17 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
培训通知书模板
2015/04/17 职场文书
农业项目合作意向书
2015/05/08 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Python中使用subprocess库创建附加进程
2021/05/11 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python