Javascript 图像滑块html css

我需要创建这个图像滑块。哪种语言/模板/js/代码最适合使用？我在考虑斯里克，但我认为它可以更容易

---

以下是不使用任何库的代码

只需将图像URL更改为您的图像

在没有图书馆的情况下做某事是最佳的表演实践

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

正文{
字体系列：Arial；
保证金：0；
}
* {
框大小：边框框；
}
img{
垂直对齐：中间对齐；
}
/*定位图像容器（需要定位左右箭头）*/
.集装箱{
位置：相对位置；
}
/*默认情况下隐藏图像*/
迈斯利德斯先生{
显示：无；
}
/*将光标悬停在缩略图上时添加指针*/
.光标{
光标：指针；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：40%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*图像文本的容器*/
.标题容器{
文本对齐：居中；
背景色：#222；
填充：2x16px；
颜色：白色；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*六列并排*/
.栏目{
浮动：左；
宽度：16.66%；
}
/*为thumnbail图像添加透明度效果*/
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}

幻灯片库
1/6
2/6
3/6
4/6
5/6
6/6
❮
❯

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
对于（i=0；islides.length）{slideIndex=1}
对于（i=0；i

*{框大小：边框框；}
正文{字体系列：Verdana，无衬线；}
.mySlides{display:none；}
img{垂直对齐：中间；}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*点/子弹/指示器*/
多特先生{
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.主动{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.text{字体大小：11px}
}

自动幻灯片放映
每10秒更改一次图像：

1/3
标题文本
2/3
标题二
3/3
标题三

或引导转盘将为您节省大量时间@马蒂，除非他们有一个像这样的旋转木马谢谢你的帮助！当我想在“底部栏”中显示7个图像时，图像会从栏中消失并变大，你知道吗？为此，你还必须为该部分创建一个滑块，这样你就可以拥有无限的底部图像最大值是多少？6？不是这样的，如果你可以缩小图像的大小，那么你就可以尽可能地适应它，但如果你创建一个滑块，那么你就可以适应100的图像