图片渐出轮播的效果
核心代码：
<style tyle="text/css">
#player
{
position: relative;
width: 960px;
height: 149px;
overflow: hidden;
margin: 11px auto 0 auto;
}
#player a
{
color: #333;
}
#player *
{
border: 0;
padding: 0;
margin: 0;
}
#player .Limg
{
position: relative;
}
#player .Limg li
{
position: absolute;
top: 0;
left: 0;
background: #fff;
}
#player .Limg li img
{
border: 1px solid #FFFFFF;
margin: 0;
}
#player .Limg li p
{
line-height: 25px;
font-size: 14px;
padding-left: 15px;
}
#player .Nubbt
{
position: absolute;
z-index: 9;
right: 5px;
bottom: 3px;
line-height: 25px;
}
#player .Nubbt span
{
border: 1px solid #45A06F;
background: #fff;
padding: 1px 5px;
margin: 0 2px;
font-style: normal;
cursor: pointer;
}
#player .Nubbt span.on
{
background: #47AA72;
color: #fff;
}
#player li a img
{
width: 960px;
height: 150px;
}
</style>
<div id="player">
<ul class="Limg">
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/1.jpg" />
<p>F:\tupian\1.jpg</p>
</a></li>
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/2.jpg" />
<p>F:\tupian\2.jpg</p>
</a></li>
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/3.jpg" />
<p>F:\tupian\3.jpg</p>
</a></li>
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/4.jpg" />
<p>F:\tupian\4.jpg</p>
</a></li>
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/5.jpg" />
<p>F:\tupian\5.jpg</p>
</a></li>
<li><a href="#" target="_blank"><img alt="" src="http://www.cnblogs.com/lonelyofsoul/admin/file:///F:/tupian/6.jpg" />
<p>F:\tupian\6.jpg</p>
</a></li>
</ul>
<cite class="Nubbt"><span class="on">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </cite></div>
<script type="text/javascript">
//*焦点切换
(function() {
if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var owner = this, args = Array.prototype.slice.call(arguments), callobj = Array.prototype.shift.call(args);
return function(e) { e = e || top.window.event || window.event; owner.apply(callobj, args.concat([e])); };
};
}
})();
var player = function(id) {
this.ctn = document.getElementById(id);
this.adLis = null;
this.btns = null;
this.animStep = 0.2; //动画速度0.1～0.9
this.switchSpeed = 3; //自动播放间隔(s)
this.defOpacity = 1;
this.tmpOpacity = 1;
this.crtIndex = 0;
this.crtLi = null;
this.adLength = 0;
this.timerAnim = null;
this.timerSwitch = null;
this.init();
};
player.prototype = {
fnAnim: function(toIndex) {
if (this.timerAnim) { window.clearTimeout(this.timerAnim); }
if (this.tmpOpacity <= 0) {
this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity;
this.crtLi.style.filter = 'Alpha(Opacity=' + this.defOpacity * 100 + ')';
this.crtLi.style.zIndex = 0;
this.crtIndex = toIndex;
return;
}
this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animStep;
this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity * 100 + ')';
this.timerAnim = window.setTimeout(this.fnAnim.bind(this, toIndex), 50);
},
fnNextIndex: function() {
return (this.crtIndex >= this.adLength - 1) ? 0 : this.crtIndex + 1;
},
fnSwitch: function(toIndex) {
if (this.crtIndex == toIndex) { return; }
this.crtLi = this.adLis[this.crtIndex];
for (var i = 0; i < this.adLength; i++) {
this.adLis[i].style.zIndex = 0;
}
this.crtLi.style.zIndex = 2;
this.adLis[toIndex].style.zIndex = 1;
for (var i = 0; i < this.adLength; i++) {
this.btns[i].className = '';
}
this.btns[toIndex].className = 'on'
this.fnAnim(toIndex);
},
fnAutoPlay: function() {
this.fnSwitch(this.fnNextIndex());
},
fnPlay: function() {
this.timerSwitch = window.setInterval(this.fnAutoPlay.bind(this), this.switchSpeed * 1000);
},
fnStopPlay: function() {
window.clearTimeout(this.timerSwitch);
},
init: function() {
this.adLis = this.ctn.getElementsByTagName('li');
this.btns = this.ctn.getElementsByTagName('cite')[0].getElementsByTagName('span');
this.adLength = this.adLis.length;
for (var i = 0, l = this.btns.length; i < l; i++) {
with ({ i: i }) {
this.btns[i].index = i;
this.btns[i].onclick = this.fnSwitch.bind(this, i);
//this.btns[i].onclick = this.fnSwitch.bind(this, i);
}
}
this.adLis[this.crtIndex].style.zIndex = 2;
this.fnPlay();
this.ctn.onmouseover = this.fnStopPlay.bind(this);
this.ctn.onmouseout = this.fnPlay.bind(this);
}
};
var player1 = new player('player');
</script>
