目录
左右轮播图切换功能实现
1秒钟自动播放切换图片，点击左右按钮切换图片，点击下面按钮切换图片，移入暂停。移除自动播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
position: relative;
width: 700px;
height: 400px;
margin: 50px auto;
/* border: 1px red solid; */
overflow: hidden;
}
.banner .bannerInner {
position: absolute;
left: 0;
top: 0;
width: 3500px;
height: 400px;
}
.bannerInner div {
float: left;
width: 700px;
height: 400px;
}
.bannerInner div img {
width: 100%;
height: 100%;
}
.focusList {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.focusList span {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 8px;
background-color: #fff;
}
.focusList span.active {
background-color: orange;
}
.banner a {
display: block;
width: 41px;
height: 69px;
position: absolute;
top: 50%;
margin-top: -34.5px;
/* background-color: red; */
background: url(./image/icon-slides.png) no-repeat;
}
.banner a.btnLeft {
left: 0px;
background-position: -84px center;
}
.banner a.btnRight {
right: 0px;
background-position: -125px center;
}
.banner a.btnLeft:hover {
background-position: 0 center;
}
.banner a.btnRight:hover {
background-position: -42px center;
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div class="banner" id="banner">
<!-- 图片区域 -->
<div class="bannerInner">
<div><img src="./image/1.webp" alt=""></div>
<div><img src="./image/2.webp" alt=""></div>
<div><img src="./image/3.webp" alt=""></div>
<div><img src="./image/4.webp" alt=""></div>
<div><img src="./image/1.webp" alt=""></div>
<!-- 将第一张图片复制一份一模一样的放到末尾 -->
</div>
<!-- 焦点区域 -->
<div class="focusList">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 左右按钮 阻止a标签的默认行为-->
<a class="btnLeft" href="javascript:;"></a>
<a class="btnRight" href="javascript:;"></a>
</div>
<script src="./utils/utils.js"></script>
<script>
//获取元素
var banner = document.getElementById('banner'),
bannerInner = banner.getElementsByClassName('bannerInner')[0],
oDivs = bannerInner.getElementsByTagName('div'),
// console.log(oDivs);
focusList = banner.getElementsByClassName('focusList')[0],
oSpans = focusList.getElementsByTagName('span'),
btns = banner.getElementsByTagName('a'),
btnLeft = btns[0],
btnRight = btns[1];
// console.log(bannerInner, focusList, oSpans, btns);
//设置初始值
var n = 0;//默认值是0 标识当前是1张图片
var timer = null;//存储定时器的返回值
//设置定时器
timer = setInterval(autoMove, 3000);
function autoMove() {
n++;
if (n == oDivs.length) {
bannerInner.style.left = '0px';
// 重新给n赋值
n = 1;
}
// 设置bannerInner的left值
// bannerInner.style.left = -n*700 + 'px';
move(bannerInner, 'left', 80, -n * 700);
//清空所有焦点的样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
//再让当前这个span有激活样式
// if (n == oSpans.length) {
// oSpans[0].className = "active";
// }else{
// oSpans[n].className = "active";
// }
oSpans[n == oSpans.length ? 0 : n].className = 'active';
}
//移入暂停
banner.onmouseenter = function () {
clearInterval(timer);
}
//离开自动播放
banner.onmouseleave = function () {
timer = setInterval(autoMove, 1000);
}
//左右按钮切换图片
// btnRight.onclick = function(){
// autoMove();
// }
btnRight.onclick = autoMove;
btnLeft.onclick = function () {
n--;
if (n == -1) {
// 让bannerInner的left值为展示结构中最后一张的的left值
bannerInner.style.left = -(oDivs.length - 1) * 700 + 'px';
// 给n重新赋值
n = oDivs.length - 2;
}
move(bannerInner, 'left', 80, -n * 700);
//清空所有激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前这个span有激活样式
oSpans[n].className = 'active';
}
//焦点切换
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].index = i;
oSpans[i].onclick = function () {
// console.log(this.index);
if (n == oDivs.length - 1) {
// 让bannerInner的left值为0
bannerInner.style.left = '0px';
}
move(bannerInner, 'left', 80, -(this.index * 700));
// 先清空所有的激活
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前这个span有激活样式
this.className = "active";
// 给n重新赋值为自定义索引的值
n = this.index;
}
}
</script>
</body>
</html>DOM缓冲运动淡入淡出轮播图
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.banner {
width: 1180px;
height: 350px;
margin: 100px auto;
position: relative;
}
.banner .bannerInner {
width: 1180px;
height: 350px;
position: absolute;
left: 0;
top: 0;
}
.banner .bannerInner li {
width: 1180px;
height: 350px;
/* 所有的li都是定位到一起的 */
position: absolute;
left: 0;
top: 0;
/* 默认透明度都是0 */
opacity: 0;
}
.banner .bannerInner li img {
width: 100%;
height: 100%;
display: block;
border: none;
}
.focusList {
position: absolute;
bottom: 20px;
text-align: center;
left: 0;
right: 0;
}
.focusList span {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: aliceblue;
margin-right: 20px;
}
.focusList span.active {
background-color: orangered;
}
</style>
</head>
<body>
<div id="banner" class="banner">
<ul class="bannerInner">
<li style="opacity: 1;"><img src="./img/tbanner1.png" /></li>
<li><img src="./img/tbanner2.png" /></li>
<li><img src="./img/tbanner3.png" /></li>
<li><img src="./img/tbanner4.png" /></li>
</ul>
<p class="focusList">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
<script src="./js/utils.js"></script>
<script>
// 获取元素
var banner = document.querySelector("#banner"),
oLis = banner.getElementsByTagName("li"),
oSpans = banner.getElementsByTagName("span");
// 自定义标识
var n = 0;
// 设置定时器
var timer = window.setInterval(autoPlay, 3000);
// 淡入淡出视线
function autoPlay() {
// 每次n的值增加1
n++;
// 判断
if (n == oLis.length) {
n = 0;
}
// 先让所有li的透明度都是0
for (var i = 0; i < oLis.length; i++) {
utils.bufferMove(oLis[i], { opacity: 0 });
}
// 再让当前这个li透明度是1
utils.bufferMove(oLis[n], { opacity: 100 });
// 现清空所有的激活样式 再让当前这个span有激活样式
for (var j = 0; j < oSpans.length; j++) {
oSpans[j].className = "";
}
oSpans[n].className = "active";
}
//移入暂停离开自定播放
banner.onmouseover = function () {
window.clearInterval(timer);
}
banner.onmouseout = function () {
timer = window.setInterval(autoPlay, 3000);
}
// 焦点切换
for (var i = 0; i < oSpans.length; i++) {
// 自定义索引
oSpans[i].index = i;
oSpans[i].onclick = function () {
// 先让所有li的透明度都是0
for (var i = 0; i < oLis.length; i++) {
utils.bufferMove(oLis[i], { opacity: 0 });
}
// 再让当前span对应的这个li透明度是1
utils.bufferMove(oLis[this.index], { opacity: 100 });
// 现清空所有的激活样式 再让当前这个span有激活样式
for (var j = 0; j < oSpans.length; j++) {
oSpans[j].className = "";
}
this.className = "active";
// 给n重新赋值
n = this.index;
}
}
</script>