javascript图片轮换2

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

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

< div id = "album" >

< ul >

< li >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index1" >

< img alt = "月光下的花瓣" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />

</ a >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index2" >

< img alt = "清澈的湖水" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />

</ a >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index3" >

< img alt = "荒漠上的植物" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />

</ a >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index4" >

< img alt = "末日霓虹" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />

</ a >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index5" >

< img alt = "绿·生意" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />

</ a >

< a href = "http://www.cnblogs.com/rubylouvre" id = "index6" >

< img alt = "又是收获的季节" src = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />

</ a >

</ li >

</ ul >

< span >

< a href = "#index1" >1</ a >

< a href = "#index2" >2</ a >

< a href = "#index3" >3</ a >

< a href = "#index4" >4</ a >

< a href = "#index5" >5</ a >

< a href = "#index6" >6</ a >

</ span >

</ div >

#album {

position : relative ; /*为分页栏准备的*/

width : 400px ; /*必须设置，为分页栏准备*/

height : 300px ; /*必须设置，为分页栏准备*/

border : 10px solid #8080C0 ;

}

#album ul ,#album li { /*消除默认样式*/

padding : 0 ;

margin : 0 ;

list-style : none ;

}

#album ul{

position : relative ; /*为图片滑动区*/

height : 300px ; /*必须设置，用于隐藏图片滑动区多余的部分*/

width : 400px ; /*必须设置，用于隐藏图片滑动区多余的部分*/

overflow : hidden ;

background : transparent url (http://images.cnblogs.com/cnblogs_com/rubylouvre/ 199042 /o_s 001 .jpg) no-repeat 0 0 ;

}

#album li { /*图片滑动区*/

position : absolute ;

width : 1000% ; /*让里面的所有图片并列显示*/

}

#album a {

float : left ;

}

#album img {

display : block ;

border : 0 ;

}

#album span { /*分页栏*/

position : absolute ;

right : 0 ;

bottom : 10px ;

}

#album span a{

display : block ; /*让其拥有盒子模型*/

margin-right : 10px ; /*错开格子*/

width : 15px ; /*呈正方形*/

height : 15px ;

line-height : 15px ;

text-align : center ; /*居中显示*/

text-decoration : none ; /*消除下划线*/

color : #808080 ;

background : transparent url (http://images.cnblogs.com/cnblogs_com/rubylouvre/ 199042 /o_button.gif) no-repeat -15px 0 ;

}

#album span a:hover ,#album span a.hover{

color : #F8F8F8 ;

background-position : 0 0 ;

}

运行代码

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

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

var Rotate = function (id){

try {document.execCommand( "BackgroundImageCache" , false , true );} catch (e){};

var container = document.getElementById(id),

slide = container.getElementsByTagName( "li" )[0];

slide.innerHTML += slide.innerHTML;

var item = 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函数，在星号的位置中调用。

<!doctype html> <title>javascript图片轮换 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换 by 司徒正美" /> <meta name="description" content="javascript图片轮换 by 司徒正美" /> <style type="text/css">#album {position:relative;width:400px;height:300px;border:10px solid #8080C0;}#album ul,#album li {list-style:none;margin:0;padding:0;}#album ul {position:relative;height:300px;width:400px;overflow:hidden;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;}#album li {position:absolute;width:1000%;}#album a {float:left;}#album img {display:block;border:0;}#album span {position:absolute;right:0;bottom:10px;}#album span a {display:block;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:gray;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;}#album span a:hover,#album span a.hover {color:#F8F8F8;background-position:0 0;} </style> <script type="text/javascript">var spring= function(pos) {return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));}var transition = function(el){var options = 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 = new Date().getTime();//开始执行的时间(function(){setTimeout(function(){var newTime = new Date().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)})()}var Rotate = function(id){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};var container = 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;var item = 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");} </script> <h4>javascript图片轮换 by 司徒正美</h4> <div id="album"><ul><li><a href="http://www.cnblogs.com/rubylouvre" id="index1"><img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index2"><img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index3"><img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index4"><img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index5"><img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index6"><img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /></a></li></ul><span><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a></span> </div>

运行代码

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

//动态生成li元素并把它插入到DOM树中。

var tip = 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);" ;

}

