这个轮播图是通过设置元素的透明度来实现切换的,设置所有元素的透明度为0,其中,使其中一个li的类为active,在css中设置active类的透明度为1。
同时在js部分,设置点击事件,通过index的加减来设置active类的变化,使其达到轮播出现的效,并且设置了时延定时器,使其达到2s内自动切换的效果
最后设定了鼠标移入移出监听事件,当鼠标移入时停止自动轮播,当鼠标移出时继续
以下是实现代码
HTML代码
<ul id="carousel"> <li class="active">下雨天</li> <li>暴风雨</li> <li>下大雪</li> <li>大太阳</li> </ul> </div> <button id="preview">上一张</button> <button id="next">下一张</button>
CSS代码
#carousel { width: 200px; height: 200px; position: relative; } #carousel li { width: 200px; height: 200px; position: absolute; text-align: center; text-shadow: 0 0 5px #000; font-size: 35px; color: pink; /* 去除li的样式 */ list-style-type: none; /* 设置透明度为0 */ opacity: 0; /* 持续一秒的透明度切换 */ transition: opacity 1s; } /* 给四个元素设置不同的背景颜色 */ #carousel li:nth-child(1) { background-color: aqua; } #carousel li:nth-child(2) { background-color: rgb(0, 60, 255); } #carousel li:nth-child(3) { background-color: rgb(255, 0, 25); } #carousel li:nth-child(4) { background-color: rgb(70, 113, 47); } /* 第一个默认显示的元素 */ #carousel li.active { opacity: 1; }
Javascript代码
var carousel = document.querySelector('#carousel') //获取要轮播的所有内容 var items = carousel.children console.log(items) //获取按钮 var prvbtn = document.querySelector('#preview') var nextbtn = document.querySelector('#next') var index = 0 //点击下一张 nextbtn.addEventListener('click', function () { items[index].className = '' if (index === items.length - 1) { index = -1 //当下标到最后一个时,说明这时需要更改下标的值为0,但是后面有index++操作,故为-1 } index++ items[index].className = 'active'//切换类名为active,实现内容显示,达到切换到效果 }) //点击上一张 prvbtn.addEventListener('click', function () { items[index].className = '' index-- if (index === -1) { index = items.length - 1 //当下标到第一个时,说明这时需要更改下标的值为0,但是后面有index--操作,故为index.length } items[index].className = 'active'//切换类名为active,实现内容显示,达到切换到效果 }) //实现图片每隔两秒自动切换 var timer = setInterval(function () { items[index].className = '' if (index === items.length - 1) { index = -1 //当下标到最后一个时,说明这时需要更改下标的值为0,但是后面有index++操作,故为-1 } index++ items[index].className = 'active'//切换类名为active,实现内容显示,达到切换到效果 }, 2000) //鼠标移入停止播放 carousel.addEventListener('mouseover', function () { console.log('clean') clearInterval(timer) // 清除计时器后手动执行一次轮播操作,以确保轮播图立即停止 items[index].className = ''; }) //鼠标移出继续播放 carousel.addEventListener('mouseout', function () { console.log('continue') timer = setInterval(function () { items[index].className = '' if (index === items.length - 1) { index = -1 //当下标到最后一个时,说明这时需要更改下标的值为0,但是后面有index++操作,故为-1 } index++ items[index].className = 'active'//切换类名为active,实现内容显示,达到切换到效果 }, 2000) })