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

最新推荐文章于 2024-10-17 14:35:48 发布

weixin_33901641

最新推荐文章于 2024-10-17 14:35:48 发布

阅读量59

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qq419524837/archive/2011/08/30/Mootools.html

版权

第一步引入Mootools框架

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

先看点入门效果

Demo 1 (图片渐现)

运行代码

Demo 2.1 (图片向下切换)

运行代码

用到的代码

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

运行代码

补充的代码

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{ width:130px; height:90px; position:relative; overflow:hidden; } #slideshow-demo4{ width:130px; height:90px; position:absolute; } #slideshow-demo4 img{ display:block; width:130px; height:90px; } #list_number{ position:absolute; bottom:5px; right:0; text-align:right; } #list_number a{ display:inline-block; text-align:center; width: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的方法，这里直接引用了