javascript实现图片左右轮换效果（鼠标控制亦可）

之前看到很多有意思的网站里面总会出现这种效果,点击鼠标两侧图标,图片自动左右切换.平时没怎么有时间（其实是太懒了= =！）, 刚好这次项目里面需要用到这种效果，好吧！磨刀不费砍柴工。闲话就谝到这了~~

项目是用ASP.NET开发的.所以我选择了用Repeater控件开整。下面是项目中测试没问题的代码，copy吧！（懒人创造了世界，这话一点都没错 :) !）.

<div style="background: url('../images/TimingSales/2.gif') no-repeat; float: left;
    width: 962px; overflow: hidden;">
    <div class="rollBox">
        <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()">
            <img alt="" src="../images/TimingSales/left.gif" id="imgLeft" width="28px" height="55px" /></div>
        <div class="Cont" id="ISL_Cont">
            <div class="ScrCont">
                <div id="List1">
                    <asp:Repeater ID="Repeater2" runat="server">
                        <ItemTemplate>
                            <div class="timingtitle">
                                <div style="height: 10px">
                                     <span id="pro<%#Eval("productId") %>"></span>
                                </div>
                                <div class="timingpic">
                                    <asp:HyperLink ID="hlImageLink" NavigateUrl='<%#Eval("productUrl") %>' BorderColor="#dddddd"
                                        BorderWidth="1px" ImageUrl='<%#Eval("ImageUrl")%>' runat="server" />
                                </div>
                                <div>
                                    <span class="txtbg">剩余&nbsp;&nbsp;<%#Eval("remnant")%>瓶</span><span>限购：<%#Eval("providemount")%>&nbsp;瓶</span></div>
                                <div>
                                    <input type="hidden" id="proId<%#Eval("productId") %>" value="<%#Eval("productId") %>" />
                                    <%--<input type="hidden" id="tsbegintime<%#Eval("productId") %>" value='<%#Eval("begintime")%>' />--%>
                                    <input type="hidden" id="tsbegintime<%#Eval("productId") %>" value='<%#Eval("begintime")%>' />
                                    <input type="hidden" id="tsendtime" value='<%#Eval("endtime")%>' />
                                    <asp:HyperLink ID="hlTextLink" Text='<%#Eval("Name")%>' runat="server" />
                                </div>
                                <div>
                                    <span class="">抢购价：</span><span style="color: Red"><%#Eval("buyprice")%></span></div>
                                
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div id="List2">
                </div>
            </div>
        </div>
        <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()">
            <img src="../images/TimingSales/right.gif" id="imgRight" width="28" height="55px" /></div>
    </div>
</div>

差点忘记粘贴css样式了..不然又得挨砖头了- -！

<style type="text/css">
    .rollBox
    {
        width: 1040px;
        overflow: hidden;
        padding: 12px 0px 5px 0px;
        margin-top: 28px;
    }
    .rollBox .LeftBotton
    {
        height: 54px;
        width: 28px;
        overflow: hidden;
        float: left;
        display: inline;
        margin: 122px 0 0 0;
        cursor: pointer;
    }
    .rollBox .RightBotton
    {
        height: 55px;
        width: 28px;
        overflow: hidden;
        float: left;
        display: inline;
        margin: 122px 0 0 0;
        cursor: pointer;
    }
    .rollBox .Cont
    {
        width: 900px;
        overflow: hidden;
        float: left;
        margin-left: auto;
        margin-right: auto;
    }
    .rollBox .ScrCont
    {
        width: 10000000px;
    }
    .rollBox .Cont .pic
    {
        width: 232px;
        height: 122px;
        float: left;
        text-align: center;
    }
    .rollBox .Cont .pic img
    {
        padding: 4px;
        background: #fff;
        border: 1px solid #ccc;
        display: block;
        margin: 0 auto;
    }
    .rollBox .Cont .pic p
    {
        line-height: 26px;
        color: #505050;
    }
    .rollBox .Cont a:link, .rollBox .Cont a:visited
    {
        color: #626466;
        text-decoration: none;
    }
    .rollBox .Cont a:hover
    {
        color: #f00;
        text-decoration: underline;
    }
    .rollBox #List1, .rollBox #List2
    {
        float: left;
    }
</style>

好了，万事俱备，只欠东风！关键的还是控制div左右浮动的主角上场了——>javascript

<script language="javascript" type="text/javascript">

    //图片滚动列表 mengjia 070816
    var Speed = 1; //速度(毫秒)
    var Space = 5; //每次移动(px)
    var PageWidth = 205; //翻页宽度
    var fill = 0; //整体移位
    var MoveLock = false;
    var MoveTimeObj;
    var Comp = 0;
    var AutoPlayObj = null;
    GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    GetObj('ISL_Cont').scrollLeft = fill;
    GetObj("ISL_Cont").onmouseover = function() { clearInterval(AutoPlayObj); }
    GetObj("ISL_Cont").onmouseout = function() { AutoPlay(); }
    AutoPlay();
    function GetObj(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")') } else { return eval('document.all.' + objName) } }
    function AutoPlay() { //自动滚动
        clearInterval(AutoPlayObj);
        AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 3000); //间隔时间
    }
    function ISL_GoUp() { //上翻开始
        if (MoveLock) return;
        clearInterval(AutoPlayObj);
        MoveLock = true;
        MoveTimeObj = setInterval('ISL_ScrUp();', Speed);
    }
    function ISL_StopUp() { //上翻停止
        clearInterval(MoveTimeObj);
        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
            Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
            CompScr();
        } else {
            MoveLock = false;
        }
        AutoPlay();
    }
    function ISL_ScrUp() { //上翻动作
        if (GetObj('ISL_Cont').scrollLeft <= 0) { GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth }
        GetObj('ISL_Cont').scrollLeft -= Space;
    }
    function ISL_GoDown() { //下翻
        clearInterval(MoveTimeObj);
        if (MoveLock) return;
        clearInterval(AutoPlayObj);
        MoveLock = true;
        ISL_ScrDown();
        MoveTimeObj = setInterval('ISL_ScrDown()', Speed);
    }
    function ISL_StopDown() { //下翻停止
        clearInterval(MoveTimeObj);
        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
            Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
            CompScr();
        } else {
            MoveLock = false;
        }
        AutoPlay();
    }
    function ISL_ScrDown() { //下翻动作
        if (GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) { GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth; }
        GetObj('ISL_Cont').scrollLeft += Space;
    }
    function CompScr() {
        var num;
        if (Comp == 0) { MoveLock = false; return; }
        if (Comp < 0) { //上翻
            if (Comp < -Space) {
                Comp += Space;
                num = Space;
            } else {
                num = -Comp;
                Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft -= num;
            setTimeout('CompScr()', Speed);
        } else { //下翻
            if (Comp > Space) {
                Comp -= Space;
                num = Space;
            } else {
                num = Comp;
                Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft += num;
            setTimeout('CompScr()', Speed);
        }
    }
 
</script>