데모 소스 code_javascript 기술을 사용한 기본 javascript 이미지 자동 또는 수동 전환 예

一、效果图
 
二、html代码

复aze代码 代码如下:

• 


• 


• 

• 1


• 2


• 3

三、源代码

复主代码 代码如下:

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id

var Class = {
create: function() {
return function() {
this.initialize.apply(this, 인수)
}
}
}

객체 .extend = function(destination, source) {
for(소스의 var 속성) {
destination[property] = source[property];
}
반환 대상; >
var TransformView = Class.create();
TransformView.prototype = {
//컨테이너 객체, 슬라이딩 객체, 전환 매개변수, 전환 번호
초기화: 함수(컨테이너, 슬라이더, 매개변수, count, options) {
if(parameter <= 0 || count <= 0) return
var oContainer = $(container), oSlider = $(slider), oThis = this;
this.Index = 0;//현재 인덱스

this._timer = null;//Timer
this._slider = oSlider;//슬라이딩 객체
this._parameter = 매개변수 ; //전환 매개변수
this._count = count || 0;//전환 수량
this._target = 0;//대상 매개변수

this.SetOptions(options)

this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step)
this.Time = Math.abs(this.options.Time) ;
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause)
this.onStart = this.options.onStart; .onFinish = this.options.onFinish;

oContainer.style.overflow = "숨김";
oContainer.style.position = "상대"; "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//기본 속성 설정
SetOptions: function(options) {
this. options = {//기본값
위: true,//위로 올라갈지 여부(그렇지 않으면 왼쪽)
단계: 5,//슬라이딩 변화율
시간: 10,//슬라이딩 지연
Auto: true,//자동 변환 여부
Pause: 2000,//Pause 시간(Auto가 true인 경우 유효)
onStart: function(){},//변환 시작 시 실행
onFinish: function (){}//변환이 완료되면 실행
}
Object.extend(this.options, options || {})
},
//전환 시작 설정
시작: function() {
if(this.Index < 0){
this.Index = this._count - 1
} else if(this.Index >= this; ._count){ this .Index = 0; }

this._target = -1 * this._parameter * this.Index;
this.onStart()
this.Move();
},
//이동
이동: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" ",
iNow = parsInt(this._slider.style[style]) || 0,
iStep = this.GetStep(this._target, iNow);

if (iStep != 0 ) {
this._slider.style[style] = (iNow iStep) "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); >} else {
this._slider.style[style] = this._target "px";
this.onFinish()
if (this.Auto) { this._timer = setTimeout( ){ oThis.Index ; oThis.Start() }, this.Pause) }
}
},
//단계 크기 가져오기
GetStep: function(iTarget, iNow)
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1) ;
return iStep;
//Stop
Stop: function(iTarget, iNow) {
clearTimeout(this._timer); ._slider.style[this .Up ? "top" : "left"] = this._target "px"
}
}

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i ) { fun(list[i], i) }
}; 🎜>
var objs = $("idNum2").getElementsByTagName("li");

var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//버튼 스타일
Up: false
});

tv.Start();

Each(objs, function(o, i){
o.onmouseover = function(){
o. className = "on";
tv.Auto = false;
tv.Index = i
tv.Start()
}
o.onmouseout(){
o.className = " ";
tv.Auto = true;
tv.Start()
}
})
}


이름 언뜻 보면 뻔하므로 코드에 대해서는 자세히 설명하지 않겠습니다!

데모 및 소스 파일 다운로드