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" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="ISL_StopUp()"> <img alt="" src="../images/TimingSales/left.gif" mce_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">剩余  <%#Eval("remnant")%>瓶</span><span>限购：<%#Eval("providemount")%> 瓶</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" mce_style="color: Red"><%#Eval("buyprice")%></span></div> </div> </ItemTemplate> </asp:Repeater> </div> <div id="List2"> </div> </div> </div> <div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"> <img src="../images/TimingSales/right.gif" mce_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>

   下面是效果图

---

 

 

好了..这东风也来了.  尘埃落定，还望大虾们，多多指点 ，共同进步。