CSS与JavaScript实现响应式轮播图实例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/Uncle9_YCWR/article/details/121283738

CSS样式代码参考：

margin: 0;
list-style: none;
border: 0;
}

.all {
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}

.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}

.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}

.screen ul {
position: absolute;
left: 0px;
top: 0px;
width: 3000px;
}

.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}

.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}

.all ol li.current {
background: yellow;
}

#arr {
display: none;
z-index: 1000;

}

#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#arr #right {
right: 5px;
left: auto;
}
</style>

body代码参考：

</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>

JS代码参考：
<script>
//1 获取所有的节点
var boxObj = document.querySelector('#box');
var screenObj = document.querySelector('#screen');
var ulObj = document.querySelector('ul');
var lisObj = ulObj.children;
var arrObj = document.querySelector('#arr');
var leftObj = document.querySelector('#left');
var rightObj = document.querySelector('#right');
var olObj = document.querySelector('ol');
//2 生成与图片对应的原点,几张图片就对应几个原点
for (var i = 0; i < lisObj.length; i++) {
var newLi = document.createElement('li');
newLi.innerHTML = i + 1;
if (i == 0) {
newLi.classList.add('current')
}

newLi.onclick = banner;
// 保存当前图片的索引
newLi.setAttribute('index', i)
//3 点击对应的图标是触发事件
olObj.appendChild(newLi);
}
// 克隆第一张图片放到最后
var newImg = lisObj[0].cloneNode(true);
newImg.style.borderTop = 'solid 1px red';
ulObj.appendChild(newImg);

// 让轮播图随着点击的序号动起来
//保存索引
var imgIndex = 0;
var isClick = true;
function banner() {
// console.log(this);
// 获取图片对应的索引值
imgIndex = this.getAttribute('index');
// 获取screen的宽度
var scWid = screenObj.offsetWidth;
// 计算移动的目标值
// 第0张图片显示时,ul的left为0 第一张图片显示ul的left为-scWid
var target = imgIndex * scWid;
startMove(ulObj, {
left: -target
}, function () {
isClick = true;
console.log(66666);

});
selectOl();
}

// 让图片对应的索引选中
function selectOl() {
for (let i = 0; i < olObj.children.length; i++) {
olObj.children[i].classList.remove('current')

}
olObj.children[imgIndex].classList.add('current')
}

// 鼠标移入则显示对应的按钮
boxObj.onmouseover = () => {
arrObj.style.display = 'block';
}
screenObj.onmouseout = () => {
arrObj.style.display = 'none';
}

//左边按钮的点击
leftObj.onclick = function () {
console.log(isClick);

if (!isClick) return;
isClick = false;
//如果是第一张图片,则应该让所有的图片显示到左侧
if (imgIndex == 0) {
// 获取图片总的长度(包括克隆的第一张图片)
var tmpLen = ulObj.children.length - 1
// 直接设置ul的left坐标
ulObj.style.left = - tmpLen * screenObj.offsetWidth + 'px';
//设置索引
imgIndex = tmpLen - 1;
} else {
imgIndex--;
}
// 调用序号点击的方法
olObj.children[imgIndex].onclick();
}

// 点击右边按钮时
rightObj.onclick = function () {
// 判断是否为最后一张,第五张
if (!isClick) return;
isClick = false;
if (imgIndex == olObj.children.length - 1) {
// 从第五张运动到克隆的第六张,到达时将ul的left设置为0
let target = (imgIndex - 0 + 1) * screenObj.offsetWidth;
startMove(ulObj, { left: -target }, function () {
ulObj.style.left = '0px';
// console.log('5555');
isClick = true;
})
imgIndex = 0;
selectOl();
} else {
imgIndex++;
olObj.children[imgIndex].onclick();