仿淘宝网上下翻滚的图片切换特效代码

发布时间：2018-08-19 00:44:46 所属栏目：Asp教程来源：站长网

导读：仿淘宝网的幻灯片代码，上下滑动切换的效果，经常去淘宝购物的朋友肯定见到过！这不，前天有一个新手站长朋友联系烈火小编说想要这样的效果，于是整理出来给大家学习和研究！示例： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-e

　　仿淘宝网的幻灯片代码，上下滑动切换的效果，经常去淘宝购物的朋友肯定见到过！这不，前天有一个新手站长朋友联系烈火小编说想要这样的效果，于是整理出来给大家学习和研究！

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>淘宝幻灯片上下滑动效-www.liehuo.net</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } img { border: none; } body { background: #ecfaff; } .play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; } ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; } ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; } .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; } ul { position: absolute; top: 0; left: 0; z-index: 1; } ul li { width: 470px; height: 150px; float: left; } ul img { float: left; width: 470px; height: 150px; } </style> <script type="text/javascript" > window.onload=function() { var oPlay=document.getElementById('play'); var oOl=oPlay.getElementsByTagName('ol')[0]; var aLi1=oOl.getElementsByTagName('li'); var oUl=oPlay.getElementsByTagName('ul')[0]; var aLi2=oUl.getElementsByTagName('li'); var i=iNum=direction=0; var times=null; var play=null; //烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ for(i=0;i<aLi1.length;i++) { aLi1[i].index=i; aLi1[i].onclick=function() { iNum=this.index; show(); }; } //按钮点击后调用的函数 function show() { for(i=0;i<aLi1.length;i++) { aLi1[i].className=''; } aLi1[iNum].className='active'; startMove(-(iNum*150)); } //自动播放转向 function autoPlay() { if(iNum>=aLi1.length-1) { direction=1; } else if(iNum<=0) { direction=0; } if(direction==0) { iNum++; } else if(direction==1) { iNum--; } show(); } //自动播放 play=setInterval(autoPlay,3000); //鼠标移入展示区停止自动播放 oPlay.onmouseover=function() { clearInterval(play); }; //鼠标移出展示区开启自动播放 oPlay.onmouseout=function() { play=setInterval(autoPlay,3000); }; function startMove(iTarget) { clearInterval(times); times=setInterval(function() { doMove(iTarget); },30); } function doMove(iTarget) { var iSpeed=(iTarget-oUl.offsetTop)/10; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(oUl.offsetTop==iTarget) { clearInterval(times) } else { oUl.style.top=oUl.offsetTop+iSpeed+'px'; } } }; </script> </head> <body> <div class="play" id="play"> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li><a href="javascript:;"><img src="/uploads/allimg/1109/1.jpg" alt="广告一" /></a></li> <li><a href="javascript:;"><img src="/uploads/allimg/1109/2.jpg" alt="广告二" /></a></li> <li><a href="javascript:;"><img src="/uploads/allimg/1109/3.jpg" alt="广告三" /></a></li> <li><a href="javascript:;"><img src="/uploads/allimg/1109/4.jpg" alt="广告四" /></a></li> <li><a href="javascript:;"><img src="/uploads/allimg/1109/5.jpg" alt="广告五" /></a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：92站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

asp里如何循环输出26个	asp.net Ext grid 显示
浅谈ASP.NET的Postbac	Aspx/Asp.net 防注入程