也来一段Mootools的图片切换代码

也来一段Mootools的图片切换代码

第一步引入Mootools框架

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>

先看点入门效果
Demo 1 (图片渐现)

<html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script> <style type="text/css"> #slideshow-demo1{ 130px; height:90px; position:relative; } #slideshow-demo1 img{ display:block; 130px; height:90px; position:absolute; top:0; left:0; z-index:1; } </style> <div id="slideshow-demo1"> <img alt="Silverlight" src="http://kb.cnblogs.com/zt/silverlight/images/silverlight.gif" /> <img alt="Chrome" src="http://kb.cnblogs.com/zt/chrome/images/chromeosnew.gif" /> <img alt="Job" src="http://kb.cnblogs.com/zt/interview/images/interview.gif" /> <img alt="Linq" src="http://kb.cnblogs.com/zt/linq/images/linq.gif" /> </div> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ var container = $('slideshow-demo1'); if(container){ var showDuration = 3500; //间隔时间 var images = container.getElements('img'); var currentIndex = 0; var interval; //隐藏所有图片 images.each(function(img,i){ if(i > 0) { img.set('opacity',0); } }); var show = function() { images[currentIndex].fade('out'); //隐藏当前图片 images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in'); //切换至下一张图片并显示，当前图片为最后一张的时候返回第一张 }; window.addEvent('load',function(){ interval = show.periodical(showDuration); //periodical 定时器,能定期地触发一个函数 }); } }) /*]]>*/ </script> </body> </html>

Demo 2.1 (图片向下切换)

<html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script> <style type="text/css"> #container1{ 130px; height:90px; position:relative; overflow:hidden; } #slideshow-demo2{ 130px; height:90px; position:absolute; } #slideshow-demo2 img{ display:block; 130px; height:90px; } </style> <div id="container1"> <div id="slideshow-demo2"> <img alt="Silverlight" src="http://kb.cnblogs.com/zt/silverlight/images/silverlight.gif" /> <img alt="Chrome" src="http://kb.cnblogs.com/zt/chrome/images/chromeosnew.gif" /> <img alt="Job" src="http://kb.cnblogs.com/zt/interview/images/interview.gif" /> <img alt="Linq" src="http://kb.cnblogs.com/zt/linq/images/linq.gif" /> </div> </div> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ var container = $('slideshow-demo2'); if(container){ var showDuration = 3500; //间隔时间 var images = container.getElements('img'); var currentIndex = 0; var t_height=container.getElement('img').getCoordinates().height; //getCoordinates() 是取得元素的坐标有：width,height,top,left,right,bottom var interval; var show = function() { currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0 container.tween('top',-(currentIndex*t_height)); //tween 将元素top 缓缓移动到指定的值 }; window.addEvent('load',function(){ interval = show.periodical(showDuration); //periodical 定时器,能定期地触发一个函数 }); } }) /*]]>*/ </script> </body> </html>
用到的代码
Demo 2.2 (图片向下切换，来点动态效果)

<html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script> <style type="text/css"> #container3{ 130px; height:90px; position:relative; overflow:hidden; } #slideshow-demo3{ 130px; height:90px; position:absolute; } #slideshow-demo3 img{ display:block; 130px; height:90px; } </style> <div id="container3"> <div id="slideshow-demo3"> <img alt="Silverlight" src="http://kb.cnblogs.com/zt/silverlight/images/silverlight.gif" /> <img alt="Chrome" src="http://kb.cnblogs.com/zt/chrome/images/chromeosnew.gif" /> <img alt="Job" src="http://kb.cnblogs.com/zt/interview/images/interview.gif" /> <img alt="Linq" src="http://kb.cnblogs.com/zt/linq/images/linq.gif" /> </div> </div> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ var container = $('slideshow-demo3'); if(container){ var showDuration = 3500; //间隔时间 var images = container.getElements('img'); var currentIndex = 0; var interval; var t_height=container.getElement('img').getCoordinates().height; //getCoordinates() 是取得元素的坐标有：width,height,top,left,right,bottom container.set('tween',{duration: 'long', transition: 'bounce:out'}); //设置元素 tween 的动态类型，out(完以后抖动一下),in(开始抖动一下), var show = function() { currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0 container.tween('top',-(currentIndex*t_height)); //tween 将元素top 缓缓移动到指定的值 }; window.addEvent('load',function(){ interval = show.periodical(showDuration); //periodical 定时器,能定期地触发一个函数 }); } }) /*]]>*/ </script> </body> </html>
补充的代码
Demo 2.3 (图片向下切换，来点动态效果，带数字的切换)

