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">剩余  <%#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"><%#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 000;
cursor: pointer;
}
.rollBox .RightBotton
{
height: 55px;
width: 28px;
overflow: hidden;
float: left;
display: inline;
margin: 122px 000;
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>

复制代码

下面是效果图

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

posted @ 2013-08-18 15:17 登记造册阅读(372) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部