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. [JavaScript]'this'详解

    http://blog.csdn.net/sodino/article/details/51318565

  2. html5中viewport使用

    html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...

  3. [010]Try块和异常处理

    Throw表达式和try块的定义如下: 1. throw 表达式,错误检测部分使用这种表达式来说明遇到了不可处理的错误.可以说,throw 引发了异常条件. 2. try 块,错误处理部分使用它来处理 ...

  4. 第一章 02 谈谈static关键词

    引文一下吧 http://blog.csdn.net/hackbuteer1/article/details/7487694 一.static在C语言中的含义 1.静态变量作用范围在一个文件内,程序开 ...

  5. Android自定义标题TitleView

    Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需 ...

  6. 谈谈项目中遇到的各种iOS7适配问题

    由于我的项目要适配到iOS7.1, 而现在已经是9时代了,在实际工作中我也是遇到了各种奇葩的坑,所以我想尽快把遇到的iOS7适配问题和解决方案分享出来,以后这些东西可能就用处不大了. 1.字体问题 i ...

  7. Android_TextVIew_flow_ex1

    xml文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  8. [转]ASP.NET MVC Select List Example

    本文转自:http://www.aspnetmvcninja.com/views/asp-net-mvc-select-list-example Select lists are a great wa ...

  9. nodejs中npm工具自身升级

    npm官方地址:https://www.npmjs.com/ npm在github上的地址:https://github.com/npm/npm 目前(截止2016-03-15)npm最新版本为3.8 ...

  10. webstorm添加vue模板支持

    字谕纪泽: 八月一日,刘曾撰来营,接尔第二号信并薛晓帆信,得悉家中四宅平定,至以为尉. 汝读”四书”无甚心得,由不能虚心涵泳,切己体察.朱子教人读书之法,此二语最为精当.尔现读”离娄”,即如“离娄”首 ...