<html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script> <style type="text/css"> #container4{ 130px; height:90px; position:relative; overflow:hidden; } #slideshow-demo4{ 130px; height:90px; position:absolute; } #slideshow-demo4 img{ display:block; 130px; height:90px; } #list_number{ position:absolute; bottom:5px; right:0; text-align:right; } #list_number a{ display:inline-block; text-align:center; 15px; height:15px; font: normal 15px/15px Arial, Helvetica, sans-serif ; color:#FFF; margin:0 3px; background-color:#666; } #list_number a.current, #list_number a:hover{ background-color:#900; text-decoration:none; } </style> <div id="container4"> <div id="slideshow-demo4"> <img alt="Silverlight" src="http://kb.cnblogs.com/zt/silverlight/images/silverlight.gif" /> <img alt="Chrome" src="http://kb.cnblogs.com/zt/chrome/images/chromeosnew.gif" /> <img alt="Job" src="http://kb.cnblogs.com/zt/interview/images/interview.gif" /> <img alt="Linq" src="http://kb.cnblogs.com/zt/linq/images/linq.gif" /> </div> </div> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ var container = $('slideshow-demo4'); if(container){ var showDuration = 3500; //间隔时间 var images = container.getElements('img'); var currentIndex = 0; var interval; var t_height=container.getElement('img').getCoordinates().height; //getCoordinates() 是取得元素的坐标有：width,height,top,left,right,bottom container.set('tween',{duration: 'long', transition:'bounce:out'}); //设置元素 tween 的动态类型，out(完以后抖动一下),in(开始抖动一下), var list_number= new Element('div', {"id": 'list_number'}); images.each(function(img,i){ if(i > 0) { //按照图片数量生成 A元素 t_a= new Element('a', { href: 'javascript:void(0)', html:i, events: { 'mouseover': function(){ currentIndex=i-1; select_hover(); } } }); list_number.adopt(t_a); //adopt() 将A元素添加到 list_number 中 } }); var list_a=list_number.getElements('a'); if(list_a.length>0){ list_number.inject($('container4'),'bottom'); //inject() 将元素list_number 插入到 container4元素的后面(container4 包含了 list_number) list_a[0].addClass('current'); //addClass() 设定第一个A连接的样式为选中的样式 } var select_hover=function(){ currentIndex = currentIndex < images.length - 1 ? currentIndex:0; list_a.removeClass('current'); //移除list_a 列表中A元素的的class list_a[currentIndex].addClass('current'); container.tween('top',-(currentIndex*t_height)); } var show = function() { currentIndex = currentIndex+1; select_hover(); }; window.addEvent('load',function(){ interval = show.periodical(showDuration); //periodical 定时器,能定期地触发一个函数 }); } }) /*]]>*/ </script> </body> </html>
补充的代码
瞎捣许久，还是没能实现在当前页面执行Mootools函数，和园子的JQ冲突了，尝试了几次，最后想到司徒正美大哥用到的一个函数直接弹出新窗口运行JS的方法，这里直接引用了

<script type="text/javascript" src="https://files.cnblogs.com/rubylouvre/myjs2.js"></script>

做个开心快乐人
相关阅读:
【BZOJ3052】[wc2013]糖果公园带修改的树上莫队
 【BZOJ4668】冷战并查集
 HCNP学习笔记之史上最全华为路由器交换机配置命令大合集
 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
 前端学习笔记之CSS浮动浅析
 前端学习笔记之CSS文档流
 前端学习笔记之HTML/CSS 速写神器 Emmet
js 基本类型与引用类型的存储
 Javascript何时执行
 Number使用笔记
原文地址：https://www.cnblogs.com/qq419524837/p/Mootools.html

也来一段Mootools的图片切换代码

Demo 1 (图片渐现)

Demo 2.1 (图片向下切换)

Demo 2.2 (图片向下切换，来点动态效果)

Demo 2.3 (图片向下切换，来点动态效果，带数字的切换)