也来一段Mootools的图片切换代码
2011-08-30 21:11
351 查看
#my_wap h3{
height:52px;
width:750px;
background-color:#959595;
margin:25px 0 10px 0;
padding:0;
font: normal 25px/45px Arial, Helvetica, sans-serif ;
text-indent:18px;
color:white;
text-shadow:1px 1px #444;
}
#my_wap .blue{background-color:#35D1E4;}
#my_wap .orange{background-color:#E4B535;}
#my_wap .pink{background-color:#EE7BD2;}
#my_wap textarea{width:850px; height:250px; border-color:#CCC; border-width:1px;}
#my_wap button{ height:25px; line-height:25px; padding:0 8px; background-color:#F5F5F5; border-color:#CCC; border-width:1px;}
#slideshow-demo1{
width:130px;
height:90px;
position:relative;
}
#slideshow-demo1 img{
display:block;
width:130px;
height:90px;
position:absolute;
top:0;
left:0;
z-index:1;
}
#container1{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo2{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo2 img{
display:block;
width:130px;
height:90px;
}
#container3{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo3{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo3 img{
display:block;
width:130px;
height:90px;
}
#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;
}
第一步引入Mootools框架
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
先看点入门效果
/*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
<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{
width:130px;
height:90px;
position:relative;
}
#slideshow-demo1 img{
display:block;
width: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>
运行代码
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo2{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo2 img{
display:block;
width: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>
运行代码
用到的代码
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo3{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo3 img{
display:block;
width: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>
运行代码
补充的代码
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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的方法，这里直接引用了
<script type="text/javascript" src="http://files.cnblogs.com/rubylouvre/myjs2.js"></script>
height:52px;
width:750px;
background-color:#959595;
margin:25px 0 10px 0;
padding:0;
font: normal 25px/45px Arial, Helvetica, sans-serif ;
text-indent:18px;
color:white;
text-shadow:1px 1px #444;
}
#my_wap .blue{background-color:#35D1E4;}
#my_wap .orange{background-color:#E4B535;}
#my_wap .pink{background-color:#EE7BD2;}
#my_wap textarea{width:850px; height:250px; border-color:#CCC; border-width:1px;}
#my_wap button{ height:25px; line-height:25px; padding:0 8px; background-color:#F5F5F5; border-color:#CCC; border-width:1px;}
#slideshow-demo1{
width:130px;
height:90px;
position:relative;
}
#slideshow-demo1 img{
display:block;
width:130px;
height:90px;
position:absolute;
top:0;
left:0;
z-index:1;
}
#container1{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo2{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo2 img{
display:block;
width:130px;
height:90px;
}
#container3{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo3{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo3 img{
display:block;
width:130px;
height:90px;
}
#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;
}
第一步引入Mootools框架
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
先看点入门效果
Demo 1 (图片渐现)
/*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
<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{
width:130px;
height:90px;
position:relative;
}
#slideshow-demo1 img{
display:block;
width: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 (图片向下切换)
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo2{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo2 img{
display:block;
width: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 (图片向下切换，来点动态效果)
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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{
width:130px;
height:90px;
position:relative;
overflow:hidden;
}
#slideshow-demo3{
width:130px;
height:90px;
position:absolute;
}
#slideshow-demo3 img{
display:block;
width: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 (图片向下切换，来点动态效果，带数字的切换)
// /*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 定时器,能定期地触发一个函数
});
}
})
/*]]>*/
// ]]><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的方法，这里直接引用了
<script type="text/javascript" src="http://files.cnblogs.com/rubylouvre/myjs2.js"></script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一段非常简单的让图片自动切换js代码
- 一段非常简单的让图片自动切换js代码
- 一段非常简单的让图片自动切换js代码
- 一段非常简单的让图片自动切换js代码
- 一段非常简单的让图片自动切换js代码
- 一段ASP单页显示文件夹下所有图片的代码
- [转]Flash焦点图片切换代码
- js鼠标点击图片切换效果代码分享
- JS图片切换代码合集
- 一个实现图片切换的js代码
- js实现图片切换（经典代码集锦）
- 一段实现页面上的图片延时加载的js代码
- 纯js实现背景图片切换效果代码
- js带前后翻页的图片切换效果代码分享
- 图片列表横向切换代码
- 一段生成验证码图片的代码
- CSS图片切换代码 ，可以自行定义切换方式
- css图片切换效果代码[不用js]
- Mootools写的图片滚动切换效果的类
- 图文列表和图片列表JS切换特效代码