首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery控制左右箭头滚动图片列表的实例

Posted in Javascript onMay 20, 2013 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
 <title>jq控制左右箭头滚动图片列表</title>
 <style type="text/css">
    *{ margin:0; padding:0;font-size: 12px;}
    ul{ list-style:none;}
     .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}
     #slider_pic{ width: 630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}
     .prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}
     .next{right: 20px;}
     .no_click{background-color: #808080;}
     #slider_pic li{float: left;margin-right: 10px;}
     #slider_pic ul{position: absolute;left: 0;} </style>
     <script type="text/javascript">
         $(function(){
             var oPic=$('#slider_pic').find('ul');
             var oImg=oPic.find('li');
             var oLen=oImg.length;
             var oLi=oImg.width();
             var prev=$("#prev");
             var next=$("#next");
           oPic.width(oLen*210);//计算总长度
             var iNow=0;
             var iTimer=null;
             prev.click(function(){
                  if(iNow>0){  
                   iNow--;
                  }
                 ClickScroll();
             })
             next.click(function(){
                 if(iNow<oLen-3){ 
                     iNow++
                 }
                 ClickScroll();
             })
             function ClickScroll(){
                 iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');
                 iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");
                 oPic.animate({left:-iNow*210})
             }
         })
 
     </script>
 </head>
 <body>
     <div class="slider">
         <span class="prev no_click" id="prev"><<</span>
         <span class="next " id="next">>></span>
       <div id="slider_pic">
         <ul>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_01.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_02.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_03.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_04.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_05.jpg" width="200" height="130" /></li>
            
          </ul>
       </div>
    </div>
 </body>
 </html>

jquery控制左右箭头滚动图片列表的实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息（JavaScript代码）
Nov 20 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
浅谈javascript回调函数
Dec 07 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
详解AngularJS Filter（过滤器）用法
Dec 28 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
AngularJS实现表格的增删改查（仅限前端）
Jul 04 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 #Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 #Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 #Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 #Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 #Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 #Javascript
AN-LP1(1) YB-230(1) 死亡搁浅(1) BCLer(1) ICF-903L(1) AGC(1) 原神(1) 74HC4066(1) FS1016(1) 大话西游(1)
You might like
php socket客户端及服务器端应用实例
2014/07/04 PHP
高质量PHP代码的50个实用技巧必备（下）
2016/01/22 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
利用javascript查看html源文件
2006/11/08 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery实用密码强度检测
2017/03/02 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python可变参数用法实例分析
2017/04/02 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python集合操作方法详解
2020/02/09 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
英国领先的在线鱼贩：The Fish Society
2020/08/12 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
应用数学自荐书范文
2013/11/24 职场文书
中学自我评价
2014/01/31 职场文书
模具专业自荐信
2014/05/29 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
励志语录：时光飞逝，请学会珍惜所有的人和事
2020/01/16 职场文书