查看效果
Demo
why？
如果用原生写这种图片轮播效果的话，可以思路可以更明了一点，只要对原生熟悉，花一上午应该是可以搞定的，最近本来就在熟悉YUI3，所以就试着做了一个轮播，以后逐渐完善的话，可以做一个插件。
HOW?
写代码前必须去构想，对于CSS部分，图片轮播不像渐隐渐现那么简单用display:none和display:block就可以搞定了，图片轮播需要在所有图片和滑动数字外面加一层div，然后给图片设置一个宽度和高度，这个高度最好和每张图片的宽高度是相同的（这里假设每张图片的尺寸相同）。将div设置成相对定位，position:relative，然后设置overflow为hidden，这样可以使在外面的图片隐藏。然后可以把所有图片放在ul标签或者div里，这样是为了操作整个div，而不用操作每张图片的位置，给这个div的宽度设置为所有图片的宽度总和，这样做是为了可以把所有图片都放在同一行上，然后把图片设置浮动，float:left。
1
2
3
4
5
6
7
| .scrollBar{width: 380px;height: 206px;position: relative;overflow: hidden;margin: 100px auto;}
.scrollPic{width: 2280px;position: absolute;left: 0;}
.scrollPic img{float: left;opacity: 0.7;width: 380px;height: 206px;}
.scrollNum{position: absolute;right: 20px;color: white;bottom: 5px;}
.scrollNum .page{cursor: pointer;margin-right: 3px;}
.simple{font-size: 0.6em;color: white;}
.changeStyle{font-size: 2.0em;color: yellow;}
|
对于JS部分，首先在AUI中必须引入anim模块，动画部分主要是将几张图片看成一个整体就行移动，所以传入到A.Anim里的对象分配的node就是所有图片外面一层固定的div，在这个轮播中，我们首先需要有一个自动轮播的功能，所以需要写一个auto函数，然后用setTimeout去调用它，而在auto函数中，首先设置一个index变量，这个变量对应的是显现图片的索引，索引增加，显现的图片就会变化，给动画对象的to和from对象设置不同的值就能造成一个自动轮播的假象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var startPos = -1*index*boxLength;
sliderBar.set('from', {
left: startPos
});
sliderBar.set('to',{
left: startPos-boxLength
});
if(index === 4){
index = 0;
}else{
index++;
}
sliderBar.run();
select(page,index);
autoSlide = setTimeout(auto,1000);
|
而手动点击数字改变图片显现的原理和自动轮播其实是一样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var target = e.target;
clearTimeout(autoSlide);
index = parseInt(target.getAttribute('index'));
sliderBar.set('from', sliderBar.get('to'));
sliderBar.set('to',{
left: -1*boxLength*(index)
});
sliderBar.run();
select(page,index);
sliderBar.on('end',function(){
this.destroy('end'); //这里很重要，否则每次run完都会执行这个事件
setTimeout(auto,1000);
});
|