目次
I.はじめに
カルーセルの写真といえば、誰もが知っているはずですが、ほとんどのウェブサイトのホームページも、インタビュアーからの質問です: カルーセルの写真を書くことはできますか? その存在が見えてきます。達成するのはそれほど難しいことではありませんが、本当に上手に書ける人は多くないので、書いたことを整理し、みんなで見直してまとめるためにこれを書きました。
2.カルーセル画像実現効果
3.機能
1.自動再生を実装する
2.マウスを動かして再生を停止し、左右の切り替えボタンを押すか、ページャーの小さなドットをクリックして画像を切り替えます
3. 映像がフェードインとフェードアウトのアニメーション効果を実現
4番目に、コードを実装します
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 に設定します, そしてタイマーを使って制御します.画像の自動切り替え 、アニメーションのトランジション効果を使用して、フェードインとフェードアウトを実現します。文章は少し複雑ですが、大物がより良い方法を持っている場合は、それを持ち出し、一緒に議論したいと考えています!