- <html>
- <head>
- <title>无jQuery焦点图片广告</title>
- <style>
- #player{position:relative;width:416px;height:275px;overflow:hidden; margin:11px auto 0 auto; border:1px solid #ccc;}
- #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;}
- </style>
- </head>
- <body>
- <h1>无jQuery点图切换JS代码</h1>
- <div id="player">
- <ul class="Limg">
- <li><a href="#" target="_blank"><img src1="/jsCSS/demoimg/201009/player01.jpg"/><p>宣传新专辑与徐静蕾合作很紧张 </p></a></li>
- <li><a href="#" target="_blank"><img src1="/jscss/demoimg/201009/player02.jpg"/><p>尚雯婕为演唱会携天价古董拍海报</p></a></li>
- <li><a href="#" target="_blank"><img src1="/jscss/demoimg/201009/player03.jpg"/><p>爸妈齐助阵周杰伦2010年新专辑MV</p></a></li>
- <li><a href="#" target="_blank"><img src1="/jscss/demoimg/201009/player04.jpg"/><p>阿朵唱功遭质疑撩裙露臀卖肉博眼球</p></a></li>
- </ul>
- <cite class="Nubbt"><span class="on">1</span><span >2</span><span >3</span><span >4</span></cite>
- </div>
- <script language=javascript 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> <!--/*焦点图切换JS结束*/-->
- </BODY>
- </HTML>
- //该片段来自于http://www.codesnippet.cn/detail/270320132592.html
来源: http://www.codesnippet.cn/detail/270320132592.html