javascript实现图片轮换动作方法

2023-07-19 03:50:04 73

图片轮换是一种相当复杂的技术，早些年基本用flash实现。这里有一个链接，教大家如何用flash实现它的。之所以用flash，是因为flash是基于帧的，这与图片轮换的原理相当接近。为了模拟帧的效果，我们要用到overflow把多余的部分遮罩掉，也就是flash中常说的遮罩层。在Flash中，连时间轴都是可视的，而我们则全凭想象力与数学来计算现在是到了哪一张图。加之，flash有RobertPenner大神的缓动公式，那实在太耀眼，直到script.aculo.us类库搞出自己的缓动公式，才扭转局面。

我们来看一看图片轮换的结构层。它应该包含框体，图片展示区，图片滑动层与分页栏。原谅我制造这么多词汇，因为没有个名词讲解就难以为继了，前人也没有做这样的总结，个个都不愿意分享一下。框体就是一个div元素，作用有两个：提供相册的边框与作为分页栏的包含块。如果不清楚什么叫包含块（containingblock）的话，自己查阅CSS权威指南吧。接着下来图片展示区与图片滑动层，也就是我实现新式无缝滚动的那一种结构，一个很干净的无序列表，所有难点都转移到设置它的CSS上。至于图片展示区就是ul元素，大小为一张图片的大小；图片滑动层就是那个li元素，也只有一个li元素而已，利用CSS强制把它里面的图片不换行向左浮动，并设置li元素一个很大很大的宽度，好让它一行容纳所有图片。分页栏就是一个包含许多链接的span元素，和普通的水平菜单差不多，只不过要用绝对定位它安置到框体的右下角。

#album{
position:relative;/*为分页栏准备的*/
width:400px;/*必须设置，为分页栏准备*/
height:300px;/*必须设置，为分页栏准备*/
border:10pxsolid#8080C0;
}
#albumul,#albumli{/*消除默认样式*/
padding:0;
margin:0;
list-style:none;
}
#albumul{
position:relative;/*为图片滑动区*/
height:300px;/*必须设置，用于隐藏图片滑动区多余的部分*/
width:400px;/*必须设置，用于隐藏图片滑动区多余的部分*/
overflow:hidden;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00;
}
#albumli{/*图片滑动区*/
position:absolute;
width:1000%;/*让里面的所有图片并列显示*/
}
#albuma{
float:left;
}
#albumimg{
display:block;
border:0;
}
#albumspan{/*分页栏*/
position:absolute;
right:0;
bottom:10px;
}
#albumspana{
display:block;/*让其拥有盒子模型*/
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0;
}
#albumspana:hover,#albumspana.hover{
color:#F8F8F8;
background-position:00;
}



javascript图片轮换by司徒正美




#album{
position:relative;/*为分页栏准备的*/
width:400px;/*必须设置，为分页栏准备*/
height:300px;/*必须设置，为分页栏准备*/
border:10pxsolid#8080C0;
}
#albumul,#albumli{/*消除默认样式*/
padding:0;
margin:0;
list-style:none;
}
#albumul{
position:relative;/*为图片滑动区*/
height:300px;/*必须设置，用于隐藏图片滑动区多余的部分*/
width:400px;/*必须设置，用于隐藏图片滑动区多余的部分*/
overflow:hidden;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00;
}
#albumli{/*图片滑动区*/
position:absolute;
width:1000%;/*让里面的所有图片并列显示*/
}
#albuma{
float:left;
}
#albumimg{
display:block;
border:0;
}
#albumspan{/*分页栏*/
position:absolute;
right:0;
bottom:10px;
}
#albumspana{
display:block;/*让其拥有盒子模型*/
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0;
}
#albumspana:hover,#albumspana.hover{
color:#F8F8F8;
background-position:00;
}

javascript图片轮换by司徒正美
























1
2
3
4
5
6

这个和我以前的系列一样，不用JS也可以点击实现切换。不过以前是用锚点来改变scrollTop的值，现在是改变scrollLeft的值。

如果不使用缓动效果，很简单。

varRotate=function(id){
try{document.execCommand("BackgroundImageCache",false,true);}catch(e){};
varcontainer=document.getElementById(id),
slide=container.getElementsByTagName("li")[0];
slide.innerHTML+=slide.innerHTML;
varitem=slide.getElementsByTagName("a"),
critical=item[item.length/2].offsetLeft,//临界值
distance=critical/(item.length/2),
delta=-distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta=delta-distance;
if(delta<-critical){
delta=-distance;
}
slide.style.left=delta+"px";//★★★★★★★★
setTimeout(arguments.callee,1500)
},1500)
})()
}

要使用缓动，就要动用我的缓动公式与transition函数，在星号的位置中调用。



javascript图片轮换by司徒正美




