JS原生代码实现图片轮播无缝切换的一种思路

来源：互联网发布：photoshop有没有mac版编辑：程序博客网时间：2024/04/30 08:35

JS实现图片轮播是个老生常谈的问题，也是新手的必由之路，在这里提供一种思路，供大家参考：

1.生成DIV做外框，并设置overflow:hidden； // 每个方法都必须有的

2.创建一个数组arr，放置图片地址

3.生成两个并排的图片img1,img2，初始化图片地址为arr[0] arr[1] 并使用绝对定位，便于后面移动图片

4.开一个定时器，间隔一定时间后，img1 img2的left值同时向左移动图片宽度值的像素 //移动的时候可以再开个定时器，做滑动的效果

5.当img1的left值为负图片宽度时，赋予img1的left值为正图片宽度，并且将数组的第3张图片地址赋予img1，继续向左移动

6.当img2的left值为负图片宽度时，赋予img2的left值为正图片宽度，并将数组的第4张图片地址赋予img2，继续向左移动

7.当两张图片的图片地址到了数组的最后时，循环到第一个图片地址。

这个方法的难点在于：

1.两张图片的地址在数组中是逢2累加的

2.当图片的地址到了数组的最后时，需要折回数组的首位

具体代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片自动切换</title></head><style>body{margin:100px;}p,img,div,ul,li { margin:0;padding:0;}#content { width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;}#img1 { position:absolute;top:0;left:0;}#img2 { position:absolute;top:0;left:600px;}#intro {width:600px; height:60px; position:absolute; top:340px; left:0;}p { width:600px; height:60px; background:#333; opacity:0.5; position:absolute;}span {display:block; width:600px; height:60px; line-height:60px; text-align:center; color:#fff; position:absolute; z-index:2;}</style><script>/*两个图片位置变换，同时把数组里的图片地址赋予图片*/window.onload = function(){var intro = document.getElementById('intro');var oSpan = intro.getElementsByTagName('span')[0];var oP = intro.getElementsByTagName('p')[0];var img1 = document.getElementById('img1');//图片1var img2 = document.getElementById('img2');//图片2var oUl = document.getElementsByTagName('ul')[0];var arr = ['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg']; //图片地址var timer1 = null;var timer2 = null;var timer3 = null;//初始化var n = 0;var a = 0;var b = 1;intro.style['top'] = '400px';oSpan.innerHTML = '图片说明'+(n+1);img1.src = arr[a];img2.src = arr[b];timer1 = setInterval(changeImg,3000);timer3 = setInterval(autoText,30);function changeImg(){clearInterval(timer2);clearInterval(timer3);intro.style['top'] = '400px';timer2 = setInterval(autoPic,30);timer3 = setInterval(autoText,30);n++;n%=arr.length;oSpan.innerHTML = '图片说明'+(n+1);};function autoPic(){var length1 = parseInt(getStyle(img1,'left'))-10;var length2 = parseInt(getStyle(img2,'left'))-10;img1.style['left'] = length1+'px';img2.style['left'] = length2+'px';if(length1==-600){a+=2;if(a>=arr.length)a-=arr.length;img1.style['left'] = '600px';img1.src = arr[a];clearInterval(timer2); }if(length2== -600){b+=2;if(b>=arr.length)b-=arr.length;img2.style['left'] = '600px';img2.src = arr[b];clearInterval(timer2);} }; function autoText(){var height = parseInt(getStyle(intro,'top'))-2;intro.style['top'] = height +'px';if(height<=340)clearInterval(timer3);};function getStyle(obj,str){return obj.currentStyle?obj.currentStyle[str]:getComputedStyle(obj)[str];};};</script> <body><div id="content"><img id="img1" /><img id="img2" /><div id="intro"><span></span><p></p> </div></div></body></html>

此代码仅实现功能，其中函数还可以继续优化，本文不再赘述。

转载请标明作者，谢谢。

4 0