淡入淡出焦點圖效果類
這里是緩動焦點圖鏈接：
JavaScript 緩動焦點圖實現的幾種寫法 封裝 + 函數式 + JQuery
焦點圖
實現思路：
原生JS的類的調用方式：
var slider1 = new Slider({
id:'focus_pic', /**包裹圖片的UL的ID**/
btnId:"focus_btn", //幻燈片按鈕的ID,可以用來控制CSS顯示
//step:5, //透明度變化步長，默認為2
autoTime:2000//自動播放間隔時間
});
幻燈片的HTML書寫方式：
<ul id="focus_pic"> <li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_01.jpg"
width="530" height="180" alt=""></a></li> <li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_02.jpg"
width="530" height="180" alt=""></a></li> <li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_03.jpg"
width="530" height="180" alt=""></a></li> <li><a target="_blank" href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_04.jpg"
width="530" height="180" alt=""></a></li> </ul>
幻燈片的原生JavaScript代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>焦點圖</title>
<style type="text/css">
#focus_box {
position: relative;
margin: 0 auto;
zoom: 1;
width: 530px;
height: 180px;
overflow: hidden;
}
#focus_box ul {
list-style: none;
padding: 0;
margin: 0;
}
#focus_btn {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 2;
}
#focus_pic {
position: absolute;
}
#focus_pic li {
position: absolute;
left: 0;
}
#focus_pic li img {
border: none;
float: left;
}
#focus_btn li {
float: left;
font-size: 12px;
width: 25px;
height: 25px;
line-height: 25px;
font-weight: bold;
text-align: center;
background: #fff;
color: #000;
margin-right: 2px;
cursor: pointer;
border-radius: 20px;
}
#focus_btn li.on {
background: #f60;
color: #fff;
}
#focus_box1 {
position: relative;
margin: 0 auto;
overflow: hidden;
zoom: 1;
}
#focus_box1 ul {
list-style: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="focus_box">
<ul id="focus_pic">
<li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_01.jpg"></a></li>
<li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_02.jpg"></a></li>
<li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_03.jpg"></a></li>
<li><a><img src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_04.jpg"></a></li>
</ul>
</div>
<script type="text/javascript">
(function () {
//先設置兩個簡潔函數獲取ID，設置透明度
var $ = function () {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (!element) continue;
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
};
var setOpacity = function (node, level) {
node = $(node);
if (document.all) {
node.style.filter = 'alpha(opacity=' + level + ')';
} else {
node.style.opacity = level / 100;
}
};
var getTag = function (child, parent) {
return parent.getElementsByTagName(child);
};
var bindEvent = function (element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false); //false 表示冒泡
} else if (element.attachEvent) {
element.attachEvent('on' + type, func);
} else {
element['on' + type] = func;
}
};
function Slider(options) {
var id = options.id;
var warper = this.warper = $(id);//獲取包裹圖片DOM(第一個UL的ID)
var warpLis = this.warpLis = getTag("li", warper);//獲取包裹下的LI子元素
this.no = warpLis.length;//獲取包裹LI元素的個數
this.step = options.step || 2;
this.autoTime = options.autoTime || 1000; //自動播放間隔時間
this.btnId = options.btnId || "focus_btn"; //圖片上面的數字按鈕的ID
this.index = 1; // 開始變幻時的下一個INDEX
this.preIndex = 0;
this.init();
}
Slider.prototype = {
init:function () {
this.makeBtn(this.no, this.btnId);
this.autoPlay();
},
makeBtn:function (no, c) {//生成按鈕 no表示個數 C表示UL的ID
var btnUl = this.btnUl = document.createElement("ul");
btnUl.id = c;
for (var i = 0; i < no; i++) {
var li = document.createElement('li');
if (i == 0) li.className = 'on';
var text = document.createTextNode(i + 1);
li.appendChild(text);
setOpacity(li, 80);
// 綁定鼠標事件，傳遞當前的INDEX和preIndex
bindEvent(li, 'mouseover', function (obj, t) {
return function () {
obj.mouseOn.call(obj, t);
}
}(this, i));
btnUl.appendChild(li);
}
this.warper.parentNode.appendChild(btnUl);//添加到父div下
},
autoPlay:function(){
var that = this;
// 執行播放
clearTimeout(this.T1);
this.T1 = setTimeout(function(){that.fadeIn(that.index)},that.autoTime);
},
fadeIn:function(index){
var thisObj = this.warpLis[index];
var thisOpacity = 0; //當前透明度從0漸入
var that = this;
// 底部按鈕的同步,與當前的圖層Z-index始終在上面
var btnLi = getTag('li', this.btnUl);
for (var i = 0, n = btnLi.length; i < n; i++) {
btnLi[i].className = '';
// 移除所有的Zindex
this.warpLis[i].style.zIndex = '';
}
//在改變INDEX之前先設置透明度為0
setOpacity(this.warpLis[index],0);
// 設置前一個圖片的Zindex
this.warpLis[that.preIndex].style.zIndex = 1;
// 設置當前圖片的Zindex
this.warpLis[index].style.zIndex = 2;
btnLi[index].className = 'on';
//淡入動畫
if(that.T2)clearInterval(that.T2);
this.T2 = setInterval(function(){
setOpacity(thisObj,thisOpacity++); // 設置透明度漸入
if(thisOpacity == 100){
thisOpacity = 0;
clearInterval(that.T2);
that.T2 = null;
that.preIndex = that.index ++;
if(that.index == that.no)that.index = 0;
that.autoPlay();
}
},10);
},
mouseOn:function(index){
this.index = index;
this.fadeIn(index);
}
};
var slider1 = new Slider({
id:'focus_pic', /**包裹圖片的UL的ID**/
btnId:"focus_btn", //幻燈片按鈕的ID,可以用來控制CSS顯示
//step:5, //透明度變化步長，默認為2
autoTime:2000//自動播放間隔時間
});
})();
</script>
</body>
</html>
用Jquery 方法實現代碼：
slider函數的參數解釋：id-包裹UL的DIV的id，autoTime-自動播放時間，btn-為是否需要控制按鈕，此參數不填即帶控制按鈕
調用方法：
slider("focus_pic", 3000);//層的ID與自動播放時間
slider("focus_pic", 3000,"noButton"); //幻燈片不帶按鈕
var slider = function (id, autoTime, btn) { var $div = $("#" + id), len = $("li", $div).length; var index = 1, timer, preIndex = 0; // 初始化 $div.find("li").css("opacity", 0).eq(0).css("opacity", 1); // 生成按鈕 if (!btn) { var $dl = $("<dl id='J_flashBtn'></dl>"); for (var i = 0; i < len; i++) { var $dt = $("<dt>" + (i + 1) + "</dt>"); $dl.append($dt); } $div.append($dl); $dl.find("dt").css("opacity", 0.8).eq(0).addClass("on"); // 按鈕事件 $dl.find("dt").hover( function () { clearInterval(timer); index = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); auto(index);
preIndex = index; }, function () { timer = setInterval(function () { auto(index); preIndex = index++; if (index > len - 1) index = 0; }, autoTime); }); } // 循環執行 timer = setInterval(function () { auto(index); preIndex = index++; if (index > len - 1) index = 0; }, autoTime); // 主要動畫 function auto(index) { $div.find("li").eq(preIndex).css("z-index","0").stop(true, false).animate({opacity:0}, 800); $div.find("li").eq(index).css("z-index","1").stop(true, false).animate({opacity:1}, 800); if(!btn){ $dl.find("dt").eq(index).addClass("on").siblings().removeClass("on"); } } };