목차
I. 소개
회전목마 사진이라고 하면 누구나 익숙할텐데요 대부분의 웹사이트 홈페이지도 면접관의 질문입니다: 회전목마 사진을 쓸 수 있나요? 그 존재를 보게 될 것입니다. 비록 달성하기가 그리 어렵지는 않지만, 정말 글을 잘 쓰는 사람이 많지 않기 때문에 제가 쓴 글을 정리하고, 여러분과 함께 검토하고 정리하기 위해 이렇게 글을 쓰게 되었습니다.
2. 캐러셀 이미지 구현 효과
3. 기능
1. 자동 재생 구현
2. 재생을 중지하려면 마우스를 움직이고 왼쪽 및 오른쪽 전환 버튼을 누르거나 호출기의 작은 점을 클릭하여 사진을 전환합니다.
3. 그림이 페이드 인 및 페이드 아웃의 애니메이션 효과를 구현합니다.
넷째, 코드 구현
1.html+css 부분 코드
<div class="banner">
<!-- 图片部分 -->
<div class="wrap">
<div class="item">
<img src="./img/02.jpg" alt="">
</div>
<div class="item">
<img src="./img/01.gif" alt="">
</div>
<div class="item">
<img src="./img/03.jpg" alt="">
</div>
<div class="item">
<img src="./img/04.jpg" alt="">
</div>
</div>
<!-- 分页器部分 -->
<div class="pagenation">
<div id="pagenation-item0"></div>
<div id="pagenation-item1"></div>
<div id="pagenation-item2"></div>
<div id="pagenation-item3"></div>
</div>
<!-- 上一张下一张部分 -->
<div class="goon"></div>
<div class="goout"></div>
</div> .banner {
width: 700px;
/* border: 1px solid red; */
margin: 100px auto;
position: relative;
height: 700px;
/* overflow: hidden; */
}
.item img {
width: 100%;
height: 700px;
vertical-align: top;
}
.item {
width: 700px;
position: absolute;
opacity: 0;
}
.item:first-child {
opacity: 1;
}
.banner .wrap {
/* width:2800px ; */
/* border: 1px solid green; */
height: 700px;
}
.pagenation {
position: absolute;
/* border: 1px solid red; */
left: 50%;
transform: translateX(-50%);
display: flex;
bottom: 40px;
}
.pagenation>div {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: grey;
margin-right: 10px;
cursor: pointer;
}
.pagenation>div:last-child {
margin-right: 0;
}
.pagenation>div:first-child {
background: purple;
}
.goon {
width: 0px;
height: 0px;
/* background-color: pink; */
border-top: 25px solid transparent;
border-right: 25px solid pink;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
opacity: 0.5;
position: absolute;
top: 300px;
cursor: pointer;
left: -10px;
}
.goout {
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid pink;
opacity: 0.5;
position: absolute;
top: 300px;
right: -10px;
cursor: pointer;
}2.js 메인 코드
<script>
//对应图片 小圆点 的下标
var index = 0;
//获取所有的图片
var itemList = document.getElementsByClassName("item");
// 定时器
var t2 = null;
// 先让所有的图片 透明度 全都为0
//获取小圆点的数组
var pageItems = document.querySelectorAll(".pagenation>div")
// console.log(pageItems)
//用定时器实现图片的切换
var t1 = setInterval(function () {
index = index >= (itemList.length - 1) ? 0 : ++index;
// index++;
for (var i = 0; i < itemList.length; i++) {
itemList[i].style.opacity = 0;
pageItems[i].style.background = "grey"
}
//动画效果的设置
itemList[index].style.transition = "opacity 1s ease .2s"
itemList[index].style.opacity = 1
pageItems[index].style.background = "purple"
}, 1500)
// 鼠标进入轮播区域 停止定时器
document.getElementsByClassName("banner")[0].onmouseover = function () {
if (t2 != null) {
clearInterval(t2)
} else {
clearInterval(t1)
}
}
document.getElementsByClassName("banner")[0].onmouseout = function () {
t2 = setInterval(function () {
index = index >= (itemList.length - 1) ? 0 : ++index;
// index++;
for (var i = 0; i < itemList.length; i++) {
itemList[i].style.opacity = 0;
pageItems[i].style.background = "grey"
}
itemList[index].style.transition = "opacity 1s ease .2s"
itemList[index].style.opacity = 1
pageItems[index].style.background = "purple"
}, 1500)
}
// 分液器里面的 div
// for(var i=0;i<pageItems.length;i++){
// pageItems[i].style.background="grey"
// pageItems[i].onclick= function(){
// this.style.background="purple"
// }
// }
// 事件委托来
document.querySelector(".pagenation").onclick = function (e) {
// 判断它是否是点击 子元素 触发？？？
// console.log(e.target)
if (e.target.className == "pagenation") {
// console.log("父元素点击触发")
} else {
// 子元素触发
// console.log("子元素点击触发")
var id = e.target.id;
var pageIndex = null;
// console.log(id)
for (var i = 0; i < pageItems.length; i++) {
pageItems[i].style.background = "grey"
if (id.indexOf(i) > 0) {
pageIndex = i;
}
}
e.target.style.background = "purple"
// 图片 跟随变更
index = pageIndex
for (var i = 0; i < itemList.length; i++) {
itemList[i].style.opacity = 0;
}
itemList[index].style.opacity = 1;
// console.log(pageIndex)
//index
}
console.log("--------")
}
//获取节点
var goout = document.getElementsByClassName("goout")[0];
var goon = document.getElementsByClassName("goon")[0];
goout.onclick = function () {
//实现思路和自动切换思路一样
index = index >= (itemList.length - 1) ? 0 : ++index;
// index++;
for (var i = 0; i < itemList.length; i++) {
itemList[i].style.opacity = 0;
pageItems[i].style.background = "grey"
}
itemList[index].style.transition = "opacity 1s ease .2s"
itemList[index].style.opacity = 1
pageItems[index].style.background = "purple"
}
goon.onclick = function () {
index = index <= 0 ? itemList.length - 1 : --index;
// index++;
for (var i = 0; i < itemList.length; i++) {
itemList[i].style.opacity = 0;
pageItems[i].style.background = "grey"
}
itemList[index].style.transition = "opacity 1s ease .2s"
itemList[index].style.opacity = 1
pageItems[index].style.background = "purple"
}
</script>5. 요약
페이드 인 및 페이드 아웃 이미지 캐러셀을 구현하는 방법에는 여러 가지가 있습니다. 먼저 이미지 위치를 설정합니다: 절대 절대 위치 지정, 그 다음 이미지 불투명도를 0으로 설정하고 첫 번째 이미지를 1로 설정한 다음 타이머를 사용하여 제어합니다. 이미지의 자동 전환. 애니메이션의 전환 효과를 사용하여 페이드 인 및 페이드 아웃을 달성하십시오. 글이 좀 복잡한데 큰놈들이 더 좋은 방법이 있으면 같이 올려서 의논했으면 좋겠어요!