Javascript 如何制作简单的多媒体幻灯片

我现在工作的公司正在制作网页模板。 我是一名网页设计师。我想做一个简单的幻灯片。 我在互联网上搜索，比如Youtube，在stackoverflow上发帖，然后慢慢地写下我自己。 但现在我有一个问题。我不能让它滑动

我的想法是： 单击左箭头时，向左移动一块，单击右箭头时，向右移动一块

如果：最后一个子项，请返回第一张图片

在未来，它将是响应性的。（在本节中，如果太难，请稍后再做）

请帮帮我

$（文档）.ready（函数（）{
var page_body=$（'#page body'）.width（）；
变量宽度_li=0；
var保证金项目幻灯片=5；
风险值项目显示=3；
var calc_width_container=（（项目显示*页边距项目幻灯片）+页面正文）-页边距项目幻灯片；
$（“.container slide”）.css（'max-width'，calc\u-width\u-container）；
$（“.container slide ul>li”）.css（'width'，page\u body/items\u show）；
$（“.container slide ul>li”）.css（{marginRight:margin\u items\u slide+'px}）；
$（'.container slide ul>li'）。每个（函数（）{
宽度_li+=$（此）。外径（真）；
});
$（'.container slide overflow>ul'）.css（'width'，width\u li+margin\u items\u slide）；
$（“#右箭头”）。在（'click'，function（）上{
//连我都做不到
});
$（“#左箭头”）。在（'click'，function（）上{
//连我都做不到
});
$（窗口）。调整大小（函数（）{
var page_body=$（'#page body'）.width（）；
变量宽度_li=0；
var保证金项目幻灯片=5；
风险值项目显示=3；
var calc_width_container=（（项目显示*页边距项目幻灯片）+页面正文）-页边距项目幻灯片；
$（“.container slide”）.css（'max-width'，calc\u-width\u-container）；
$（“.container slide ul>li”）.css（'width'，page\u body/items\u show）；
$（“.container slide ul>li”）.css（{marginRight:margin\u items\u slide+'px}）；
$（'.container slide ul>li'）。每个（函数（）{
宽度_li+=$（此）。外径（真）；
});
$（'.container slide overflow>ul'）.css（'width'，width\u li+margin\u items\u slide）；
$（“#右箭头”）。在（'click'，function（）上{
//连我都做不到
});
$（“#左箭头”）。在（'click'，function（）上{
//连我都做不到
});
});
});
*{
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#页体{
宽度：350px；
位置：相对位置；
最小高度：10px；
左边距：自动；
右边距：自动；
}
.集装箱滑梯{
边际：0px；
填充：0px；
列表样式：无；
}
.容器幻灯片ul：在，
.集装箱幻灯片ul：之后{
内容：''；
显示：表格；
}
.集装箱幻灯片ul：之后{
明确：两者皆有；
}
.集装箱幻灯片ul>li{
浮动：左；
背景：橙色；
文本对齐：居中；
颜色：#ffffff；
填充：50px；
}
.容器滑道溢出{
溢出：隐藏；
}
.集装箱滑梯{
位置：相对位置；
}
.集装箱滑动按钮{
宽度：30px；
高度：30px；
背景：红色；
边界：无；
颜色：#ffffff；
位置：绝对位置；
z指数：999；
}
#左箭头{
左：-15px；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
#右箭头{
右图：-15px；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
@介质（最大宽度：350px）{
#页体{
宽度：100%；
}
#左箭头{
左：0px；
}
#右箭头{
右：0px；
}
}


一,
二,
三,
四,
五,
六,
七,
八,

←
→
仅分享有关幻灯片的简单概念。您可以使用滑块活动项的索引进行播放。在这里，我向当前显示的项目添加了
活动
类，当单击
右箭头
时，我将第一个活动项目隐藏，并在最后一个活动项目旁边显示项目。类似地，单击左箭头时，我会隐藏最后一个活动项，并显示第一个活动项之前的项。希望这有助于理解这个概念


$（文档）.ready（函数（）{
var page_body=$（'#page body'）.width（）；
变量宽度_li=0；
var保证金项目幻灯片=5；
风险值项目显示=3；
var calc_width_container=（（项目显示*页边距项目幻灯片）+页面正文）-页边距项目幻灯片；
$（“.container slide”）.css（'max-width'，calc\u-width\u-container）；
$（“.container slide ul>li”）.css（'width'，page\u body/items\u show）；
$（“.container slide ul>li”）.css（{marginRight:margin\u items\u slide+'px}）；
$（'.container slide ul>li'）。每个（函数（）{
宽度_li+=$（此）。外径（真）；
});
$（'.container slide overflow>ul'）.css（'width'，width\u li+margin\u items\u slide）；
$（“#右箭头”）。在（'click'，function（）上{
//连我都做不到
如果（$（'li.active'）.last（）.next（）.length>0）{
$（'li.active'）.first（）.hide（）；
$（'li.active'）.first（）.removeClass（'active'）；
$（'li.active'）.last（）.next（）.show（）；
$（'li.active'）.last（）.next（）.addClass（'active'）；
}
});
$（“#左箭头”）。在（'click'，function（）上{
//连我都做不到
如果（$（'li.active'）.first（）.prev（）.length>0）{
$（'li.active'）.first（）.prev（）.show（）；
$（'li.active'）.first（）.prev（）.addClass（'active'）；
$（'li.active'）.last（）.hide（）；
$（'li.active'）.last（）.removeClass（'active'）；
}
});
$（窗口）。调整大小（函数（）{
var page_body=$（'#page body'）.width（）；
变量宽度_li=0；
var保证金项目幻灯片=5；
风险值项目显示=3；
var calc_width_container=（（项目显示*页边距项目幻灯片）+页面正文）-页边距项目幻灯片；
$（“.container slide”）.css（'max-width'，calc\u-width\u-container）；
$（“.container slide ul>li”）.css（'width'，page\u body/items\u show）；
$（“.container slide ul>li”）.css（{marginRight:margin\u items\u sl
 Try this it will work fine according to your requirement