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. Gradle的安装与配置

    Gradle的下载地址:http://gradle.org/gradle-download/ Tips:要先安装JDK并配置其环境变量. 下载完成后将里面的文件解压出来,如下图所示: 添加一个名称为G ...

  2. Apache的rewrite规则详细介绍

    Apache的rewrite规则详细介绍 发布日期:2008-09-02 16:16 来源: 作者: 点击:7044 rewrite标志 R[=code](force redirect) 强制外部重定 ...

  3. Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色

    自从IOS7后UINavigationBar的一些属性的行为发生了变化.你可以在下图看到: 现在,如果你要修改它们的颜色,用下面的代码: self.navigationController.navig ...

  4. Java基础知识强化之IO流笔记69：Properties练习之 判断文件中是否有指定的键，如果有就修改值的案例

    1. 我有一个文本文件(user.txt),我知道数据是键值对形式的,但是不知道内容是什么. 请写一个程序判断是否有"lisi"这样的键存在,如果有就改变其值为"100& ...

  5. IPC：shared memory

    #include <stdio.h> #include <sys/shm.h> #include <sys/stat.h> int main () { int se ...

  6. fedora 23中配置nfs-server

    fedora 23中配置nfs-server */--> fedora 23中配置nfs-server Table of Contents 1. 产考资料 2. NFS配置文件 2.1. /et ...

  7. hdu 1093 A+B for Input-Output Practice (V)

    A+B for Input-Output Practice (V) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3276 ...

  8. 目前项目wordpress插件记录

    Restrict User Content WordPress 后台只显示当前登录用户的文章.页面和媒体 Client Dash 可以根据不同的角色生成不同的后台的菜单

  9. APK downloader

    APK Downloader Android apk (2016-08-25发现) Apk pure 好像提供免费的FQ工具哟 发现一个Android richtext RichEditor for ...

  10. winform 上传

    public class ImitateSelectFile { public void Select(HtmlElement htmlEle, string fileFullPath) { html ...