Javascript 无法使用jquery（图像滑块）将我的图像向右移动

图像滑块问题 事实上，我是jquery的初学者。我的目标是创建一个出色的图像滑块。我已经使用许多教程中的jquery创建了图像滑块

代码部分 slider.js

$（文档）.ready（函数（）{
$（“.slider li:first child”）.addClass（“active”）；
setTimeout（autoAddClass，5000）；
$（'.next'）。单击（函数（）{
nextslide（）；
});
$（'.previous'）。单击（函数（）{
上一张幻灯片（）；
});
});
函数nextslide（）
{
$（'.slider li:first child'）.hide（'slide'，{direction:'left'}，1000）；
//$（'.slider li:first child'）.fadeOut（）.next（）.fadeIn（）.end（）.appendTo（'.slider'）；
}
函数previousslide（）{
$（'.slider li:first child'）.fadeOut（）；
$（'.slider li:last child'）.prependTo（'.slider'）.fadeOut（）；
$（'.slider li:first child'）.fadeIn（）；
setTimeout（autoAddClass，5000）；
}
函数autoAddClass（）{
var next=$（“.active”）.removeClass（“active”）.next（）；
如果（下一个长度）
$（next）.addClass（'active'）；
其他的
$（'.slider li:first child'）.addClass（'active'）；
setTimeout（autoAddClass，5000）；
}

*{
保证金：0；
填充：0；
}
.全宽{
/*显示：内联块*/
显示：块；
宽度：100%；
}
.full_width.language_标题{
高度：50px；
背景色：#000；
/*边缘底部：-5px*/
}
.全宽滑动头{
高度：600px；
背景色：#fff；
/*边缘底部：-5px*/
溢出：隐藏；
}
.主要内容{
/*显示：内联块*/
显示：块；
宽度：100%；
浮动：左；
}
.包装纸{
保证金：0自动；
最大宽度：1125px；
宽度：100%；
}
.main_滑块{
宽度：100%；
浮动：左；
}
.主动{
显示：块；
}
保险商实验室{
列表样式：无；
}
李{
显示：块；
显示：无；
}
.以前的{
颜色：#000；
}
.下一个{
颜色：#000；
}

下面是一个您可以做的示例。
我简化了你的html。Jquery滑块不需要那么多类。
我所做的就是：

这就是所有魔法发生的地方：

.slider img {
    transition: left 1s;
}

这使得它从左向右流动。
Left只能与位置一起使用，也可以设置

.slider img {
     position: absolute;
}

当我们在Jquery中设置css属性时，就会出现动画：

$active.css('left', wid);

不要被wid搞糊涂，它只是一个度量：

var-wid=$active.width（）

现在用上一个按钮

最后编辑：它现在是一个带有标题的可滑动div，你可以编辑你想要的div悬停


$（“.slider.slide:first child”）.addClass（“active”）；
//设定间隔（下一次滑动，5000）；
$（'.next'）。单击（函数（）{
nextslide（）；
});
$（'.previous'）。单击（函数（）{
上一张幻灯片（）；
});
函数nextslide（）{
var$active=$（'.slider.active'）；
var wid=$active.width（）；
$active.css（'left'，wid）；
var$next；
如果（$active.next（）.length！=0）
$next=$active.next（）；
其他的
$next=$（'.slider.slide'）.first（）
$next.addClass（“next”）
setTimeout（函数（）{
$next.addClass（'active'）；
$next.removeClass（“next”）；
$active.removeClass（'active'）；
$active.css（'left'，0）；
}, 1000);
}
函数previousslide（）{
var$active=$（'.slider.active'）；
var$previous；
如果（$active.prev（）.length！=0）{
$previous=$active.prev（）；
}否则
$previous=$（'.slider.slide'）.last（）；
var wid=$previous.width（）；
$previous.css（'left'，wid）；
setTimeout（函数（）{
$active.removeClass（“active”）；
$active.addClass（“先前”）；
$previous.addClass（'active'）；
$previous.css（'left'，0）；
}, 1000);
setTimeout（函数（）{
$active.removeClass（“以前”）；
}, 2000);
}
*{
保证金：0；
填充：0；
}
.滑块.滑块{
过渡：左1秒；
位置：绝对位置；
身高：100%；
宽度：100%；
左：0；
背景色：白色；
}
.幻灯片图像{
最大宽度：100%；
}
.滑块，下一个{
z指数：98；
}
.滑块.上一个{
z指数：98；
}
.slider.active{
z指数：99；
}
.滑块{
位置：相对位置；
高度：400px；
宽度：400px；
溢出：隐藏；
边框：纯黑2px；
边界半径：5px；
}

普雷维乌斯
下一个
现在是文本和小猫！
我希望这对你有帮助
修改代码并不难。你真的应该自己试试。
@CerlinBoss我不知道如何使用Fiddle尝试在site@Persijn中重新创建问题，感谢您的帮助。目前，它会根据淡入或淡出效果更改为下一幅图像。我希望，用户感觉图像是从左向右移动的。@Persijn如何自动从左向右更改功能previousslide（）{var$active=$（'.slider.active'）；var wid=$active.width（）；$active.css（'right'，wid）；var$next；if（$active.next（）.length！=0）$next=$active.next（）；else$next=$（'.slider img'）。last（）$next.addClass（“previous”）setTimeout（函数（）{$next.addClass（'active'））；$next.removeClass（“previous”）；$active.removeClass（“active”）；$active.css（'right'，0）；}，1000）；}yo..man它正在工作。感谢伟大的代码。希望你出现在我未来的jquery项目中shi@Persijn我还有一个问题。如何使用jquery将div移到右侧。div包含一个标题、图像和t下面的一个子标题