JavaScript 그림 전환 표시 효과 alibaba 확장 버전_이미지 특수 효과 JavaScript 그림 전환 표시 효과

알리바바에서 사진 전환 효과를 봤는데 좋은 것 같아서 꼭 써보고 싶었어요. 그런데 코드도 많고, 어지러워 보이기도 해서 직접 해보는 게 좋을 것 같아요. 저는 그림 슬라이딩 디스플레이 효과를 만들어 본 경험이 있기 때문에 이 작업이 훨씬 쉽습니다.

먼저 컨테이너가 필요하고 오버플로를 숨김으로 설정하고 위치를 상대 위치로 설정합니다.
컨테이너에 슬라이딩 개체도 있으므로 위치를 절대값으로 설정합니다. 일부 속성을 작동합니다.

전환 전 Start() 함수를 실행하고 관련 설정을 합니다.
Index 속성(index)과 _target 속성(target value)을 주로 설정합니다:

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;

그런 다음 실행하면 됩니다. Move() 함수를 사용하여 이동을 시작합니다.

감속 효과를 사용하려면 GetStep() 함수를 실행하여 이동 효과를 생성해야 합니다.

var iStep = (iTarget - iNow) / this.Step;用目标值减当前值再除以一个参数，得到步长，

이 방법으로 얻은 단계 크기는 현재 값이 목표 값에 가까워질수록 점점 작아지며, 이는 감속 효과도 생성합니다.

그런 다음 이 단계를 top의 설정에 추가합니다. (또는 왼쪽) 길게, 목표 값에 도달할 때까지 Move()를 계속하도록 타이머를 설정합니다:

this._slider.style[style] = (iNow + iStep) + "px"; 
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);

다음 예의 컨테이너 구조:

<p class="container" id="idTransformView"> 
<ul class="slider" id="idSlider"> 
<li><img src="http://shundebk.cn/temp/1.jpg"/></li> 
<li><img src="http://shundebk.cn/temp/2.jpg"/></li> 
<li><img src="http://shundebk.cn/temp/3.gif"/></li> 
</ul> 
<ul class="num" id="idNum"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</p>

원하는 경우 아름답게 하려면 CSS로 설정해야 합니다.

.container, .container *{margin:0; padding:0;} 
.container{width:408px; height:168px; overflow:hidden;} 
.slider{position:absolute;} 
.slider li{ list-style:none;display:inline;} 
.slider img{ width:408px; height:168px; display:block;} 
.slider2{width:2000px;} 
.slider2 li{float:left;} 
.num{ position:absolute; right:5px; bottom:5px;} 
.num li{ 
float: left; 
color: #FF7300; 
text-align: center; 
line-height: 16px; 
width: 16px; 
height: 16px; 
font-family: Arial; 
font-size: 12px; 
cursor: pointer; 
overflow: hidden; 
margin: 3px 1px; 
border: 1px solid #FF7300; 
background-color: #fff; 
} 
.num li.on{ 
color: #fff; 
line-height: 21px; 
width: 21px; 
height: 21px; 
font-size: 16px; 
margin: 0 1px; 
border: 0; 
background-color: #FF7300; 
font-weight: bold; 
}

스타일 설정도 너비, 높이 등 프로그램과 관련되어 있으므로 여기서는 설명하지 않습니다.

그런 다음 인스턴스화할 수 있습니다.

var tv = new TransformView ("idTransformView", "idSlider", 168, 3, { 
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 
});

여기에는 주로 4개의 매개변수, 즉 컨테이너 객체, 슬라이딩 객체, 전환 매개변수 및 전환 수량이 있습니다.

프로그램이 상하로 전환될 때의 전환 매개변수의 높이입니다. 좌우로 전환될 때의 전환 폭입니다.
전환 개수는 전환 개체가 몇 개 있는지를 나타냅니다. 예를 들어 위의 예는 3개입니다.
마지막 매개변수는 일부 설정입니다.
속성: 기본값//설명
위: true,//위로 올라갈지 여부(그렇지 않으면 왼쪽으로)
단계: 5,//슬라이딩 변경 rate
Time: 10,//Sliding Delay
Auto: true,//자동 변환 여부
Pause: 2000,//Pause 시간(Auto가 true인 경우 유효)
onStart: function( ){} ,//변환 시작 시 실행
onFinish: function(){}//변환 완료 시 실행
예제에서는 onStart 속성이 설정되었으며 함수는 스타일을 설정하는 것입니다. 스위치가 시작될 때 버튼의
예제가 완료되었습니다. 테스트 코드:

function Each(list, fun){ 
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 
var objs = $("idNum").getElementsByTagName("li"); 
var tv = new TransformView("idTransformView", "idSlider", 168, 3, { 
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 
}); 
tv.Start(); 
Each(objs, function (o, i){ 
o.onmouseover = function(){ 
o.className = "on"; 
tv.Auto = false; 
tv.Index = i; 
tv.Start(); 
} 
o.onmouseout = function(){ 
o.className = ""; 
tv.Auto = true; 
tv.Start(); 
} 
})

소스 코드: