左右滾動圖片或內容

效果：

html

<div class="gundong indOne" id="gundong">
                        <div class="con-wrap">
                            <a href="javascript:;" class="gundong-btn gundong-prev" id="gundong-prev"></a>
                            <a href="javascript:;" class="gundong-btn gundong-next" id="gundong-next"></a>
                            <div class="con">
                                <ul class="clearfix" id="gundong-event" style="margin-left:0">
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                    <li><a href="" target="_blank"><img src="images/focus01.png"></a></li>
                                     </ul>
                            </div>
                        </div>
                </div>

 

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<page;i++){
            ary.push(pageW*i);
          }
            $("#" + btnPrev).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 > -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");