js 윤 방도 회전 목마 효과
사고:하나의 배열 을 정 하고 모든 그림 의 위 치 를 저장 하 며 회전 하여 위 치 를 교체 합 니 다.
왼쪽 회전:배열 의 첫 번 째 데 이 터 를 삭제 하고 배열 의 마지막 에 추가 합 니 다.
오른쪽 회전:배열 의 마지막 데 이 터 를 삭제 하고 배열 의 시작 에 추가 합 니 다.
먼저 효과 도 를 첨부 한 다음 에 실현 하 다.
다음은 가장 중요 한 원생 js 애니메이션 함수 패키지 입 니 다.
// ( ie8)
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}
// js
function animate(element, json, fn) {
//
clearInterval(element.tmId);
element.tmId = setInterval(function () {
var flag = true;
//
for (var attr in json) {
//
if (attr == "opacity") {
//
var current = parseInt(getStyle(element, attr)*100);
//
var target = json[attr]*100;
//
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
current += step;
element.style[attr] = current / 100;
} else if (attr == "zIndex") {
//
element.style[attr] = json[attr];
} else {
//
var current = parseInt(getStyle(element, attr));
//
var target = json[attr];
//
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
current += step;
element.style[attr] = current + "px";
if (current != target) {
flag = false;
}
}
}
if (flag) {
clearInterval(element.tmId);
//
if (fn) fn();
}
//
// console.log(" :" + target + "/ :" + current + "/ :" + step);
}, 20);
}
함 수 를 봉 하고 나머지 는 직접 호출 하면 됩 니 다.마지막 으로 회전 목마 의 전체 코드 를 동봉 합 니까?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" href="css/css(1).css" rel="external nofollow" />
<script src="common.js"></script>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
window.onload = function () {
var flag = true;
var list = $query("#slide").getElementsByTagName("li");
function flower() {
//1、
for (var i = 0; i < list.length; i++) {
// li , ,left,top,zindex
animate(list[i], config[i], function () {
flag = true;
});
}
}
flower();//
//
$query("#slide").onmouseover = function () {
$query("#arrow").style.opacity = "1";
}
$query("#slide").onmouseout = function () {
$query("#arrow").style.opacity = "0";
}
//
$query("#arrLeft").onclick = function () {
if (flag) {
config.unshift(config.pop());
flower();
flag = false;
}
}
$query("#arrRight").onclick = function () {
if (flag) {
config.push(config.shift());
flower();
flag = false;
}
}
//
setInterval(function () {
config.push(config.shift());
flower();
}, 2000);
}
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:void(0);" class="prev" id="arrLeft"></a>
<a href="javascript:void(0);" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
</html>
하 이 라이트 주제 공유:jQuery 사진 윤 방자 바스 크 립 트 사진 윤 방부 트 스 트랩 사진 윤 방이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.