一款JS旋转图片轮播代码,可以点击左右的箭头来切换主图片的显示,每一次切换都会有旋转图片的首尾增加或减少,整体效果还时比较平滑的,喜欢的童鞋请收下吧。
页面的head部分,设置好页面各元素的样式,以下代码已添加了部分注释,代码如下:
接着引入一个JS文件,并设置好切换点击的响应和轮播响应,代码如下:
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
var oPic=document.getElementById('pic');
var oPrev=getByClass(oPic,'prev')[0];
var oNext=getByClass(oPic,'next')[0];
var aLi=oPic.getElementsByTagName('li');
var arr=[];
for(var i=0;i<aLi.length;i++){
var oImg=aLi[i].getElementsByTagName('img')[0];
arr.push([parseInt(getStyle(aLi[i],'left')),parseInt(getStyle(aLi[i],'top')),
getStyle(aLi[i],'zIndex'),oImg.width,parseFloat(getStyle(aLi[i],'opacity')*100)]);
}
oPrev.onclick=function(){
arr.push(arr[0]);
arr.shift();
for(var i=0;i<aLi.length;i++){
var oImg=aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex=arr[i][2];
startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});
startMove(oImg,{width:arr[i][3]});
}
}
oNext.onclick=function(){
arr.unshift(arr[arr.length-1]);
arr.pop();
for(var i=0;i<aLi.length;i++){
var oImg=aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex=arr[i][2];
startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});
startMove(oImg,{width:arr[i][3]});
}
}
function getStyle(obj,name){
if(obj.currentStyle){ return obj.currentStyle[name];}
else{ return getComputedStyle(obj,false)[name];}
}
}
function getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
</script>
页面的body部分,需要轮播的多张图片放入不同li里面,代码如下:
<div class="pic" id="pic">
<span class="prev"><img src="image/arrow1.png" alt="arrow" /></span>
<span class="next"><img src="image/arrow2.png" alt="arrow" /></span>
<ul>
<li class="pic1"><a href="#"><img src="image/f1.jpg" /></a></li>
<li class="pic2"><a href="#"><img src="image/f2.jpg" /></a></li>
<li class="pic3"><a href="#"><img src="image/f3.jpg" /></a></li>
<li class="pic4"><a href="#"><img src="image/f4.jpg" /></a></li>
<li class="pic5"><a href="#"><img src="image/f5.jpg" /></a></li>
<li class="pic6"><a href="#"><img src="image/f6.jpg" /></a></li>
</ul>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791