基于javascript实现样式清爽图片轮播特效_

1、基于javascript实现样式清爽图片轮播特效_ 本文实例为大家分享了javascript实现图片轮播特效，供大家参考，具体内容如下 一、实现效果 如上图： 1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标消失红色边框，并显示对应的图片名称 2、鼠标放到大图片上面的时，图片停止轮换，始终显示当前图片；鼠标移开后图片连续轮换 3、鼠标移到小图标上时，大图片区域会显示对应的大图；鼠标移开则从当前图片开头连续轮换 二、代码 !DOCTYPE html html head lang=en meta charset=UTF-8 title带小图标的JS图片轮换/title style type

2、=text/css * margin: 0px; padding: 0px; #content width: 700px; height: 538px; margin: 0px auto; /*使全部内容居中*/ border: solid #F0F0F0; /*定义下面小图标处样式*/ #nav1 table width: 100%; height: 35px; margin-top: -4px; #nav1 td width: 35px; height: 35px; text-align: center; /*文字居中*/ color: #ffffff; #text #_text widt

3、h: 100%; height: 100%; background-color: #F0F0F0; border: none; text-align: center; font-size: 18px; color: #000000; font-weight: bold; /style /head body onload=changeImg() div id=content div id=images img id=_photoes src=./images/textPhoto/1.jpg height=500px width=700px onmouseover=over1() onmouseo

4、ut=out1() /div div id=nav1 table border=0 tr td id=text bgcolor=#F0F0F0 colspan=15input type=text id=_text readonly/td td id=img1 class=sImg bgcolor=#db7093 onmouseover=over2(1) onmouseout=out2(1)1/td td id=img2 class=sImg bgcolor=#da70d6 onmouseover=over2(2) onmouseout=out2(2)2/td td id=img3 class=

5、sImg bgcolor=#9acd32 onmouseover=over2(3) onmouseout=out2(3)3/td td id=img4 class=sImg bgcolor=#adff2f onmouseover=over2(4) onmouseout=out2(4)4/td td id=img5 class=sImg bgcolor=#00bfff onmouseover=over2(5) onmouseout=out2(5)5/td /tr /table /div /div script type=text/javascript /将轮换的大图片放入数组中 var arr

6、= new Array(); arr0 = ./images/textPhoto/1.jpg; arr1 = ./images/textPhoto/2.jpg; arr2 = ./images/textPhoto/3.jpg; arr3 = ./images/textPhoto/4.jpg; arr4 = ./images/textPhoto/5.jpg; /将input区域变换的文字放在数组里 var text = new Array(); text0 = 焦点图1; text1 = 焦点图2; text2 = 焦点图3; text3 = 焦点图4; text4 = 焦点图5; var sm

7、allImg = document.getElementsByClassName(sImg); /将页面上全部小图片存放在一个数组 var num = 0; function changeImg() document.getElementById(_photoes).src = arrnum; document.getElementById(_text).value = textnum; /当前小图标增加边框样式 for(var i=0;iarr.length;i+) if(i=num) smallImgnum.style.border = red solid; /大图标对应的小图标增加边框样

8、式 else smallImgi.style.border = none; if (num = arr.length - 1) num = 0; /假如显示的是最终一张图片，则图片序号变为第一张的序号 else num += 1; /图片序号加一 var setID = setInterval(changeImg(),1000); /这样写任然会不断调用changeImg()函数 /*当鼠标滑到大图标上时*/ function over1() clearInterval(setID); /图片停止轮换 / smallImgn-1.style.border = red solid; /*当鼠标离

9、开大图标时*/ function out1() setID = setInterval(changeImg(),1000); /图片连续轮换 / smallImgn-1.style.border = none; /大图标对应的小图标边框样式取消 /*当鼠标滑到小图标上时*/ function over2(n) document.getElementById(_photoes).src = arrn-1; /只要鼠标滑到小图标上，大图区域就显示对应的图片 document.getElementById(_text).value = textn-1; clearInterval(setID); /

10、图片停止轮换 /当前小图标增加边框样式 for(var i=0;iarr.length;i+) if(i=n-1) smallImgn-1.style.border = red solid; else smallImgi.style.border = none; /*当鼠标离开小图标时*/ function out2(n) if(n!=arr.length) num = n; /从当前图片开头轮换 else num = 0; setID = setInterval(changeImg(),1000); /图片连续轮换 / smallImgn-1.style.border = none; /小图

11、标边框样式取消 /script /body /html 三、多张图片轮换调试笔记 js源代码： /实现几张图片的轮换 var num = 0; /显示的图片序号，刚开头时是第一张图片 function changeImg1() var arr = new Array(); arr0=./images/hao123/7.jpg; arr1=./images/hao123/8.jpg; arr2=./images/hao123/9.jpg; var photo = document.getElementById(topPhoto); if (num = arr.length - 1) num = 0; /假如显示的是最终一张图片，则图片序号变为第一张的序号 else num += 1; /图片序号加一 photo.src = arrnum; setInterval(change