基于javascript实现清新风格旋转图片的特效

本文分享了javascript实现图片旋转的特效，供大家参考。具体内容如下。

第一，达到效果。

上图：

1.图片会自动依次旋转。每旋转一张图片，下面相应的小图标就会出现一个红色边框，并显示相应的图片名称。

2.当鼠标放在大图片上时，图片停止旋转，始终显示当前图片；移除鼠标后，图片继续旋转。

3.当鼠标移过小图标时，相应的大图像会显示在大图像区域；将鼠标移开，继续旋转当前图片。

第二，代码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题带小图标的射流研究…图片轮换/title style type=' text/CSS ' * { margin : 0px；padding: 0px } #内容{宽度： 700像素高度： 538像素；余量： 0px自动；/*使所有内容居中*/border:实心# F0F 0；} /*定义下面小图标处样式*/#nav1表{宽度： 100%；高度： 35px边距-top :-4px；} # nav 1 TD { width : 35px x8 : 35px文本对齐：中心；/*文字居中*/color : # ffffff；} # text { } # _ text { width : 100%；高度： 100%;背景色-: # F0F 0；border:无；文本对齐：中心；font-size : 18pxcolor : # 000000 font-weight :粗体；}/style/head body on load=' change img()' div id=' content ' div id=' images ' img id=' _ photos ' src=' http :/images/textPhoto/1。jpg ' height=' 500 px ' width=' 700 px ' onmouseover=' over 1()' onmouseout=' out 1()'/div id=' nav 1 '表格边框=' 0 ' tr TD id=' text ' bgcolor=' # f0f 0 ' col span=' 15 '输入类型=' text ' id=' _ text ' readonly/TD TD id=' img 1 ' class=' SimG ' bgcolor=' # db 7093将轮换的大图片放入数组中var arr=新数组();arr[0]='./图像/文字照片/1。jpg '；arr[1]='./图片/文字照片/2。jpg '；arr[2]='./图片/文字照片/3。jpg '；arr[3]='./图片/文字照片/4。jpg '；arr[4]='./图片/文字照片/5。jpg '；//将投入区域变换的文字放在数组里var text=new Array()；文本[0]='焦点图1';文本[1]='焦点图2';文本[2]='焦点图3';文本[3]='焦点图4';文本[4]='焦点图5';var small img=文档。getelementsbyclassname(' SimG ')；//将页面上所有小图片存放在一个数组var num=0；功能更改img(){文档。getelementbyid(' _ photos ').src=arr[num]；document.getElementById('_text ').value=text[num]；//当前小图标增加边框样式for(var I=0；长度；I){ if(I==num)小img[num]。风格。边框='红色实心；//大图标对应的小图标增加边框样式否则很小。风格。边框=“无”；} if(num==arr。长度-1)num=0；//如果显示的是最后一张图片，则图片序号变为第一张的序号else num=1；//图片序号加一} var setID=setInterval(' changeImg()'，1000)；//这样写任然会不断调用changeImg()函数/*当鼠标滑到大图标上时*/function over 1(){ clearInterval(SetID)；//图片停止轮换//smolimg[n-1]。风格。边框='红色实心；} /*当鼠标离开大图标时*/function out 1(){ setID=setInterval(' changeImg()'，1000)；//图片继续轮换//smolimg[n-1]。风格。边框=“无”；//大图标对应的小图标边框样式取消} /*当鼠标滑到小图标上时*/函数超过2(n)个文档。getelementbyid(' _ photos ').src=arr[n-1]；//只要鼠标滑到小图标上，大图区域就显示对应的图片document.getElementById('_text ').value=text[n-1]；clearInterval(SetID)；//图片停止轮换//当前小图标增加边框样式for(var I=0；长度；I){ if(I==n-1)小img[n-1]。风格。边框='红色实心；否则很小。风格。边框=“无”；} } /*当鼠标离开小图标时*/function out2(n) { if(n！=arr。长度)num=n；//从当前图片开始轮换else num=0；setID=setInterval('changeImg()'，1000)；//图片继续轮换//smolimg[n-1]。风格。边框=“无”；//小图标边框样式取消}/脚本/正文/html三、多张图片轮换调试笔记

射流研究…源代码：

//实现多张图片的旋转。var num=0；//显示图片的序号为开头第一张图片。函数change img 1(){ var arr=new array()；arr[0]='./images/Hao 123/7 . jpg '；arr[1]='./images/Hao 123/8 . jpg '；arr[2]='./images/Hao 123/9 . jpg '；var photo=document . getelementbyid(' TopPhoto ')；if(num==arr . length-1)num=0；//如果显示最后一张图片，图片的序号变成第一张的序号，否则num=1；//在图片序列号中添加一个photo . src=arr[num]；}setInterval('changeImg1()'，5000)；//每5000毫秒调用changImg1()函数HTML代码：

img src='http:/images/Hao 123/7 . jpg ' id=' TopHoto '

使用时最好定义图片的风格，统一图片的长宽，这样图片的动态显示效果会更好。

以上就是本文的全部内容，希望对大家学习javascript编程有所帮助。