本文介绍了实现JS实例聚焦图旋转木马效果的方法：

结果如下：



首先，使用的知识点

1.dom操作

2。定时器

三.事件中的应用

4、Js动画

5。函数递归

6。无限滚动的方法

二、结构与风格































。横幅{位置：相对；宽度：624px；高度：200px；溢出：隐藏；}
旗帜。旗帜。列表{位置：绝对；宽度：5000px；}
。banner.list-banner李{浮动：左；宽度：624px；高度：200px；}
。旗帜。列表Num WP {位置：绝对；底：7px；宽度：624px；身高：11px；}
。旗帜。表民{宽度：100px；保证金：0汽车；}
一。banner.list-num {display: inline；浮动：左；宽度：11px；身高：11px；保证金：0 7px；背景：URL（。 /图像/ list-num.png）没有重复；}
。banner.list-num：悬停{背景：URL（。 /图像/列表Num徘徊。PNG））}；}
。banner.list-num a.hover { background: url（。 /图像/列表Num徘徊。PNG）；}
。banner.left一{显示：块；位置：绝对；宽度：49px；身高：49px；顶部：75px；左：4px；背景：URL（。 /图像/箭头.gif）00；过滤器：α（L）；L；H；}。
。banner.right一{显示：块；位置：绝对；宽度：49px；身高：49px；顶部：75px；右：4px；背景：URL（。 /图像/箭头.gif）0 49px；与背景：URL（。 /图像/箭头.gif）；




三，脚本思维

1。第一个按钮的功能


窗口。指针函数（）{
变量prev = document.getelementbyid（左）；
VaR下= document.getelementbyid（权利）；
无功list_banner = document.getelementbyid（单旗）；
其次，onclick =函数（）{
list_banner。风格。左= parseInt（list_banner.style.left - 624 + 'px '）； / /注：HTML在UL添加左：0风格的线不动了，否则；
}
上期onclick =函数（）{
list_banner。风格。左= parseInt（list_banner。风格。左）+ 624 + 'px；
}
}




2。单击这两个词的按钮类似于封装成函数。


函数动画（偏移量）{
list_banner。风格。左= parseInt（list_banner。风格。左）+偏移+ 'px；
}
其次，onclick =函数（）{
动画（- 624）；
}
上期onclick =函数（）{
动画（624）；
}




三.无限滚动

（1）假地图的实践

也就是说，当图片为412341，小于最后一个位置时，返回第一个位置，超过第一个位置，并将其拖到最后一个位置。


函数动画（偏移量）{
无功newleft = parseInt（list_banner。风格。左）+偏移；
list_banner。风格。左= newleft + 'px；
如果（newleft < 2496）{
list_banner。风格。左= - 624 +PX；
}
如果（newleft > 624）{
list_banner。风格。左= - 2496 +PX；
}
}




4。用左、右按钮切换的小圆点。


var指数= 1；
功能showdot（）{
对于（var i = 0；i < list_num.length；i++）{
List_num{i}.className= ;
}
list_num {指数}。类名=悬停；
}
其次，onclick =函数（）{
动画（- 624）；
索引+；
如果（索引> 4）{
索引= 1；
}
showdot（）；
}
上期onclick =函数（）{
动画（624）；
指数；
如果（索引< 1）{
索引= 4；
}
showdot（）；
}




5。点击小圆点图片滚动和小圆点开关。


对于（var i = 0；i < list_num.length；i++）{
我list_num { }。onclick =函数（）{
如果（这方法= =悬停）{
返回；
}
无功myindex = parseInt（this.getattribute（指数））；
无功补偿= 624 *（myindex指数）；
指数= myindex；
动画（偏移）；
showdot（）；
}
}




（1）当你点击自己的时候，不要执行下面的代码

二














关键是要点击的是几张图片，没有直接的无功myindex = this.index；因为指数是一个自定义属性，可通过点DOM自身的特性，自定义属性不是。GetAttribute（）可以得到一个自定义属性，并能获得DOM自己的财产

（3）更新索引值，指数= myindex；

6。动画功能（逐渐移动的过程）


函数动画（偏移量）{
动画=真的；
无功newleft = parseInt（list_banner。风格。左）+偏移；
var时间= 300；总位移时间
var间隔= 30；置换间隔
var速度=偏移量/（时间/间隔）；每个运动的距离
速度=速度> 0math.ceil（速度）：Math.floor（速度）； / /十进制整数
函数（）{
如果（（速度newleft）| |（速度> 0parseint（list_banner。风格。左）< newleft））{ / / newleft目标值
list_banner。风格。左= parseInt（list_banner。风格。左）+速度+ 'px；
（setTimeout，间隔）； / /不做运动（功能），每30毫秒之前。
}
别的{
动画=假；
list_banner。风格。左= newleft + 'px；
如果（newleft < 2496）{
list_banner。风格。左= - 624 +PX；
}
如果（newleft > 624）{
list_banner。风格。左= - 2496 +PX；
}
}
}
（）；
}
其次，onclick =函数（）{
如果（！动画）{
索引+；
}
如果（索引> 4）{
索引= 1；
}
showdot（）；
如果（！动画）{
动画（- 624）；
}
}
上期onclick =函数（）{
如果（！动画）{
指数；
}
如果（索引< 1）{
索引= 4；
}
showdot（）；
如果（！动画）{
动画（624）；
}
}
对于（var i = 0；i < list_num.length；i++）{
我list_num { }。onclick =函数（）{
如果（这方法= =悬停）{
返回；
}
无功myindex = parseInt（this.getattribute（指数））；
无功补偿= 624 *（myindex指数）；
指数= myindex；
showdot（）；
如果（！动画）{
动画（偏移）；
}
}
}




（1）函数在条件之后调用自身，称为递归。这里我们可以通过递归实现动画函数的动画效果。

停止点是指停止调用动画功能，可能导致卡尔顿、图片乱刷，需要优化，引入变量动画。

7。自动播放


功能自动播放（）{
定时器= setInterval（）{（）函数（
Next.onclick（）；
}，1000）
}
功能stopautoplay（）{
ClearInterval（定时器）；
}
onmouseover = stopautoplay旗帜；
旗帜onmouseout=自动播放；
自动播放（）；




setTimeout是只执行一次，这已被执行之前，因为递归

setInterval是多少次，每隔一段时间

8优化。假图

在实际使用中，图片必须按顺序存储，所以假图片最好是由JS生成的，而不是HTML本身。


无功img_first = list_banner.getelementsbytagname（礼）{ 0 }；
无功img_last = list_banner.getelementsbytagname（礼）{ 3 }；
list_banner.appendchild（img_first.clonenode（真的））；
list_banner.insertbefore（img_last.clonenode（真的），list_banner.getelementsbytagname（礼）{ 0 }）；




的作用是：增加了一个新的节点到目标的最后一个孩子后

insertBefore是向现有的子节点添加一个新节点

在cloneNode方法，真正代表深克隆和造假的手段Asako Takashi。深层克隆复制标签和标签的内容，而浅克隆不复制内容。

更多有关Javaｓｃｒｉｐｔ相关内容的读者可以看到特别站：Javaｓｃｒｉｐｔ切换效果和技巧摘要

希望本文能对javaｓｃｒｉｐｔ程序设计有所帮助。