自动轮播图的问题解决

我在整个页面做了几个自动轮播图,然后出来的效果是一整个的自动轮播图,这个怎么解决啊?

如果只是为了实现效果 可以用现成的成熟的轮子,没必要自己从头写,费时费力,自动轮播我觉得swiper已经很好了 能满足能多需求。
如果想要究其原理 也可以看下它的实现原理,然后自己先从简单的搞起

需要区分开吧。给绑定不同的dom元素。

你说的效果 截个图看看

你的问题,是js对象的引用的问题,建议检查创建的轮播对象,是不是使用的一个对象。可以创建多个不同的对象,以便于区分。
还有就是在项目开发过程中,js对象会有拷贝的问题。
在 JavaScript 中,对象是引用类型,当我们将一个对象赋值给另一个变量时,实际上是将该对象的引用地址赋值给了变量。

例如,以下是一个简单的示例代码:

var obj1 = {name: '张三', age: 20};
var obj2 = obj1;

obj2.name = '李四';

console.log(obj1); // 输出 {name: '李四', age: 20}
console.log(obj2); // 输出 {name: '李四', age: 20}

在代码中,我们定义了两个对象 obj1obj2,并将 obj1 的引用地址赋值给了 obj2。然后,我们修改了 obj2.name 的值为 '李四',并打印了 obj1obj2 的内容。可以看到,obj1.name 的值也被修改为了 '李四',这是因为 obj1obj2 指向的是同一个对象,修改其中一个变量的属性也会影响到另一个变量。

需要注意的是,对于基本类型的变量(如数字、字符串等),它们的值是存储在栈中的,而对象、数组等引用类型的变量的值是存储在堆中的,而变量本身存储的是对象或数组的地址。

另外,可以使用 Object.assign() 方法来实现对象的浅拷贝,也可以使用 JSON 来实现深拷贝。

例如,以下是一个使用 Object.assign() 方法来实现浅拷贝的示例代码:

var obj1 = {name: '张三', age: 20};
var obj2 = Object.assign({}, obj1); // 浅拷贝

obj2.name = '李四';

console.log(obj1); // 输出 {name: '张三', age: 20}
console.log(obj2); // 输出 {name: '李四', age: 20}

在代码中,我们使用 Object.assign() 方法将 obj1 浅拷贝到了一个新对象 obj2 中,并修改了 obj2.name 的值为 '李四',但是 obj1 的值并未受到影响。

需要注意的是,Object.assign() 方法只会拷贝对象自身可枚举的属性,而不会拷贝原型对象中的属性,如果要拷贝原型中的属性可以使用 Object.create() 方法。

另外,由于浅拷贝只是将对象的引用地址复制了一份,如果对象中存在引用类型的属性,则修改其中一个变量的属性也会影响到另一个变量。如果要实现深拷贝可以使用 JSON 中的 JSON.parse(JSON.stringify(obj))。但是需要注意,该方法也有一些限制,例如无法正确处理函数、undefinedNaN 等特殊值。