jquery制作的横向图片滚动带横向滚动条TackerScroll

图片左右滚动，感应鼠标位置，鼠标在展示区左边1/3向左滚动，中间1/3停止滚动，右边1/3向右滚动。

目前滚动条，左右按钮没有相应点击事件。

第一个作品，问题难免，希望高手不吝赐教。

Javascript文件：

/// <reference path="jquery-1.3.2.js" />
/*
* 
* tackerScroller - a Image Horizental Auto Scroll Viewer 
* Version 0.1.1
* @requires jQuery v1.3.2
* 
* Copyright (c) 2009 Tacker
* Eidtor: Tacker By 2009-10-18
* Email:tacker.cn@gmail.com
* WebSite:www.ruiidea.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* 
*/

jQuery.fn.tackerScroller = function(params) {
    var p = params || {
        container: "imgViewer",
        frame: "viewerFrame",
        width: 2,
        child: "li",
        time: 6000,
        visibleScroll: false,
        scrollwidth: 845
    };
    var _imgViewer = $("#" + p.container);
    var _imgFrame = $("#" + p.frame);
    var _width = p.width;
    var _child = p.child;
    var _time = p.time;
    var _framewidth = _imgFrame.find(_child).size() * _imgFrame.find(_child + ":first").width();
    var _positionX;
    var _scrollwidth = p.scrollwidth;
    var _visibleScroll = p.visibleScroll;
    var _scrollPositionX;

    var autoStop = function() {
        _imgFrame.stop();
        if (_visibleScroll === true) {
            $("#scrollcenter").stop();
        }
    };
    var turnLeft = function() {
        if (_imgFrame.offset().left < 0) {
            _imgFrame.animate({ marginLeft: 0 }, _time);
            if (_visibleScroll === true) {
                $("#scrollcenter").animate({ left: 0 }, _time);
            }
        }
        else {
            autoStop();
        }
    };
    var turnRight = function() {
        if (_imgFrame.offset().left > _imgViewer.width() - _imgFrame.width()) {
            _imgFrame.animate({ marginLeft: (_imgViewer.width() - _imgFrame.width()) }, _time);
            if (_visibleScroll == true) {
                $("#scrollcenter").animate({ left: (_scrollwidth - $("#scrollcenter").width()) }, _time);
            }
        }
        else {
            autoStop();
        }
    };    
    var init = function() {
        _imgFrame.width(_framewidth);
        if (_visibleScroll == true) {
            var scrollerwidth = _imgViewer.width() * _scrollwidth / _imgFrame.width();
            var scrolleroffsetX;
            $("#scrollcenter").width(scrollerwidth);
            $("#scrollcenter").css("position", "absolute").css("left","0px");
            $("#scrollcenter").parent().css("width",_scrollwidth+"px");
            $("#scrollcenter").animate({ left: (_scrollwidth - scrollerwidth) / 2 }, 2000);
            $("#scrollcenter").bind("mousedown",function(e) {
                autoStop();
                e = e ? e : window.event;
                //鼠标x坐标相对中间滚动条偏移位置
                scrolleroffsetX = parseInt(e.originalEvent.clientX-$("#scrollcenter").offset().left||e.originalEvent.layerX||0);
                $("#msg").text(scrolleroffsetX);
                $("#scrollcenter").parent().mousemove(function(evt) {
                    evt = evt ? evt : window.event;                    
                    _scrollPositionX=parseInt((evt.originalEvent.clientX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||(evt.originalEvent.pageX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||0)
                    if (_scrollPositionX >= 0 && _scrollPositionX <= _scrollwidth - $("#scrollcenter").width()) {
                        $("#scrollcenter").css("left", (_scrollPositionX) + "px");
                        _imgFrame.css("margin-left",(_imgViewer.width() - _imgFrame.width()) * _scrollPositionX / (_scrollwidth - $("#scrollcenter").width()) + "px");
                    }                    
                    return false;//阻止事件冒泡
                });                                           
                $(document).mouseup(function() {
                   $("#scrollcenter").parent().unbind();                   
                });                 
                return false;  //阻止事件冒泡           
            });
            $("#scrollcenter").mouseover(function() {
                $(this).css("cursor", "pointer");
            });
        }
        _imgFrame.animate({ marginLeft: (_imgViewer.width() - _framewidth) / 2 }, 2000);
        _imgViewer.mouseout(autoStop);
        _imgViewer.mouseover(function(e) {
            //获取当前鼠标相对对象的x坐标
            _positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;
            if (_positionX < $(this).width() / 3) {
                autoStop();
                turnLeft();
            }
            else if (_positionX > ($(this).width() * 2) / 3) {
                autoStop();
                turnRight();
            }
            else {
                autoStop();
            }
            return false;//阻止事件冒泡
        });
    };
    init();
};

Html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Autor" content="Tacker(QQ:5987753)" />
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.tackerScroll.js"></script>
    <title>TackerScroll Demo</title>
    <style type="text/css">
        ul, li
        {
            list-style: none;
            float: left;
            text-align: left;
        }
        .productlist
        {
            width: 885px;
            height: 355px;
            overflow: hidden;
            position: absolute;
            left: 64px;
            top: 10px;
        }
        .productlist ul
        {
            height: 355px;
            float: left;
        }
        .productlist ul li
        {
            height: 355px;
            width: 304px;
        }
        #viewerFrame
        {
            float: left;
            height: 355px;
        }
        #viewerScroller
        {
            width: 885px;
            height: 20px;
            overflow: hidden;
            position: absolute;
            left: 64px;
            top: 380px;
        }
        #viewerScroller .left
        {
            float: left;
            width: 20px;
            height: 20px;
        }
        #viewerScroller .center
        {
            float: left;
            height: 20px;
            background: #1A1AF7;
        }
        #viewerScroller .right
        {
            float: left;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="" class="subcontainer">
        <div id="imgViewer" class="productlist">
            <ul id="viewerFrame">
                <li><a href="#" target="_self">
                    <img src="images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
                <li><a href="#" target="_self">
                    <img src="images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;
                        display: block;" /></a></li>
            </ul>
        </div>
        <div id="viewerScroller">
            <div class="left">
                <img id="scrollleft" src="images/scrollleft.jpg" width="20" height="20" alt="" /></div>
            <div class="center" style="position: relative;">
                <img id="scrollcenter" src="images/scrollcenter.jpg" width="0" height="20" alt="" /></div>
            <div class="right">
                <img id="scrollright" src="images/scrollright.jpg" width="20" height="20" alt="" /></div>
        </div>

        <script type="text/javascript">
            $(function() {
                $("#viewer").tackerScroller({
                    container: "imgViewer",
                    frame: "viewerFrame",
                    width: 2,
                    child: "li",
                    time: 6000,
                    visibleScroll: true,
                    scrollwidth: 845
                });
            });
        </script>
    </div>
</body>
</html>

 在线demo:

http://www.ruiidea.com/tackerscroll/demo.html

打包下载：

 http://www.ruiidea.com/tackerscroll/tackerscroll.rar