點擊向右向左，中間的內容滑動。

這裏介紹的是一個插件。

效果圖：

當點擊向右：

這裏只是舉列子，為了看明白過程，這的寬度給的很大，寫的只是數字。

這個具體可以用來幹什麽，我們可以把div的寬度設置成每一個a標簽的寬度，這樣每次只顯示一個，當你點擊的時候就換另一個，這樣就很像商品的輪換了.

例如：http://www.shopli.cn/XiaoNiu/ShopDetail/Detail/1042

當你點擊向右（或左），上面的圖片就會換掉。（當然，這裏的寫法並不是用的這種，達到的效果是一樣的）。

我們可以把a標簽換成別的標簽都可以。

我們的頁面：

樣式：

        a {
            text
 
-decoration: none;
            margin: 5px;           
            /*border:solid 1px #ff0000;*/
        }

        .wrap {
            width: 500px;
            margin: auto;
            overflow: hidden;
            border: solid 1px #000000;
            height: 34px;
            line-height: 34px;
        }

        .span_tab {
            width: 5000px;
            overflow: hidden;
            
 
float: left;
            height: 34px;
        }

頁面：

  <a href="javascript:void(0)" id="but_down" class="icon lt">向左</a> <a href="javascript:void(0)"
            id="but_up" class="icon gt">向右</a>
          <div id="scrollDiv" class="wrap">    <%--可以看到的寬度--%>
            <span id="
 
SpanTab" class="span_tab">    <%-- 裏面--%>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">7</a>
            </span>
        </div>

js:

   <script src="../js/jquery-1.11.0.min.js"></script>
        <script src="../js/jq_scroll.js"></script>       
        <script>
          
            $(document).ready(function () {             
                $("#scrollDiv").Scroll({
                    line: 1,
                    speed: 500,
                    //timer:3000,
                    up: "but_up",
                    down: "but_down"
                });
            });

Scroll方法就是JS引用的，

(function($){
$.fn.extend({
        Scroll:function(opt,callback){
                //參數初始化
                if(!opt) var opt={};
                var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕
                var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕
                var timerID;
                var _this=this.eq(0).find("span:first");
                var     lineH=_this.find("a:first").width(), //獲取行高
                        line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數，默認為一屏，即父容器高度
                        speed=opt.speed?parseInt(opt.speed,10):500; //卷動速度，數值越大，速度越慢（毫秒）
                        timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒）
                if(line==0) line=1;
                var upHeight=0-line*lineH;
                //滾動函數
                var scrollUp=function(){
                        _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數綁定
                        _this.animate({
                                marginRight:upHeight
                        },speed,function(){
                                for(i=1;i<=line;i++){
                                        _this.find("a:first").appendTo(_this);
                                }
                                _this.css({marginRight:0});
                                _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點擊事件
                        });

                }
                //Shawphy:向下翻頁函數
                var scrollDown=function(){
                        _btnDown.unbind("click",scrollDown);
                        for(i=1;i<=line;i++){
                                _this.find("a:last").show().prependTo(_this);
                        }
                        _this.css({marginRight:upHeight});
                        _this.animate({
                                marginRight:0
                        },speed,function(){
                                _btnDown.bind("click",scrollDown);
                        });
                }
               //Shawphy:自動播放
                var autoPlay = function(){
                        if(timer)timerID = window.setInterval(scrollUp,timer);
                };
                var autoStop = function(){
                           if(timer)window.clearInterval(timerID);
                };
                 //鼠標事件綁定
                _this.hover(autoStop,autoPlay).mouseout();
                _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標事件綁定
                _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);

        }       
})
})(jQuery);

當我們改變頁面的時候，不用a標簽了，用很常見的ul

樣式：

  a {
            text-decoration: none;
            margin: 5px;           
            /*border:solid 1px #ff0000;*/
        }

        .wrap {
            width: 500px;
            margin: auto;
            overflow: hidden;
            border: solid 1px #000000;
            height: 34px;
            line-height: 34px;
        }
        ul {
            width:5000px;
            overflow:hidden;
            float:left;
            list-style:none;
            margin:0px;
        }

        ul li {
            float:left;
            margin:0 5px;
        }

頁面：

   <div id="scrollDiv" class="wrap">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ul>
        </div>

js:

   <script src="../js/jquery-1.11.0.min.js"></script>     
        <script src="../js/jsScroll.js"></script>   <!--第二種-->
        <script>
          
            $(document).ready(function () {             
                $("#scrollDiv").Scroll({
                    line: 1,
                    speed: 500,
                    //timer:3000,
                    up: "but_up",
                    down: "but_down"
                });
            });
          

我們引用的js換了一個，註意到了沒有。

我們從上面引用的js裏面代碼可以很容易看到他找的是a標簽，找了span,我們換了標簽所以裏面的也得換

jsScroll.js

/*
jQ向上滾動帶上下翻頁按鈕
*/
(function ($) {
    $.fn.extend({
        Scroll: function (opt, callback) {
            //參數初始化
            if (!opt) var opt = {};
            var _btnUp = $("#" + opt.up);//Shawphy:向上按鈕
            var _btnDown = $("#" + opt.down);//Shawphy:向下按鈕
            var timerID;
            var _this = this.eq(0).find("ul:first");
            var lineH = _this.find("li:first").width(), //獲取行高
                    line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滾動的行數，默認為一屏，即父容器高度
                    speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷動速度，數值越大，速度越慢（毫秒）
            timer = opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒）
            if (line == 0) line = 1;
            var upHeight = 0 - line * lineH;
            //滾動函數
            var scrollUp = function () {
                _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按鈕的函數綁定
                _this.animate({
                    marginRight: upHeight
                }, speed, function () {
                    for (i = 1; i <= line; i++) {
                        _this.find("li:first").appendTo(_this);
                    }
                    _this.css({ marginRight: 0 });
                    _btnUp.bind("click", scrollUp); //Shawphy:綁定向上按鈕的點擊事件
                });

            }
            //Shawphy:向下翻頁函數
            var scrollDown = function () {
                _btnDown.unbind("click", scrollDown);
                for (i = 1; i <= line; i++) {
                    _this.find("li:last").show().prependTo(_this);
                }
                _this.css({ marginRight: upHeight });
                _this.animate({
                    marginRight: 0
                }, speed, function () {
                    _btnDown.bind("click", scrollDown);
                });
            }
            //Shawphy:自動播放
            var autoPlay = function () {
                if (timer) timerID = window.setInterval(scrollUp, timer);
            };
            var autoStop = function () {
                if (timer) window.clearInterval(timerID);
            };
            //鼠標事件綁定
            _this.hover(autoStop, autoPlay).mouseout();
            _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay);//Shawphy:向上向下鼠標事件綁定
            _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);

        }
    })
})(jQuery);

這樣的效果跟上面的是一樣的。根據你的頁面進行修改就好了。這個還是蠻好用的。

左右滑動