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-中等难度 17.12

    17.12 设计一个算法,找出数组中两数之和为指定值的所有整数对. 解答 时间复杂度O(n)的解法 我们可以用一个哈希表或数组或bitmap(后两者要求数组中的整数非负)来保存sum-x的值, 这样我 ...

  2. 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联

    概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...

  3. 深入探索 Java 热部署--转

    在 Java 开发领域,热部署一直是一个难以解决的问题,目前的 Java 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加载才能完成更新操作.本文将探索如何在不破 ...

  4. window.external.notify() 与 UglifyJS 压缩优化冲突

    近期研究了一下 UglifyJs 对 JS 代码的压缩,发现 UglifyJS 压缩后,无法调用 window.external.notify() 方法,JS 代码如下: function MyNot ...

  5. JUC全景图

    JUC 并发编程全景图如下:

  6. BFC引发的关于position的思考

    BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, ...

  7. OAuth2集成——《跟我学Shiro》

    http://jinnianshilongnian.iteye.com/blog/2038646 目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放 ...

  8. Azure Redis Cache作为ASP.NET Session状态提供程序

    从上一篇博客<使用Azure Redis Cache>我们已经可以创建并使用Redis Cache为我们服务了. 作为Web开发者,我们都知道Session状态默认是保存在内存中的,它的优 ...

  9. vs2010打开vs2012的sln文件

    1.找到**.sln文件,然后选择用记事本打开. 2.最前面找到“Microsoft Visual Studio Solution File, Format Version 12.00  # Visu ...

  10. 20160504-hibernate入门

    关系型数据库与面向对象 模型不匹配(阻抗不匹配) Java面向对象语言,对象模型,其主要概念有:继承.关联.多态等:数据库是关系模型,其主要概念有:表.主键.外键等. 解决办法: 1使用JDBC手工转 ...