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>
Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
You might like
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python缩进区别分析
2014/02/15 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python探索之ModelForm代码详解
2017/10/26 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python小白切忌乱用表达式
2020/05/29 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
生物科学专业个人求职信范文
2013/12/07 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python