箭头点击左右滚动

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

});

转载于:https://www.cnblogs.com/su1637/p/8204405.html