欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

js图片滚动效果

       幻灯片和轮播图     2016-02-16     eycms     49     0    

<script>

window.onload=function(){

var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);

setInterval(function(){rt.roundMove()},20)

}

function imgRound(id,w,h,x,y,r,dv,rh,ah){

if (ah==undefined) ah=1;

if (rh==undefined) rh=10;

var dv=dv*ah; //旋转速度

var pi=3.1415926575;

var d=pi/2;

var pd=Math.asin(w/2/r);

var smove=true;

var imgArr=new Array();

var objectId=id;

var o=document.getElementById(objectId);

o.style.position="relative";

var arrimg=o.getElementsByTagName("img");

var pn=arrimg.length; //图片数量

var ed=pi*2/pn;

for (n=0;n<arrimg.length;n++){

var lk=arrimg[n].getAttribute("link");

if (lk!=null) arrimg[n].setAttribute("title",lk)

arrimg[n].onclick=function(){

if (this.getAttribute("link")!=null){

if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))

else window.open(this.getAttribute("link"))

}

}

arrimg[n].onmouseout=function(){smove=true;}

arrimg[n].onmouseover=function(){smove=false;}

arrimg[n].style.position="absolute";

imgArr.push(arrimg[n]);

}


this.roundMove=function(){

for (n=0;n<=pn-1;n++){

var o=imgArr[n];

var ta=Math.sin(d+ed*n),strFilter;

if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px";

else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";

o.style.top=ta*rh+rh+y+"px";

var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;

o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";

o.style.height=zoom*h+"px";

if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}

else {ta=100;o.style.zIndex=1}

if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"

else strFilter="FlipH(enabled:false)";

strFilter=strFilter+" alpha(opacity="+ta+")";

o.style.opacity=ta/100;

o.style.filter=strFilter;

}

if (smove) d=d+dv;

}

}

</script>

<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">

<img src="http://www.xx.cn.net/blueidea/images/s1.jpg"/>

<img src="http://www.xx.cn.net/blueidea/images/s2.jpg"/>

<img src="http://www.xx.cn.net/blueidea/images/s3.jpg"/>

<img src="http://www.xx.cn.net/blueidea/images/s4.jpg" link="http://www.xx.com" target="_blank"/>

<img src="http://www.xx.cn.net/blueidea/images/s5.jpg" link="http://www.xx.cn.net"/>

<img src="http://www.xx.cn.net/blueidea/images/s1.jpg"/>

<img src="http://www.xx.cn.net/blueidea/images/s2.jpg"/>

<img src="http://www.xx.cn.net/blueidea/images/s3.jpg"/>

</div>


--结束END--

本文链接: http://www.83703228.cn/resources/slide/1115.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端