js 윤 방도 효과 순수 js 이미지 자동 전환 실현
1.마우스 가 지나 갈 때 좌우 에 있 는 작은 버튼 두 개가 자동 으로 팝 업 되 고 재생 이 정지 되 며 좌우 에 있 는 작은 버튼 을 누 르 면 그림 을 전환 할 수 있 습 니 다.
2.마우스 가 떠 나 면 자동 재생 이 재 개 됩 니 다.
3.아래 가운데 동그라미 몇 개 를 클릭 하면 자동 으로 그림 이 바 뀝 니 다.
원본 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* */
.lunbotu {
position: relative;
width: 520px;
height: 280px;
margin: 50px auto;
background-color: blue;
overflow: hidden;
}
/* */
.left,
.right {
display: none;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
background-color: cornsilk;
border-radius: 15px;
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
li {
list-style: none;
}
/* ul */
.firstul {
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.firstul li {
float: left;
/* display: none; */
}
/* */
ol {
/* width: 90px; */
padding: 0 5px 0 5px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -45px;
background-color: darkgrey;
text-align: center;
border-radius: 9px;
}
ol li {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
background-color: white;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
<script src="animation.js"></script>
</head>
<body>
<!-- 520*280 -->
<div class="lunbotu">
<!-- -->
<div class="left">></div>
<div class="right"><</div>
<!-- -->
<ul class="firstul">
<li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/3.gif" alt=""> </a></li>
<li><a href=""><img src=" images/4.webp" alt=""> </a></li>
</ul>
<!-- -->
<ol class="firstol"></ol>
</div>
<!-- JS -->
<script>
// 1.
var lunbotu = document.querySelector('.lunbotu');
var leftBox = document.querySelector('.left');
var rightBox = document.querySelector('.right');
var ul = lunbotu.querySelector('ul');
var ol = lunbotu.querySelector('ol');
var right = document.querySelector('.right');
var left = document.querySelector('.left');
var lunbotuWidth = lunbotu.offsetWidth;
// console.log(ul)
// console.log(ol)
// ：
// ，
lunbotu.addEventListener('mouseenter', function () {
leftBox.style.display = 'block';
rightBox.style.display = 'block';
// ，
clearInterval(timer);
})
// ，
lunbotu.addEventListener('mouseleave', function () {
leftBox.style.display = 'none';
rightBox.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// ：
// 1.
// 2.
// 3. ul ( li ， li )
// 4. ( ol )
// 5. createElement('li')]
// 6. ol.appendChild(li)
// 7. current
for (var i = 0; i < ul.children.length; i++) {
// li
var li = document.createElement('li')
//
li.setAttribute('index', i);
// li ol
ol.appendChild(li);
}
// ： Li
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
} this.className = 'current';
//
// index
var index = this.getAttribute('index');
// bug
num = index;
num_ol = index;
// console.log(lunbotuWidth);
// console.log(index)
animation(ul, - index * lunbotuWidth)
})
}
// li
ol.children[0].className = 'current';
// li
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// :
//
var num = 0;
//
var num_ol = 0;
// ， ，
var flag = true;
// ：
right.addEventListener('click', function () {
if (flag) {
flag = false; //
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol++;
if (num_ol == ol.children.length) {
num_ol = 0
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
// ：
left.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
num = ul.children.length - 1;
}
num--;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol--;
// num_ol=0 ， ， ol.children.length-1
if (num_ol < 0) {
num_ol = ol.children.length - 1
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
//
var timer = setInterval(function () {
right.click();
}, 2000)
</script>
</body>
</html>
// js
function animation(obj,target,fn1){
// console.log(fn1);
// fn ，
//
clearInterval( obj.timer);
obj.timer = setInterval(function(){
//
//
var step = (target - obj.offsetLeft) /10;
step = step > 0 ? Math.ceil(step) :Math.floor(step);
if(obj.offsetLeft == target){
clearInterval( obj.timer);
// fn1 ， fn
if(fn1){
fn1();
}
}else{
// 50 obj.left
obj.style.left = obj.offsetLeft +step +'px';
}
},30)
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
