效果：

html

 

css

.gundong {
   height:103px;}.gundong .con-wrap{
   position: relative;}.gundong .gundong-btn{
   width:22px;height:79px;background: url(../images/jt.png) no-repeat; position:absolute;top:0px;}.gundong .gundong-prev{
   left:0px;background-position:0 0;}.gundong .gundong-next{
   right:0px;background-position:-23px 0;}.gundong .con {
   width:1104px;overflow:hidden;margin: 0 auto; }.gundong .con ul {
   width:99999999px; }.gundong .con li {
    float:left;width:184px;text-align:center;}.gundong .con li img {
    width:174px;height: 79px;}

 

js

function rollEvent(btnPrev,btnNext,rollBox) {          var liSum=$("#" + rollBox+" li").length;          var page=Math.ceil(liSum/6);          var pageCount=liSum/6;          if(!/^\d+$/.test(pageCount)){               pageCount=Math.floor(pageCount);        }else{            pageCount=pageCount-1;            }          var pageW=1104;          //var ary = [0, 1104, 2208, 3312, 4416, 5520];          var ary = [];          for(var i=0;i
     
       -1 && marginLeft == ary[i]) {                        $event.animate({ "margin-left": "-" + ary[i-1] }, 1000);                    }                }            });            $("#" + btnNext).click(function () {                var $event = $("#" + rollBox);                var x = /\d+/;                var marginLeft = parseInt($event.attr("style").match(x));                                for (var i = 0; i < ary.length; i++) {                    if (marginLeft < ary[pageCount] && marginLeft == ary[i]) {                        $event.animate({ "margin-left": "-" + ary[i+1] }, 1000);                    }                }            });        }rollEvent("gundong-prev", "gundong-next", "gundong-event");