Índice
2. Efeito de realização de imagem em carrossel
I. Introdução
Falando em imagens de carrossel, todos devem estar familiarizados com elas.A página inicial da maioria dos sites também é uma pergunta do entrevistador: Você pode escrever imagens de carrossel? verá sua existência. Embora não seja muito difícil de conseguir, mas não há muitas pessoas que realmente possam escrever bem, por isso escrevi isso, para resolver o que escrevi e revisar e consolidar com todos.
2. Efeito de realização de imagem em carrossel
3. Função
1. Implemente a reprodução automática
2. Mova o mouse para parar a reprodução, pressione os botões de alternância esquerdo e direito ou clique no pequeno ponto do pager para alternar as imagens
3. A imagem realiza o efeito de animação de fade in e fade out
Quarto, implemente o código
1.html+css part code
<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 código principal
<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. Resumo
Há muitas maneiras de obter carrosséis de imagem de fade-in e fade-out. Primeiro defino a posição da imagem: posicionamento absoluto absoluto, depois defino a opacidade da imagem como 0 e defino a primeira imagem como 1 e, em seguida, uso um cronômetro para controlar a comutação automática de imagens. , use o efeito de transição da animação para obter fade in e fade out. A redação é um pouco complicada, se os grandões tiverem um jeito melhor, espero trazer à tona e discutir juntos!