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

核心提示：Javascript文件：///<referencepath="jquery-1.3.2.js"/>/***tackerScroller-aImageHorizentalAutoScrollViewer*Version0.1.1*@requiresjQueryv1.3.2**Copyri

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();
};