本文实例讲述了射流研究…实现焦点图轮播效果的方法。分享给大家供大家参考，具体如下：

效果图如下：

一、所用到的知识点

1.数字正射影像图操作

2.定时器

3.事件运用

4.射流研究…动画

5.函数递归

6.无限滚动大法

二、结构和样式

div id=' banner ' class=' banner ' ul id=' list-banner ' class=' list-banner fn-clear ' style=' left :-624 px；'lia href=' # ' img src=' http : images/banner 4。jpg ' width=' 624 ' height=' 200 ' alt=' title=' ' '//a/Li lia href=' # ' img src=' http : images/banner 1。jpg ' width=' 624 ' height=' 200 ' alt=' title=' ' '//a/Li lia href=' # ' img src=' http 3360 images/banner宽度宽度：624px高度：200 px飞越：隐藏；}.班纳list-banner { position :绝对值；宽度宽度：5000px}。班纳榜-旗李{左飘：宽度宽度：624px高度：200 px}.班纳list-num-WP {位置：绝对值；底部：7px宽度宽度：624 pxh重量：11px}。班纳list-num { width :100 px；margin:0 auto}。班纳list-num a { display : inline；float:left宽度：11 px高度：11pxmargin:0 7px背景：url(./images/list-num.png)不重复；}.班纳列表-编号a :悬停{背景：网址(./images/list-num-悬停。巴布亚新几内亚)；}.班纳将鼠标悬停在背景上./images/list-num-悬停。巴布亚新几内亚)；}.班纳。左a { display:block位置：绝对；宽度：49 px高度：49 pxtop:75pxleft:4px背景：url(./图像/箭头。gif)0 0；filter: Alpha(不透明度=50);-莫兹-奥帕市3360.5；opacity:0.5 }。班纳。右a { display:block位置：绝对；宽度：49 px高度：49 pxtop:75pxright:4px背景：url(./图像/箭头。gif)0-49px；filter: Alpha(不透明度=50);-莫兹-奥帕市3360.5；opacity:0.5 }三、脚本思路

1.先左右按钮功能

窗户。onload=function(){ var prev=document。getelementbyid(' left ')；var next=文档。getelementbyid(' right ')；var list _ banner=文档。getelementbyid(' list-banner ')；下一个。onclick=function(){ list _ banner。风格。left=parsent(list _ banner。风格。左)-624 ' px '；//注：html上的保险商实验所要加行间样式左转：0，否则这里动不起来} prev。onclick=function(){ list _ banner。风格。left=parsent(list _ banner。风格。左)624 ' px}}2.左右按钮点击的两句话很像，封装成函数

函数动画(偏移){ list _ banner。风格。left=ParSeint(list _ banner。风格。左)偏移“px”；}下一个。onclick=function(){ animate(-624)；} prev。onclick=function(){ animate(624)；}3.无限滚动

假图的做法

即图片为412341,小于最后一张位置的时候，回到第一张的位置，大于第一张位置的时候，拉到最后一张的位置

函数animate(offset){ var NewLeft=parsent(list _ banner。风格。左)偏移；列表_横幅。风格。left=NewLeft ' pxif(NewLeft-2496){ list _ banner。风格。left=-624 ' px '；} if(NewLeft-624){ list _ banner。风格。left=-2496 ' px '；}}4.小圆点跟着左右按钮切换

定义变量指数=1;函数showDot(){ for(var I=0；ilist _ num . lentigi){ list _ num[I].list_num[index-1].下一步。onclick=function(){ animate(-624)；指数；if(index 4){ index=1；} ShowDot()；} prev。onclick=function(){ animate(624)；索引-;if(index 1){ index=4；} ShowDot()；}5.点击小圆点图片滚动及小圆点切换

for(var I=0；ilist _ num . lentigi){ list _ num[I].onclick=function(){ if(this。类名=' hover '){ return；} var myIndex=ParSeint(这。GetAttribute(' index ')；var offset=-624 *(myIndex-index)；索引=我的索引动画（偏移);show DoT()；}}点自己的时候不执行下列代码

div class=' list-num-WP ' div id=' list-num ' class=' list-num fn-clear ' a index=' 1 ' href=' # ' class=' hover '/a index=' 2 ' href=' # '/a index=' 3 ' href=' # '/a index=' 4 ' href=' # '/a/div/div关键是要取到点击的是第几张图片，不能直接var myIndex=this.index因为指数是自定义属性唐自带属性可以通过点来获取，自定义属性不行，getAttribute()既可以获取自定义属性，又可以获取数字正射影像图自带属性

更新指数值，index=myIndex

6.动画函数（有一个渐变的运动过程)

函数动画(偏移){动画=真；var NewLeft=ParSeint(list _ banner。风格。左)偏移量；变化时间=300;//位移总时间定义变量区间=30;//位移间隔时间变化速度=偏移/(时间/间隔);//每次移动距离速度=速度0?Math.ceil(速度):路径。地板(速度);//可能存在小数，取整函数go(){ if((speed 0 parsent(list _ banner。风格。左)NewLeft)| |(速度0 parsent(list _ banner。风格。左)NewLeft(){//NewLeft目标值列表_横幅。风格。left=ParSeint(list _ banner。风格。左)速度px '；setTimeout(go，interval)；//不止做一次运动（走函数),每隔30毫秒前进一下} else{动画=falselist _ banner。风格。left=NewLeft ' pxif(NewLeft-2496){ list _ banner。风格。left=-624 ' px '；} if(NewLeft-624){ list _ banner。风格。left=-2496 ' px '；} } } go()；}next.onclick=function(){ if(！动画){ index } if(index 4){ index=1；} ShowDot()；if(！动画){ animate(-624)；}}prev.onclick=function(){ if(！动画){ index-；} if(index 1){ index=4；} ShowDot()；if(！动画){ animate(624)；} } for(var I=0；ilist _ num . lentigi){ list _ num[I].onclick=function(){ if(this。类名=' hover '){ return；} var myIndex=ParSeint(这。GetAttribute(' index ')；var offset=-624 *(myIndex-index)；index=myIndexshow DoT()；if(！动画){动画（偏移);} }}一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现有生命的这个函数的动画效果

不停点就意味着不停调用有生命的函数，可能会造成卡顿，图片乱刷，需要优化，引进变量愉快的

7.自动播放

function autoplay(){ timer=setInterval(function(){ next。onclick()；},1000)}函数stopautoplay(){ clearInterval(计时器);}横幅。onmouseover=停止自动播放；banner . onmouseout=autoplay autoplay()；setTimeout只执行一次，之前一直执行，是因为递归

setInterval是每隔多少时间

8.假图的优化

实际运用中，图片肯定是按顺序存放，所以假图最好通过射流研究…来生成，而不是本身写在超文本标记语言上

var img _ first=list _ banner。getelementsbytagname(' Li ')[0]；var img _ last=list _ banner。getelementsbytagname(' Li ')[3]；列表_横幅。appendchild(img _ first。克隆诺得(真))；列表_横幅。insertbefore(img _ last。clonenode(true)，list _ banner。getelementsbytagname(' Li ')[0])；附录子是将新的节点添加到目标的最后一个子节点之后

在.之前插入是将新的节点添加到已存在的子节点之前

CloneNode方法，true表示深度克隆，false表示浅层克隆，深度克隆复制标签和标签中的内容，而浅层克隆不复制内容

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。