zoukankan      html  css  js  c++  java
  • 箭头点击左右滚动-18

    <div class="wbox">
         <div class="wbox_left"><img src="images/img.jpg" width="134" height="142"></div>
         <div class="wbox_right">
              <p class="left_btn"></p>
                    <div class="main">
                          <ul class="hul">
                                <li><img src="images/img1.jpg" width="842" height="148"></li>
                                <li><img src="images/img1.jpg" width="842" height="148"></li>
                                <li><img src="images/img1.jpg" width="842" height="148"></li>
                                <li><img src="images/img1.jpg" width="842" height="148"></li>
                          </ul>
                    </div>
              <p class="right_btn"></p>
         </div>
        
    </div>

    .wbox{ 1100px; height:200px; margin:100px auto;}
    .wbox_left{ float:left; 134px; margin-top:20px;}
    .wbox_right{ float:left; 910px;}
    .left_btn{ float:left; background:url(../images/left_btn.jpg) no-repeat; 26px; height:30px; cursor:pointer; margin-top:92px;}
    .main{ float:left; 842px; height:148px; overflow:hidden;}
    .main .hul{ 8000px;}
    .main .hul li{ 842px; height:148px; float:left;}
    .right_btn{ float:left; background:url(../images/right_btn.jpg) no-repeat; 26px; height:30px; cursor:pointer; margin-top:92px;}

    $(document).ready(function(){
        
      var oh=$(".main li").width(),
             index=0,
             len=$(".hul li").length;
             alert(oh)
       $(".right_btn").click(function(){
               index+=1;
               if(index>=len){index=0;}
               ht(index);
        })
        
         $(".left_btn").click(function(){
              index-=1;
              if(index<0){ index=len-1}
              ht(index);
        });
         function ht(){
          $(".hul").stop().animate({'marginLeft':-oh*index},500);
        };
       

    });

  • 相关阅读:
    GPS时间服务器在广电系统的应用
    时钟系统报价分析
    北斗校时服务器装置介绍
    时钟服务器的安装与调试
    频率计使用说明
    通用计数器使用方法
    WOL持久化配置
    RGB屏驱动流程
    iOS-苹果登陆授权(AppleID SignIn)
    VSCODE自用快捷键备忘
  • 原文地址:https://www.cnblogs.com/su1637/p/8204405.html
Copyright © 2011-2022 走看看