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

2011/8/31 11:27:44中文系列评论(0)浏览(2296)

第一步引入Mootools框架

先看点入门效果

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的方法，这里直接引用了

作者: 阿K&LiveCai 发表于 2011-08-30 21:11 原文链接

关键字也来一段mootools的图片切换代码

推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架

IT技术博客