js图片滚动效果实例代码到右边一个
首先绘制效果图风格
复制代码代码如下所示：
# div_left {浮动：左；宽度：60px；身高：86px；}
# starscroll {宽度：843px；身高：188px；margin-left: 15px；右边距：15px；填料顶部：9px；溢出：隐藏；边框1px solid红；浮动：左；}
# starscroll # contentscroll { 500% }宽度：
# starscroll # scrollone {浮动：左；}
# starscroll # scrollone一{浮动：左；宽度：204px；身高：188px；右边距：9px；浮动：左；显示：内联；}
# starscroll # scrollone img {宽度：204px；身高：188px；border: 0px；}
# starscroll # scrolltwo {浮动：左；}
# starscroll # scrolltwo一{浮动：左；宽度：204px；身高：188px；右边距：9px；浮动：左；显示：内联；}
# starscroll # scrolltwo img {宽度：204px；身高：188px；border: 0px；}
# div_right {浮动：左；宽度：60px；身高：86px；}
。箭{背景：URL（图像/箭头。PNG）没有重复；鼠标指针；身高：86px；宽度：60px；鼠标指针；显示：块；边距：50px；}
。沪指{背景位置：左上；}
。沪指：悬停{背景位置：左下；}
下一个{背景位置：右上方；}
下一步：悬停{背景位置：右下角；}
HTML代码
复制代码代码如下所示：
JS代码
复制代码代码如下所示：
var =（函数（）{（））
返回函数（）{
无功starscroll = document.getelementbyid（starscroll ），
scrollone = document.getelementbyid（scrollone ），
= scrollone.getelementsbytagname（），
acollection.length长度=，
scrolltwo = document.getelementbyid（scrolltwo ），
btn_left = document.getelementbyid（btn_left ），
btn_right = document.getelementbyid（btn_right ）；
VaR的宽度= 204，电流= 1，率= 7，timetimeout = 1000，时间间隔= 10，marginright = 9；
Var SInterval = null，stimeout = null；
var标志=真；
函数的ScrollLeft（）{
无功countwidth =电流×宽+电流* marginright，
sleftpara = starscroll.scrollleft；
如果（scrolltwo。offsetwidth sleftpara = = 0）{
starscroll scrollLeft = 0；
电流＝0；
}
如果（countwidth sleftpara = = 0）{
前进（）；
}
别的{
var v = math.round（（countwidth sleftpara） /率）；
v＝v 1 1：V；
setscrollleft（sleftpara + V）；
}
}
功能setscrollleft（scrollLeft）{
starscroll scrollLeft = scrollLeft；
}
函数init（）{
标志=假；
sinterval = setInterval（scrollLeft，时间间隔）；
}
函数向前（）{
ClearInterval（sinterval）；
电流+；
标志=真；
stimeout = setTimeout（init，timetimeout）；
}
btn_right。onclick =函数（）{
如果（标志）{
ClearTimeout（stimeout）；
init（）；
}
}
函数的ScrollRight（）{
无功countwidth =电流×宽+电流* marginright，
sleftpara = starscroll.scrollleft；
如果（countwidth sleftpara = = 0）{
前进（）；
}
别的{
var v = math.round（（countwidth sleftpara） /率）；
v＝v→1-1；
setscrollleft（sleftpara + V）；
}
}
btn_left。onclick =函数（）{
如果（！旗）{
返回；
}
标志=假；
ClearTimeout（stimeout）；
如果（当前= 1）{
setscrollleft（scrolltwo。offsetwidth）；
电流=一+ 1；
}
电流= 2；
sinterval = setInterval（ScrollRight内）；
}
如果（一> 0）{
starscroll scrollLeft = 0；
scrolltwo.innerhtml = scrollone.innerhtml；
stimeout = setTimeout（init，timetimeout）；
}
}
}）；
卷轴（）；