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
>
</
a
>
</
a
>
</
a
>
</
a
>
</
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函数，在星号的位置中调用。
我们也可以像第一部分那样加入一个信息栏，这样程序就拥有三个定时器了，看起来让人有点头晕，现实中不提倡这样做，这里只是试范一下如何使用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);"
;
}
|
最后为信息栏上的按钮绑定点击事件就行了。
有的人很懒，不喜欢点击，想在按钮上一掠而过也能看到效果。这简单，我们把绑定函数独立出来，分别绑定到onclick事件与onmouseover事件上就行了。现在我们换一个缓动公式，反正这东西多着呢。比如这个pulse，像蛇信子一样来回多次振动（默认5次，有第二个参数可以自己调，我调到10次），非常有意思。你们可以试试一下子掠过所有按钮，效果是何等的炫目！
扫一扫
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
