首次模拟JS轮播图效果
程序员文章站
2022-04-10 09:45:38
首次模拟JS轮播图效果大佬手下留情代码有点小问题，就是点击最后一张后跳不到首张，困惑。图的话自己去淘宝扒吧(^~*)HTML + CSS代码部分 ...
首次模拟JS轮播图效果
大佬手下留情
代码有点小问题，就是点击最后一张后跳不到首张，困惑。
图的话自己去淘宝扒吧(^~*)
HTML + CSS代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img {
position: absolute;
}
li {
list-style: none;
}
.box {
position: relative;
width: 520px;
height: 280px;
top: 200px;
left: 500px;
overflow: hidden;
}
.zi {
display: none;
position: absolute;
z-index: 1;
width: 20px;
height: 30px;
line-height: 30px;
color: powderblue;
text-decoration: none;
top: 50%;
margin-top: -15px;
background: rgba(0, 0, 0, .3);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.zi1 {
display: none;
position: absolute;
z-index: 1;
width: 20px;
height: 30px;
line-height: 30px;
color: powderblue;
text-decoration: none;
top: 50%;
left: 100%;
margin-left: -20px;
text-align: center;
margin-top: -15px;
background: rgba(0, 0, 0, .3);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.box .ul1 {
position: absolute;
top: 0;
left: 0;
height: 280px;
}
.box .ul1 li {
position: absolute;
float: left;
}
.current {
background-color: orange;
}
.box .tb1 {
left: 0;
}
.box .tb2 {
left: 520px;
}
.box .tb3 {
left: 1040px;
}
.box .tb4 {
left: 1560px;
}
.box .tb5 {
left: 2080px;
}
ol {
position: absolute;
z-index: 2;
width: 520px;
height: 20px;
top: 260px;
}
ol li {
float: left;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
margin-left: 8px;
}
</style>
<script src="../第四天/animate.js"></script>
<script src="index.js"></script></head>
<body>
<div class="box">
<a href="javascript:;" class="zi"><</a>
<a href="javascript:;" class="zi1">></a>
<ul class="ul1">
<li>
<a href=""><img src="../图片/TB1_rGSNhv1gK0jSZFFSuv0sXXa.jpg" class="tb1"></a> </li>
<li>
<a href=""><img src="../图片/TB1D4dSMFP7gK0jSZFjXXc5aXXa.jpg" class="tb2"></a> </li>
<li>
<a href=""><img src="../图片/TB1iUJuM.Y1gK0jSZFCXXcwqXXa-520-280.jpg_q90_.webp" class="tb3"></a>
</li>
<li>
<a href=""><img src="../图片/TB1MQw0M4v1gK0jSZFFwu20sXXa.png_q90_.webp" class="tb4"></a> </li>
<li>
<a href=""><img src="../图片/TB1S9nja9R26e4jSZFESuvwuXXa.jpg" class="tb5"></a> </li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>JS代码部分
window.addEventListener('load', function() {
// 1. 获取元素
var zi = document.querySelector('.zi');
var zi1 = document.querySelector('.zi1');
var div = document.querySelector('.box');
var divWidth = div.offsetWidth;
// 2.经过盒子div 隐藏左右div
div.addEventListener('mouseover', function() {
zi.style.display = 'block';
zi1.style.display = 'block';
})
div.addEventListener('mouseleave', function() {
zi.style.display = 'none';
zi1.style.display = 'none';
})
// 3.动态生成小圆圈 有几张图片，就生成几个小圆圈
var ul = div.querySelector('.ul1');
var ol = div.querySelector('.circle');
for(var i = 0; i < ul.children.length; i++) {
// 创建一个小li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
// 把小li插入到ol里面
ol.appendChild(li);
// 4.小圆圈的排他思想 我们可以在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function(){
//干掉所有人 把所有小li清除 current 类名
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下我自己 当前的小li 设置current 类名
this.className = 'current';
// 5.点击小圆圈，移动图片 当然移动的是 ul
// ul的移动距离是 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个li 就拿到当前小li的索引号
var index = this.getAttribute('index');
//当我们点击了某个小li 就把这个li的索引号给num
num = index;
//当我们点击了某个小li 就把这个li的索引号给circle
circle = index;
animate(ul, -index * divWidth -10);
})
}
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
// 6. 克隆第一张图片放到最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 7.点击右侧按钮， 图片滚动一张
var num = 0;
var circle = 0;
var zi1 = document.querySelector('.zi1');
zi1.addEventListener('click', function() {
if(num == 5) {
ul.style.left = 0 + 'px';
num = 0;
}
num++;
animate(ul, -num * divWidth - 9);
circle++;
//先清除其余的小圆圈的current类名
if(circle == ol.children.length) {
circle = 0;
}
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//9.左侧按钮
var zi = document.querySelector('.zi');
zi.addEventListener('click', function() {
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * divWidth + 'px';
}
num--;
animate(ul, -num * divWidth - 9);
circle--;
//先清除其余的小圆圈的current类名
if(circle < 0) {
circle = ol.children.length - 1;
}
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
})本文地址：https://blog.csdn.net/qq_44894416/article/details/107256050
上一篇： JS（六）