zoukankan      html  css  js  c++  java
  • jquery控制左右箭头滚动图片列表

    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{ 760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}
         #slider_pic{  630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}
         .prev,.next{position: absolute; 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>
  • 相关阅读:
    Windows XP下 Android开发环境 搭建
    Android程序的入口点
    在eclipse里 新建android项目时 提示找不到proguard.cfg
    64位WIN7系统 下 搭建Android开发环境
    在eclipse里 新建android项目时 提示找不到proguard.cfg
    This Android SDK requires Android Developer Toolkit version 20.0.0 or above
    This Android SDK requires Android Developer Toolkit version 20.0.0 or above
    Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead
    Windows XP下 Android开发环境 搭建
    Android程序的入口点
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3340079.html
Copyright © 2011-2022 走看看