点击控制图片左右滚动JS代码

CSS

body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; line-height:50px; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { width:500px; margin:0 auto; }
.ibanner_img {width:500px;border:#CCC 1px solid;height:90px;overflow:hidden;margin:200px auto 0;position: relative;padding:50px 0;}
.ibanner_img ul{ position:absolute;width:200%;}
.ibanner_img li{ float:left;width:80px; height:80px;margin:0 20px 0 0;}
.left,.right{width:50px;height:50px; background:#333;color:#fff;float:left;margin:10px 10px 0 0;text-align:center;cursor:pointer;}
.right{ float: right}

JS

$(function(){
    var ibanner=$(".ibanner_img");
    var ibannerul=$(".ibanner_img").find("ul");
    var ibannerli=$(".ibanner_img").find("li");
    var marjili=parseInt(ibannerli.css("margin-right"));
    var wli=ibannerli.width()+ marjili;
    var lilength=ibannerli.length;
    var i=lilength*wli-ibanner.width();
    var jili;
    $(".left").click(function(){
        jili=ibannerul.position().left;
        if(jili>-i)
        {
        jili=jili-wli;
        ibannerul.css("left",jili);
    }else{}
    })
    $(".right").click(function(){
        jili=ibannerul.position().left;
        if(jili<0)
        {
        jili=jili+wli;
        ibannerul.css("left",jili);
    }else{}
    })
});

HTML

<div class="main">
  <div class="ibanner clearfix">
    <div class="ibanner_img">
      <ul>
        <li><img src="img/01.jpg"  width="80" height="80" style="background:#ff0"></li>
        <li><img src="img/02.jpg"  width="80" height="80" style="background:#1f0"></li>
        <li><img src="img/03.jpg"  width="80" height="80" style="background:#2f0"></li>
        <li><img src="img/04.jpg"  width="80" height="80" style="background:#3f0"></li>
        <li><img src="img/05.jpg"  width="80" height="80" style="background:#4f0"></li>
        <li><img src="img/06.jpg"  width="80" height="80" style="background:#5f0"></li>
        <li><img src="img/07.jpg"  width="80" height="80" style="background:#6f0"></li>
        <li><img src="img/07.jpg"  width="80" height="80" style="background:#7f0"></li>
      </ul>
    </div>
  </div>
  <div class="left" align="left">left</div>
  <div class="right" align="left">right</div>
</div>

截图