<!doctype html> <title>javascript图片轮换 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换 by 司徒正美" /> <meta name="description" content="javascript图片轮换 by 司徒正美" /> <style type="text/css">#album {position:relative;width:400px;height:300px;border:10px solid #8080C0;}#album ul,#album li {list-style:none;margin:0;padding:0;}#album ul {position:relative;height:300px;width:400px;overflow:hidden;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;}#album li {position:absolute;width:1000%;}#album a {float:left;}#album img {display:block;border:0;}#album span {position:absolute;right:0;bottom:10px;}#album span a {display:block;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:gray;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;}#album span a:hover,#album span a.hover {color:#F8F8F8;background-position:0 0;} </style> <script type="text/javascript">var easeInOutCubic= function(pos){if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);return 0.5 * (Math.pow((pos-2),3) + 2);}var transition = function(el){var options = 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 = new Date().getTime();//开始执行的时间(function(){setTimeout(function(){var newTime = new Date().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)})()}var Rotate = function(id){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};var container = 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;var tip = 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);"}var item = 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)})()}var move = function(el){var begin = 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");} </script> <h4>javascript图片轮换 by 司徒正美</h4> <div id="album"><ul><li><a href="http://www.cnblogs.com/rubylouvre" id="index1"><img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index2"><img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index3"><img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index4"><img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index5"><img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index6"><img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /></a></li></ul><span><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a></span> </div>

运行代码

最后为信息栏上的按钮绑定点击事件就行了。

<!doctype html> <title>javascript图片轮换 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换 by 司徒正美" /> <meta name="description" content="javascript图片轮换 by 司徒正美" /> <style type="text/css">#album {position:relative;width:400px;height:300px;border:10px solid #8080C0;}#album ul,#album li {list-style:none;margin:0;padding:0;}#album ul {position:relative;height:300px;width:400px;overflow:hidden;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;}#album li {position:absolute;width:1000%;}#album a {float:left;}#album img {display:block;border:0;}#album span {position:absolute;right:0;bottom:10px;}#album span a {display:block;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:gray;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;}#album span a:hover,#album span a.hover {color:#F8F8F8;background-position:0 0;} </style> <script type="text/javascript">var easeInOutCubic= function(pos){if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);return 0.5 * (Math.pow((pos-2),3) + 2);}var transition = function(el){var options = 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 = new Date().getTime();//开始执行的时间(function(){setTimeout(function(){var newTime = new Date().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)})()}var Rotate = function(id){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};var container = 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;var tip = 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);";}var item = slide.getElementsByTagName("a"),critical = item[length].offsetLeft,//临界值distance = critical/length,delta = - distance;paginater.onclick = function(e){//实现手动切换e = e || window.event;var target = 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;var change = (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");} </script> <h4>javascript图片轮换 by 司徒正美</h4> <div id="album"><ul><li><a href="http://www.cnblogs.com/rubylouvre" id="index1"><img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index2"><img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index3"><img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index4"><img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index5"><img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index6"><img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /></a></li></ul><span><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a></span> </div>

运行代码

有的人很懒，不喜欢点击，想在按钮上一掠而过也能看到效果。这简单，我们把绑定函数独立出来，分别绑定到onclick事件与onmouseover事件上就行了。现在我们换一个缓动公式，反正这东西多着呢。比如这个pulse，像蛇信子一样来回多次振动（默认5次，有第二个参数可以自己调，我调到10次），非常有意思。你们可以试试一下子掠过所有按钮，效果是何等的炫目！

<!doctype html> <title>javascript图片轮换 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="javascript图片轮换 by 司徒正美" /> <meta name="description" content="javascript图片轮换 by 司徒正美" /> <style type="text/css">#album {position:relative;width:400px;height:300px;border:10px solid #F2F1D7;}#album ul,#album li {list-style:none;margin:0;padding:0;}#album ul {position:relative;height:300px;width:400px;overflow:hidden;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;}#album li {position:absolute;width:1000%;}#album a {float:left;}#album img {display:block;border:0;}#album span {position:absolute;right:0;bottom:10px;}#album span a {display:block;margin-right:10px;width:15px;height:15px;line-height:15px;text-align:center;text-decoration:none;color:gray;background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;}#album span a:hover,#album span a.hover {color:#F8F8F8;background-position:0 0;} </style> <script type="text/javascript">var pulse = function(pos, pulses) {return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;}var transition = function(el){var options = 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 = new Date().getTime();//开始执行的时间(function(){setTimeout(function(){var newTime = new Date().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)})()}var Rotate = function(id){try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};var container = 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;var tip = 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);";}var item = slide.getElementsByTagName("a"),critical = item[length].offsetLeft,//临界值distance = critical/length,delta = - distance;var manualSlippage = function(){var e = arguments[0] || window.event;var target = 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;var change = (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");} </script> <h4>javascript图片轮换 by 司徒正美</h4> <div id="album"><ul><li><a href="http://www.cnblogs.com/rubylouvre" id="index1"><img alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index2"><img alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index3"><img alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index4"><img alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index5"><img alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" /></a><a href="http://www.cnblogs.com/rubylouvre" id="index6"><img alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" /></a></li></ul><span><a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a></span> </div> <p>使用的是多次摇晃的残影特效pulse.<p>

运行代码

javascript图片轮换2相关推荐

javascript图片轮换
先完成结构层与表现层部分,做一个纯CSS相册,好让JS不能动弹时,相册还能运作.过程见<纯CSS相册>,只不过是在它的基础再做了一些优化,更符合人的思路走向,好让下面JS顺产而已. < ...
xml+javascript实现简单图片轮换
最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 1<?xml version=" ...
javascript图片浏览器的核心——图片预加载
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更 ...
js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
简单的图片轮播器（一）：一个关于仿flash的图片轮换器
仿flash的图片轮换器 web小渣渣,最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波,发一篇博客记录一波学习历程最终效果图: 最终代码如下: tuPianLunHua ...
腾讯《活着》频道JS图片轮换效果解析
腾讯<活着>频道JS图片轮换效果解析 1.原理分析总析: 包含内容的层->宽:900 高:400 主要显示层-> 宽800 高400 即最上面那层 z-index=100 中 ...
CMS用通用图片轮换flash幻灯片播放器：Bcastr3和Bcastr4
这款Bcastr通用图片轮换播放器(或者叫他幻灯片播放器),由于其简洁的代码及其易用性,被dedeCMS.PHPCMS.帝国CMS.Z-blog等诸多网站内容管理程序开发者广泛引用.被使用的最多的是b ...
php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...

javascript图片轮换2

javascript图片轮换2

javascript图片轮换2相关推荐

最新文章

热门文章