jquery控制左右箭头滚动图片列表的实例。
代码如下:
<!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://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_01.jpg" width="200" height="130" /></li>

            <li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_02.jpg" width="200" height="130" /></li>

            <li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_03.jpg" width="200" height="130" /></li>

            <li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_04.jpg" width="200" height="130" /></li>

            <li><img src="http://www.jbxue.com/cnblogs_com/hxh-hua/478335/o_05.jpg" width="200" height="130" /></li>

           

          </ul>

       </div>

    </div>

 </body>

 </html>

jquery控制左右箭头滚动图片列表的更多相关文章

  1. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  2. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  3. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  4. jQ图片列表光标移动动画

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 效果展示: http://hovertree.com/texiao/jquery/88/ 效果图如下: 其中的jQ ...

  5. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  6. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  8. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  9. jQuery.hhNewSilder 滚动图片插件

    /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

随机推荐

  1. careercup-C和C++

    13.1 用C++写个方法,打印输出文件的最后K行. 解答: 一种方法是打开文件两次,第一次计算文件的行数N,第二次打开文件,跳过N-K行, 然后开始输出.如果文件很大,这种方法的时间开销会非常大. ...

  2. [Effective C++ --022]将成员变量声明为private

    这一章并没有什么太多的内容,作者无非想告诉我们一件事:成员变量应该是private. 为此,他列举了以下的理由: 1.成员函数来返回成员变量是非常高效: 2.protected成员变量并不比publi ...

  3. Android高手进阶教程(七)之----Android 中Preferences的使用!

    http://blog.csdn.net/Android_Tutor/article/details/5531849 大家好,我们这一节讲的是Android Preferences 的学习,Prefe ...

  4. C# 之 后台加载图片Image

    命名空间为 System.Drawing ,Image.FromFile  一旦使用后,对应的文件在一直调用其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图 ...

  5. java validator的原理与使用

    http://developer.51cto.com/art/201104/253257_1.htm ava EE 6核心特征:Bean Validation特性概述(2) 2011-04-02 14 ...

  6. appscan 安全漏洞修复办法

    appscan 安全漏洞修复办法http://www.automationqa.com/forum.php?mod=viewthread&tid=3661&fromuid=21

  7. Cadence PCB层的概念

    Slikscreen_Top  :顶层丝印层 Assemly_Top    :装配层,就是元器件含铜部分的实际大小,用来产生元器件的装配图.我自己感觉这一层如果对于贴片的元器件,如电容,就是两个贴片铜 ...

  8. JAXB - Annotations, Annotations for the Schema: XmlSchema

    This annotation can only be used with a package. It defines parameters that are derived from the xsd ...

  9. C#面试基础问题

    传入某个属性的set方法的隐含参数的名称是什么? value,它的类型和属性所声名的类型相同. 如何在C#中实现继承? 在类名后加上一个冒号,再加上基类的名称. C#支持多重继承么? 不支持.可以用接 ...

  10. 20160526-20160531mybatis入门进阶

    mybatis第二天  高级映射 查询缓存 和spring整合 课程复习: mybatis是什么? mybatis是一人持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己去编 ...