学习要点：
1.问题所在
2.设置代码
本节课，我们使用动画功能来完成一组轮播器的功能，轮播器分为透明轮播器和上下滚
动轮播器，希望改变一个值可以切换这两种轮播器。
一．问题所在
![]()
QQ截图20190518092428.png
QQ截图20190518092428.png
二．设置代码
HTML 代码
<div id="banner">
<imgsrc="images/banner1.jpg" alt="轮播器第一张图"/>
<img src="images/banner2.jpg" alt="轮播器第二张图"/>
<img src="images/banner3.jpg" alt="轮播器第三张图"/>
<ul>
<li class="banner1">●</li>
<li class="banner2">●</li>
<li class="banner3">●</li>
</ul>
<span>半透明黑条</span>
<strong>图片说明</strong>
</div>
CSS 代码
#banner {
width:900px;
height:150px;
margin:10px 0;
float:left;
position:relative;
overflow:hidden;
}
#banner img {
display:block;
position:absolute;
left:0;
}
#banner ul {
position:absolute;
top:128px;
left:420px;
z-index:4;
}
#banner ul li {
float:left;
padding:0 5px;
color:#999;
cursor:pointer;
font-size:16px;
}
#banner span {
display:block;
width:900px;
height:25px;
background:#333;
position:absolute;
top:125px;
left:0;
opacity:0.3;
filter:alpha(opacity=30);
z-index:3;
}
#banner strong {
position:absolute;
top:130px;
left:10px;
color:#fff;
z-index:4;
}
JS 代码
//轮播器初始化
$('#banner img').opacity(0);
$('#banner img').eq(0).opacity(100);
$('#banner strong').html($('#banner img').eq(0).attr('alt'));
$('#banner ul li').eq(0).css('color', '#333');
//轮播器坐标
for (var i = 0; i < $('#banner img').length(); i ++) {
$('#banner img').eq(i).css('top', 0 + (i * 150) + 'px');
}
//轮播计数器
var banner_index = 1;
//轮播器类别
var banner_type = 2; //1 是透明度轮播，2 是上下滚动轮播
//轮播器自动播放
var banner_timer = setInterval(banner_fn, 3000);
//轮播器手动播放
$('#banner ul li').hover(function () {
clearInterval(banner_timer);
if ($(this).css('color') != 'rgb(51, 51, 51)') {
banner(this, banner_index == 0 ? $('#banner ul li').length() - 1 : banner_index - 1);
}
}, function () {
banner_index = $(this).index() + 1;
banner_timer = setInterval(banner_fn, 3000);
});
function banner(obj, prev) {
if (banner_type == 1) {
$('#banner img').css('zIndex', 1);
$('#banner ul li').css('color', '#999');
$(obj).css('color', '#333');
$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
$('#banner img').eq(prev).animate({
attr : 'o',
target : 0,
t : 30,
step : 10
});
$('#banner img').eq($(obj).index()).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
}).css('top', 0).css('zIndex', 2);
} else if (banner_type == 2) {
$('#banner img').opacity(100);
$('#banner img').css('zIndex', 1);
$('#banner ul li').css('color', '#999');
$(obj).css('color', '#333');
$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
$('#banner img').eq(prev).animate({
attr : 'y',
target : 150,
t : 30,
step : 10
});
$('#banner img').eq($(obj).index()).animate({
attr : 'y',
target : 0,
t : 30,
step : 10
}).css('top', '-150px').css('zIndex', 2);
}
}
function banner_fn() {
if (banner_index >= $('#banner ul li').length()) banner_index = 0;
banner($('#banner ul li').eq(banner_index).first(), banner_index == 0 ?
$('#banner ul li').length() - 1 : banner_index - 1);
banner_index++;
}
//获取某个节点在某组的位置
Base.prototype.index = function () {
var children = this.elements[0].parentNode.children;
for (var i = 0; i < children.length; i ++) {
if (children[i] == this.elements[0]) return i;
}
};
//获取某个节点的属性
Base.prototype.attr = function (attr) {
return this.elements[0][attr];
};
//设置节点元素的透明度
Base.prototype.opacity = function (num) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.opacity = num / 100;
this.elements[i].style.filter = 'alpha(opacity=' + num + ')';
}
return this;
};