#album{
position:relative;
width:400px;
height:300px;
border:10pxsolid#8080C0;
}

#albumul,#albumli{
list-style:none;
margin:0;
padding:0;
}

#albumul{
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00;
}

#albumli{
position:absolute;
width:1000%;
}

#albuma{
float:left;
}

#albumimg{
display:block;
border:0;
}

#albumspan{
position:absolute;
right:0;
bottom:10px;
}

#albumspana{
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0;
}

#albumspana:hover,#albumspana.hover{
color:#F8F8F8;
background-position:00;
}


varspring=function(pos){
return1-(Math.cos(pos*4.5*Math.PI)*Math.exp(-pos*6));
}
vartransition=function(el){
varoptions=arguments[1]||{},
begin=options.begin,//开始位置
change=options.change,//变化量
duration=options.duration||500,//缓动效果持续时间
ftp=options.ftp||50,
onEnd=options.onEnd||function(){},
ease=options.ease,//要使用的缓动公式
end=begin+change,//结束位置
startTime=newDate().getTime();//开始执行的时间
(function(){
setTimeout(function(){
varnewTime=newDate().getTime(),//当前帧开始的时间
timestamp=newTime-startTime,//逝去时间
delta=ease(timestamp/duration);
el.style.left=Math.ceil(begin+delta*change)+"px"
if(duration<=timestamp){
el.style.left=end+"px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
varRotate=function(id){
try{document.execCommand("BackgroundImageCache",false,true);}catch(e){};
varcontainer=document.getElementById(id),
slide=container.getElementsByTagName("li")[0],
paginater=container.getElementsByTagName("span")[0],
links=paginater.getElementsByTagName("a"),
length=links.length,aBefore=length,aIndex;
slide.innerHTML+=slide.innerHTML;
varitem=slide.getElementsByTagName("a"),
critical=item[length].offsetLeft,//临界值
distance=critical/length,
delta=-distance;
(function(){//实现自动轮换图片
setTimeout(function(){
delta=delta-distance;
if(delta<-critical){
delta=-distance;
}
aIndex=-delta/distance;
links[aBefore-1].className="";
links[aIndex-1].className="hover";
aBefore=aIndex;
transition(slide,{begin:delta,change:distance,ease:spring})
setTimeout(arguments.callee,1500)
},1500)
})()
}
window.onload=function(){
Rotate("album");
}

javascript图片轮换by司徒正美
























1
2
3
4
5
6

我们也可以像第一部分那样加入一个信息栏，这样程序就拥有三个定时器了，看起来让人有点头晕，现实中不提倡这样做，这里只是试范一下如何使用transition的回调函数罢了。

//动态生成li元素并把它插入到DOM树中。 vartip=document.createElement("li");//信息栏 tip.style.cssText="position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;"; slide.parentNode.appendChild(tip); if(!+"\v1"){ tip.style.cssText+="color:#369;background:#fff;filter:alpha(opacity=50)"; }else{ tip.style.cssText+="color:#fff;background:rgba(164,173,183,.65);"; }

javascript图片轮换by司徒正美

#album{ position:relative; width:400px; height:300px; border:10pxsolid#8080C0; } #albumul,#albumli{ list-style:none; margin:0; padding:0; } #albumul{ position:relative; height:300px; width:400px; overflow:hidden; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00; } #albumli{ position:absolute; width:1000%; } #albuma{ float:left; } #albumimg{ display:block; border:0; } #albumspan{ position:absolute; right:0; bottom:10px; } #albumspana{ display:block; margin-right:10px; width:15px; height:15px; line-height:15px; text-align:center; text-decoration:none; color:gray; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0; } #albumspana:hover,#albumspana.hover{ color:#F8F8F8; background-position:00; } vareaseInOutCubic=function(pos){ if((pos/=0.5)<1)return0.5*Math.pow(pos,3); return0.5*(Math.pow((pos-2),3)+2); } vartransition=function(el){ varoptions=arguments[1]||{}, begin=options.begin,//开始位置 change=options.change,//变化量 duration=options.duration||500,//缓动效果持续时间 ftp=options.ftp||50, onEnd=options.onEnd||function(){}, ease=options.ease,//要使用的缓动公式 end=begin+change,//结束位置 startTime=newDate().getTime();//开始执行的时间 (function(){ setTimeout(function(){ varnewTime=newDate().getTime(),//当前帧开始的时间 timestamp=newTime-startTime,//逝去时间 delta=ease(timestamp/duration); el.style.left=Math.ceil(begin+delta*change)+"px" if(duration<=timestamp){ el.style.left=end+"px"; onEnd(); }else{ setTimeout(arguments.callee,1000/ftp); } },1000/ftp) })() } varRotate=function(id){ try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}; varcontainer=document.getElementById(id), slide=container.getElementsByTagName("li")[0], paginater=container.getElementsByTagName("span")[0], links=paginater.getElementsByTagName("a"), images=slide.getElementsByTagName("img"), length=links.length,aBefore=length,aIndex; slide.innerHTML+=slide.innerHTML; vartip=document.createElement("li"); tip.style.cssText="position:absolute;bottom:-40px;height:20px;width:380px;padding:10px;color:#fff;background:#fff;"; slide.parentNode.appendChild(tip); if(!+"\v1"){ tip.style.color="#369"; tip.style.filter="alpha(opacity=67)" }else{ tip.style.cssText+="background:rgba(164,173,183,.65);" } varitem=slide.getElementsByTagName("a"), critical=item[length].offsetLeft,//临界值 distance=critical/length, delta=-distance; (function(){//实现自动轮换图片 setTimeout(function(){ delta=delta-distance; if(delta<-critical){ delta=-distance; } aIndex=-delta/distance; tip.innerHTML=images[aIndex-1].getAttribute("alt"); tip.style.bottom="-40px"; links[aBefore-1].className=""; links[aIndex-1].className="hover"; aBefore=aIndex; transition(slide,{begin:delta,change:distance,ease:easeInOutCubic,onEnd:function(){ move(tip); }}) setTimeout(arguments.callee,2000) },2000) })() } varmove=function(el){ varbegin=parseFloat(el.style.bottom),speed=1; el.bottom=begin; (function(){ setTimeout(function(){ el.style.bottom=el.bottom+speed+"px";//移动 el.bottom+=speed; speed*=1.5;//下一次移动的距离 if(el.bottom>=0){ el.style.bottom="0px"; }else{ setTimeout(arguments.callee,25);//每移动一次停留25毫秒 } },25) })() } window.onload=function(){ Rotate("album"); }

javascript图片轮换by司徒正美

1 2 3 4 5 6

javascript图片轮换by司徒正美

#album{ position:relative; width:400px; height:300px; border:10pxsolid#8080C0; } #albumul,#albumli{ list-style:none; margin:0; padding:0; } #albumul{ position:relative; height:300px; width:400px; overflow:hidden; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00; } #albumli{ position:absolute; width:1000%; } #albuma{ float:left; } #albumimg{ display:block; border:0; } #albumspan{ position:absolute; right:0; bottom:10px; } #albumspana{ display:block; margin-right:10px; width:15px; height:15px; line-height:15px; text-align:center; text-decoration:none; color:gray; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0; } #albumspana:hover,#albumspana.hover{ color:#F8F8F8; background-position:00; } vareaseInOutCubic=function(pos){ if((pos/=0.5)<1)return0.5*Math.pow(pos,3); return0.5*(Math.pow((pos-2),3)+2); } vartransition=function(el){ varoptions=arguments[1]||{}, begin=options.begin,//开始位置 change=options.change,//变化量 duration=options.duration||500,//缓动效果持续时间 ftp=options.ftp||50, onEnd=options.onEnd||function(){}, ease=options.ease,//要使用的缓动公式 end=begin+change,//结束位置 startTime=newDate().getTime();//开始执行的时间 (function(){ setTimeout(function(){ varnewTime=newDate().getTime(),//当前帧开始的时间 timestamp=newTime-startTime,//逝去时间 delta=ease(timestamp/duration); el.style.left=Math.ceil(begin+delta*change)+"px" if(duration<=timestamp){ el.style.left=end+"px"; onEnd(); }else{ setTimeout(arguments.callee,1000/ftp); } },1000/ftp) })() } varRotate=function(id){ try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}; varcontainer=document.getElementById(id), slide=container.getElementsByTagName("li")[0], paginater=container.getElementsByTagName("span")[0], links=paginater.getElementsByTagName("a"), images=slide.getElementsByTagName("img"), length=links.length,aBefore=length,aIndex=1; slide.innerHTML+=slide.innerHTML; vartip=document.createElement("li");//信息栏 tip.style.cssText="position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;"; slide.parentNode.appendChild(tip); if(!+"\v1"){ tip.style.cssText+="color:#369;background:#fff;filter:alpha(opacity=50)"; }else{ tip.style.cssText+="color:#fff;background:rgba(164,173,183,.65);"; } varitem=slide.getElementsByTagName("a"), critical=item[length].offsetLeft,//临界值 distance=critical/length, delta=-distance; paginater.onclick=function(e){//实现手动切换 e=e||window.event; vartarget=e.srcElement?e.srcElement:e.target; if(target.nodeName.toLowerCase()=="a"){//事件代理 var_aIndex=aIndex; aIndex=target.getAttribute("href").slice(-1); !+"\v1"?(e.returnValue=false):(e.preventDefault()); delta=-distance*_aIndex; varchange=(aIndex-_aIndex)*distance; if(aIndex>=_aIndex){ transition(slide,{begin:delta,change:change,ease:easeInOutCubic}) }else{ transition(slide,{begin:delta,change:-change,ease:easeInOutCubic}) } } }; (function(){/*实现自动轮换图片*/ setTimeout(function(){ (aIndex>length)&&(aIndex=1); delta=-distance*aIndex; tip.innerHTML=images[aIndex-1].getAttribute("alt");//改变信息栏的文字 links[aBefore-1].className="";//改变按钮的样式 links[aIndex-1].className="hover";//改变按钮的样式 aBefore=aIndex; aIndex++; transition(slide,{begin:delta,change:distance,ease:easeInOutCubic}) setTimeout(arguments.callee,2000) },2000) })() } window.onload=function(){ Rotate("album"); }

javascript图片轮换by司徒正美

1 2 3 4 5 6

javascript图片轮换by司徒正美

#album{ position:relative; width:400px; height:300px; border:10pxsolid#F2F1D7; } #albumul,#albumli{ list-style:none; margin:0; padding:0; } #albumul{ position:relative; height:300px; width:400px; overflow:hidden; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)no-repeat00; } #albumli{ position:absolute; width:1000%; } #albuma{ float:left; } #albumimg{ display:block; border:0; } #albumspan{ position:absolute; right:0; bottom:10px; } #albumspana{ display:block; margin-right:10px; width:15px; height:15px; line-height:15px; text-align:center; text-decoration:none; color:gray; background:transparenturl(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif)no-repeat-15px0; } #albumspana:hover,#albumspana.hover{ color:#F8F8F8; background-position:00; } varpulse=function(pos,pulses){ return(-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2)+.5; } vartransition=function(el){ varoptions=arguments[1]||{}, begin=options.begin,//开始位置 change=options.change,//变化量 duration=options.duration||500,//缓动效果持续时间 ftp=options.ftp||50, onEnd=options.onEnd||function(){}, ease=options.ease,//要使用的缓动公式 end=begin+change,//结束位置 startTime=newDate().getTime();//开始执行的时间 (function(){ setTimeout(function(){ varnewTime=newDate().getTime(),//当前帧开始的时间 timestamp=newTime-startTime,//逝去时间 delta=ease(timestamp/duration,10); el.style.left=Math.ceil(begin+delta*change)+"px" if(duration<=timestamp){ el.style.left=end+"px"; onEnd(); }else{ setTimeout(arguments.callee,1000/ftp); } },1000/ftp) })() } varRotate=function(id){ try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}; varcontainer=document.getElementById(id), slide=container.getElementsByTagName("li")[0], paginater=container.getElementsByTagName("span")[0], links=paginater.getElementsByTagName("a"), images=slide.getElementsByTagName("img"), length=links.length,aBefore=length,aIndex=1; slide.innerHTML+=slide.innerHTML; vartip=document.createElement("li");//信息栏 tip.style.cssText="position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;"; slide.parentNode.appendChild(tip); if(!+"\v1"){ tip.style.cssText+="color:#369;background:#fff;filter:alpha(opacity=50)"; }else{ tip.style.cssText+="color:#fff;background:rgba(164,173,183,.65);"; } varitem=slide.getElementsByTagName("a"), critical=item[length].offsetLeft,//临界值 distance=critical/length, delta=-distance; varmanualSlippage=function(){ vare=arguments[0]||window.event; vartarget=e.srcElement?e.srcElement:e.target; if(target.nodeName.toLowerCase()=="a"){//事件代理 var_aIndex=aIndex; aIndex=target.getAttribute("href").slice(-1); !+"\v1"?(e.returnValue=false):(e.preventDefault()); delta=-distance*_aIndex; varchange=(aIndex-_aIndex)*distance; (aIndex>=_aIndex)&&(change=-change); transition(slide,{begin:delta,change:change,ease:pulse}); } } paginater.onmouseover=manualSlippage; paginater.onclick=manualSlippage; (function(){/*实现自动轮换图片*/ setTimeout(function(){ (aIndex>length)&&(aIndex=1); delta=-distance*aIndex; tip.innerHTML=images[aIndex-1].getAttribute("alt");//改变信息栏的文字 links[aBefore-1].className="";//改变按钮的样式 links[aIndex-1].className="hover";//改变按钮的样式 aBefore=aIndex; aIndex++; transition(slide,{begin:delta,change:distance,ease:pulse}) setTimeout(arguments.callee,2000) },2000) })() } window.onload=function(){ Rotate("album"); }

javascript图片轮换by司徒正美

返回顶部
514930285
czq8825@qq.com

javascript实现图片轮换动作方法

javascript图片轮换by司徒正美

javascript图片轮换by司徒正美

javascript图片轮换by司徒正美

javascript图片轮换by司徒正美

javascript图片轮换by司徒正美

热门推荐

随机推荐