纳金网
标题:
四种JS图片切换幻灯焦点图代码，来自淘宝网
[打印本页]
作者:
奇
时间:
2011-12-30 19:17
标题:
四种JS图片切换幻灯焦点图代码，来自淘宝网
四各JS图片切换幻灯焦点图代码，来自淘宝网的网页特效，一种是淡入淡出式，另一种是上下滚动式，第三种是左右移动式，第四种与第一种切换方式几乎相同，同为渐入渐出的，四种方式根据你的喜好自由选择，另外也是很不错的学习参考。
示例：
<!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">
body {margin:0px;padding:0px;background:url(/uploads/allimg/1109/bg.jpg);}
ul, li {margin:0px;padding:0px;float:left;list-style-type:none;}
.frame {width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto;}
.box {width:490px;height:170px;padding:1px;float:left;display:inline;margin:5px;background:#fff;position:relative;border:1px solid #dedede;}
.list {width:490px;height:170px;float:left;overflow:hidden; position:relative;}
.list ul {position:absolute;top:0px;left:0px;}
.list li {width:490px;height:170px;float:left;}
.list li.opacity {position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity:0)}
.but {width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1;}
.but li {width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:center;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa;}
.but li.hove {background:#ff902a;border:1px solid #ff6502;}
</style>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem
.className == sClass)aClass.push(aElem
);
return aClass;
}
function Slide(){
this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
Slide.prototype = {
initialize : function(obj, list, but, hove, onEnd){
if($(obj)){
this.obj = $(obj);
this.oList = $$$(this.obj, list)[0];
this.oUl = $$(this.oList, 'ul')[0];
this.aList = $$(this.oList, 'li');
this.aListH = this.aList[0].offsetHeight;
this.aListW = this.aList[0].offsetWidth;
this.oBut = $$$(this.obj, but)[0];
this.aBut = $$(this.oBut, 'li');
this.oEve(onEnd);
this.oAction = this.onEnd.action;
this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";
this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";
if(this.oAction == 'top'){
this.oUl.style.height = this.aListH * this.aList.length +'px';
}else if(this.oAction == 'left'){
this.oUl.style.width = this.aListW * this.aList.length +'px';
}else if(this.oAction == 'opacity'){
this.oUl.style.height = this.aListH +'px';
var i = 0;
for(i=0;i<this.aList.length;i++){
this.aList
.style.position = 'absolute';
this.aList
.className = 'opacity';
}
this.aList[0].className = '';
}else{
this.oUl.style.height = this.aListH * this.aList.length +'px';
}
this.getEvent(hove);
}
},
oEve: function(onEnd){
this.onEnd = {
method : 'click',
autoplay: 'stop'
};
Object.extend(this.onEnd, onEnd || {});
},
addEvent : function(oElm, strEvent, fuc) {
window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc);
},
getEvent : function(hove) {
var _this = this;
var i = iNow = 0;
for(i=0;i<this.aBut.length;i++){
(function(){
var j = i;
_this.addEvent(_this.aBut[j], _this.method, function(){
_this.fnClick(j, hove);
_this.autoPlayTab(j, hove);
});
})();
}
this.autoPlayTab(i, hove);
},
autoPlayTab : function(iNow, hove){
if(this.autoplay == 'play'){
var _this = this;
this.iNow = iNow;
this.obj.onmouseover = function(){
clearInterval(_this.timer);
};
this.obj.onmouseout = function(){
clearInterval(_this.timer);
_this.timer = setInterval(playTab,3000);
};
clearInterval(_this.timer);
_this.timer = setInterval(playTab,3000);
function playTab(){
if(_this.iNow == _this.aBut.length)_this.iNow = 0;
_this.fnClick(_this.iNow, hove);
_this.iNow++;
}
}
},
fnClick : function(oBut, hove){
var i = 0;
for(i=0;i<this.aBut.length;i++)this.aBut
.className = '';
this.aBut[oBut].className = hove;
if(this.oAction == 'top'){
this.sMove(this.oUl, {top:-(this.aListH * oBut)});
}else if(this.oAction == 'left'){
this.sMove(this.oUl, {left:-(this.aListW * oBut)});
}else if(this.oAction == 'opacity'){
var i = 0;
for(i=0;i<this.aList.length;i++){
this.sMove(this.aList
, {opacity:0});
}
this.sMove(this.aList[oBut], {opacity:100});
}else{
this.sMove(this.oUl, {top:-(this.aListH * oBut)});
}
},
getStyle : function(obj, attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
},
sMove : function(obj, json, onEnd){
var _this = this;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
_this.dMove(obj, json, onEnd);
},30);
},
dMove : function(obj, json, onEnd){
this.attr = '';
this.bStop = true;
for(this.attr in json){
this.iCur = 0;
this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));
this.iSpeed = (json[this.attr] - this.iCur) / 7;
this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);
if(json[this.attr] != this.iCur)this.bStop = false;
if(this.attr == 'opacity'){
obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';
obj.style.opacity = (this.iCur + this.iSpeed ) / 100;
}else{
obj.style[this.attr] = this.iCur + this.iSpeed + 'px';
}
}
if(this.bStop){
clearInterval(obj.timer);
if(onEnd)onEnd();
}
}
};
</script>
<script type="text/javascript">
window.onload = function(){
new Slide('box', 'list', 'but', 'hove', {action : 'opacity'});
new Slide('box1', 'list', 'but', 'hove', {method : 'mouseover', action : 'top', autoplay : 'play'});
new Slide('box2', 'list', 'but', 'hove', {action : 'left', autoplay : 'play'});
new Slide('box3', 'list', 'but', 'hove', {action : 'opacity', autoplay : 'play'});
};
</script>
</head>
<body>
<div class="frame">
<div class="box" id="box">
<div class="list">
<ul>
<li><img src="/uploads/allimg/1109/01.png" /></li>
<li><img src="/uploads/allimg/1109/02.jpg" /></li>
<li><img src="/uploads/allimg/1109/03.jpg" /></li>
<li><img src="/uploads/allimg/1109/04.jpg" /></li>
<li><img src="/uploads/allimg/1109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box1">
<div class="list">
<ul>
<li><img src="/uploads/allimg/1109/01.png" /></li>
<li><img src="/uploads/allimg/1109/02.jpg" /></li>
<li><img src="/uploads/allimg/1109/03.jpg" /></li>
<li><img src="/uploads/allimg/1109/04.jpg" /></li>
<li><img src="/uploads/allimg/1109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box2">
<div class="list">
<ul>
<li><img src="/uploads/allimg/1109/01.png" /></li>
<li><img src="/uploads/allimg/1109/02.jpg" /></li>
<li><img src="/uploads/allimg/1109/03.jpg" /></li>
<li><img src="/uploads/allimg/1109/04.jpg" /></li>
<li><img src="/uploads/allimg/1109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box3">
<div class="list">
<ul>
<li><img src="/uploads/allimg/1109/01.png" /></li>
<li><img src="/uploads/allimg/1109/02.jpg" /></li>
<li><img src="/uploads/allimg/1109/03.jpg" /></li>
<li><img src="/uploads/allimg/1109/04.jpg" /></li>
<li><img src="/uploads/allimg/1109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/38677.html
作者:
奇
时间:
2012-1-6 20:18
收着，有空看看
作者:
奇
时间:
2012-2-10 23:28
佩服，好多阿 ，哈哈
作者:
C.R.CAN
时间:
2012-3-20 23:27
读铁系缘分，顶铁系友情
作者:
C.R.CAN
时间:
2012-3-20 23:31
沙发不解释
作者:
奇
时间:
2012-4-24 08:04
俺是新人,这厢有礼了!
作者:
菜刀吻电线
时间:
2012-12-15 23:28
跑着去顶朋友滴铁
作者:
奇
时间:
2012-12-21 09:31
支持，多谢分享，看看有啥更新…
作者:
奇
时间:
2013-3-11 23:30
不会吧，太恐怖了
欢迎光临 纳金网 (http://www.narkii.com/club/)
Powered by Discuz! X2.5