JS旋转图片轮播代码

来源:https://www.sucaihuo.com/js/2439.html 2017-07-16 23:21浏览(1761) 收藏

一款JS旋转图片轮播代码,可以点击左右的箭头来切换主图片的显示,每一次切换都会有旋转图片的首尾增加或减少,整体效果还时比较平滑的,喜欢的童鞋请收下吧。
JS旋转图片轮播代码
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2