JavaScript编写图片自动左右滚动播放的轮播图没有实现效果
首先附上我所有用于实现这个功能的代码
我主要想实现的效果是图片自动左右滚动播放，然后点击按钮实现图片左右切换，这两个效果都没有实现，反而是其他我觉得可以不用实现的效果都实现了。我是参考了这篇文章写的https://blog.csdn.net/m0_60264901/article/details/121956179?spm=1001.2014.3001.5506 我感觉我除了几个id值和class值设置的不一样以外其他都一摸一样了，但是效果没有实现。我也不知道问题出在哪里，请各位大 佬帮我看一下。
那篇文章缺少animate这个动画函数，直接用css3动画搞定即可，用下面的
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}
.wrap {
overflow: hidden;
position: relative;
margin: 100px auto;
width: 500px;
height: 400px;
background-color: pink;
}
.wrap ul {
position: absolute;
top: 0;
left: 0;
width: 500%;
transition:linear .5s;
/* 给ul盒子大一点就可以让li浮动起来 */
}
.wrap ul li {
float: left;
/* margin-right: 10px; */
width: 500px;
height: 400px;
}
.wrap ul li img {
width: 100%;
height: 100%;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 38%;
text-align: center;
width: 24px;
height: 40px;
line-height: 40px;
color: white;
z-index: 999;
background: rgba(0, 0, 0, .3);
}
.arrow-r {
position: absolute;
top: 38%;
right: 0px;
}
.circle {
position: absolute;
bottom: 0;
left: 39%;
height: 20px;
width: 200px;
/* background-color: skyblue; */
}
.circle li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 6px;
background: rgba(0, 0, 0, .3);
}
.circle .current {
background-color: #fff;
}
</style>
<div class="wrap">
<!-- 左右箭头按钮 -->
<a href="javascript:;" class='arrow-l'><</a>
<a href="javascript:;" class='arrow-r'>></a>
<!-- 图片用li来装--核心滚动区域 -->
<ul class='focus'>
<li>
<a href="#"><img src="1.jpg" alt="1.jpg"></a>
</li>
<li>
<a href="#"><img src="2.jpg" alt="2.jpg"></a>
</li>
<li>
<a href="#"><img src="3.jpg" alt="3.jpg"></a>
</li>
<li>
<a href="#"><img src="4.jpg" alt="4.jpg"></a>
</li>
</ul>
<!-- 底部小点点 -->
<ol class='circle'>
</ol>
</div>
<script>
window.addEventListener('load', function () {
// 1.
var arrowl = document.querySelector('.arrow-l');
var arrowr = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// 2.
// 效果1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
focus.addEventListener('mouseenter', function () {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
clearInterval(timer);
timer = null; //清除定时器变量
})
focus.addEventListener('mouseleave', function () {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
timer = setInterval(function () {
// 手动调用点击事件
arrowr.click();
}, 2000);
})
// 3.底部的小圆圈根据有几张图就有几个小圆圈来实行
var ul = document.querySelector('.focus');
var lis = focus.querySelectorAll('li');
var circle = document.querySelector('.circle');
var li = focus.querySelector('li');
var liWidth = li.offsetWidth;
// console.log(lis);只能得到4个节点
//console.log(focus.children.length); //这样才能得到focus的孩子的长度有几个
// 先对图片进行循环得到有几张图片
for (var i = 0; i < lis.length; i++) { //第一个for循环是创建li
var li = document.createElement('li');
// 记录小圆圈的索引号，通过自定义属性来做
li.setAttribute('index', i);
// 把上面增加的li添加到ol中去
circle.appendChild(li);
li.addEventListener('click', function () {
for (var i = 0; i < circle.children.length; i++) {
//创建的ol中的li进行遍历获取
// 排他思想
circle.children[i].className = '';
}
this.className = 'current'; //一定写成this
// 想要效果：点击小圆点，移动图片 移动的是ul
// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）
// 当我们点击某个小li就获取到li的索引号
var index = this.getAttribute('index');
var li = focus.querySelector('li');
// 解决bug1：当我们点击了某个li就拿到当前li的索引号给num
// 解决bug2：当我们点击了某个li 就把li的索引号给yuan
num = index;
yuan = index;
var liWidth = li.offsetWidth;
ul.style.left = -liWidth * index+'px'
//animate(ul, -liWidth * index); //ul移动
})
}
//把第一个li的背景变为白色
circle.children[0].className = 'current';
// 克隆第一张图片li放到ul最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 当点击左右按钮可以有轮播图切换效果
var num = 0;
// 效果：底部小圆圈跟随右侧按钮一起变化 设置一个全局变量计数（在点击事件外面定义）
var yuan = 0;
// flag节流阀
var flag = true;
// 右侧按钮
arrowr.addEventListener('click', function () {
if (flag) {
// flag = false; //关闭节流阀
// alert('111');测试 事件绑定成功没有
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0; //无缝滚动效果 最后num=0回到起点第一张图
}
num++;
ul.style.left = -num * liWidth+'px'
/*animate(ul, -num * liWidth, function () {
flag = true; //打开节流阀
});*/
// 效果：底部小圆圈跟随右侧按钮一起变化
yuan++; //这个变量是控制小圆圈的播放
// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原
if (yuan == circle.children.length) {
yuan = 0;
}
// 先清除其余小圆圈的current类名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 左侧按钮
arrowl.addEventListener('click', function () {
if (flag) {
// flag = false;
// alert('111');测试 事件绑定成功没有
if (num == ul.children.length - 1) {
num = ul.children.length - 1;
//无缝滚动效果 最后num=0回到起点第一张图
ul.style.left = num * liWidth + 'px';
}
num--;
ul.style.left = -num * liWidth + 'px'
/*animate(ul, -num * liWidth, function () {
flag = true;
});*/
// 效果：底部小圆圈跟随右侧按钮一起变化
yuan--; //这个变量是控制小圆圈的播放
// 如果yuan<0说明第一张图片，则小圆圈要改为第四个小圆圈（3）
if (yuan < 0) {
yuan = circle.children.length - 1;
}
// 先清除其余小圆圈的current类名
for (var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
circle.children[yuan].className = 'current';
}
})
// 自动播放轮播图
var timer = setInterval(function () {
// 手动调用点击事件
arrowr.click();
}, 2000);
})
</script>
https://blog.csdn.net/weixin_44208880/article/details/115269844
https://www.jq22.com/ ，这个是jquery的公开插件库，你可以从这上面找你想要的效果直接下载，如果要学习也可以作为案例去学习，很实用
可以参考。
https://blog.csdn.net/weixin_50930483/article/details/125901872?spm=1001.2014.3001.5502
我试了下 ，你发的博客代码似乎有问题 。。报错了 animate is not defined
加上animate()函数就可以了
function animate(dom, o, time, fn) {
if(time == undefined) { //默认的切换频率
time = 10;
}
//dom.termId :为每一个运动的物体添加一个属于自己的线程标识
clearInterval(dom.termId);
dom.termId = setInterval(function() { //创建一个定时器，实现运动
dom.isOver = true; //是否可以停止定時器
for(var property in o) {
if(property == "opacity") { //如果是透明度
var currentValue = parseInt(getStylePropertyValue(dom, property) * 100); //当前样式属性的值
} else { //其他样式属性
var currentValue = parseInt(getStylePropertyValue(dom, property));
}
//速度 正速度 负速度
var speed = (o[property] - currentValue) / 10;
// 三元表达式 三目运算符
speed = currentValue > o[property] ? Math.floor(speed) : Math.ceil(speed)
currentValue += speed; //改变样式属性的值
if(currentValue != o[property]) {
dom.isOver = false; //標識不停止定時器
}
if(property == "opacity") {
dom.style.opacity = currentValue / 100;
dom.style.filter = 'alpha(opacity= ' + currentValue + ')';
} else {
dom.style[property] = currentValue + "px"; //改变物体的样式属性值
}
}
if(dom.isOver) { //停止定时器
clearInterval(dom.termId);
if(fn) { //执行回调函数
fn();
}
}
}, time) //基于切换的频率来改变运动的快慢
}
/*获取指定样式的属性值*/
function getStylePropertyValue(dom, property) {
if(window.getComputedStyle) { //標準瀏覽器
//
return getComputedStyle(dom, null)[property];
} else {
return dom.currentStyle[property]; //IE瀏覽器
}
}