jQuery實現橫向圖片滾動帶橫向滾動條是本文要介紹的內容，主要是來了解jQuery中圖片滾動效果的實現。圖片左右滾動，感應鼠標位置，鼠標在展示區左邊1/3向左滾動，中間1/3停止滾動，右邊1/3向右滾動。目前滾動條，左右按鈕沒有相應點擊事件。 ***個作品，問題難免，希望高手不吝賜教。

Javascript文件：

Code  
 
/// <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();  
                ee = 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) {  
                    evtevt = 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文件：

Code  
 
<!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 

小結：jQuery實現橫向圖片滾動帶橫向滾動條的內容介紹完了，希望通過本文的學習能對你有所幫助！