原生Javascript焦点图切换控件
<div id="cnblogs_post_body">很常见的javascript效果，写成控件，需要的时候可以直接拿来用点击这里查看原生Javascript焦点图切换控件的演示
代码：
<div class="cnblogs_Highlighter">//原生JavaScript焦点图切换控件function PicSlide(){var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素var list = document.getElementById("slide-list").getElementsByTagName('li');//根据需要选择元素var delay = 3000;var _this = this;_this.active = 0; //当前显示内容的下标_this.list = list;_this.controls = controls;for(var i=0; i<controls.length; i++){controls.index = i;controls.onmouseenter = function(){if(this.index === _this.active) return;clearInterval(_this.timer);_this.clear();_this.select(this);};controls.onmouseleave= function(){clearInterval(_this.timer);_this.timer = setInterval(function(){_this.run()}, delay);};}_this.timer = setInterval(function(){ _this.run() }, delay);};PicSlide.prototype = {/*内容淡入*/select: function(target){target.className = 'active';this.active = target.index;effect.animate(this.list, { 'opacity': 100 } );},/*内容淡出*/clear: function(){var controls = this.controls;var list = this.list;var active = this.active;controls.className = '';effect.animate(list, { 'opacity': 0 });},/*顺序播放焦点图*/run: function(){var controls = this.controls;var list = this.list;var active = this.active;this.clear();active += 1;active = active % controls.length;controls.className = 'active';effect.animate(list, { 'opacity': 100 } );this.active = active;}};
页:
[1]