如何使用CSS网格和javascript制作图像幻灯片
我正在尝试制作一个图像幻灯片。但是它似乎不起作用，我在检查javascript时没有收到任何错误。不知道我做错了什么如何使用CSS网格和javascript制作图像幻灯片,javascript,html,css,css-grid,Javascript,Html,Css,Css Grid,我正在尝试制作一个图像幻灯片。但是它似乎不起作用，我在检查javascript时没有收到任何错误。不知道我做错了什么 $（文档）.ready（函数（）{ $（'.work'）。滚动（函数（）{ 变量$this=$（'h2'）； $（'.image'）。每个（函数（）{ var hT=$（this）.offset（）.top， hH=$（'h2'）.outerHeight（）， wH=$（'.work'）.height（）， wS=$this.scrollTop（）； console.log（（
$（文档）.ready（函数（）{
$（'.work'）。滚动（函数（）{
变量$this=$（'h2'）；
$（'.image'）。每个（函数（）{
var hT=$（this）.offset（）.top，
hH=$（'h2'）.outerHeight（），
wH=$（'.work'）.height（），
wS=$this.scrollTop（）；
console.log（（hT-wH），wS）；
如果（wS>（hT+hH-wH））{
$（'#count'）.text（$（this.data（'index'））；
}
});
});
});
函数smallscreen（）{
如果（window.innerWidth<959）{var workSlide=document.querySelector（'.work'）；
var sliderImages=document.querySelectorAll（'.work h2'）；
var prevButton=document.querySelector（'.prev'）；
var nextButton=document.querySelector（'.next'）；
var计数器=1；
常量大小=幻灯片图像[0]。客户端宽度；
workSlide.style.transform='translateX（+-size*计数器）+'px'；
addEventListener（'click'，function next（））{
如果（计数器>=sliderImages.length-1）返回；
workSlide.style.transition=“转换0.4s轻松输入输出”；
计数器++；
workSlide.style.transform='translateX（+-size*计数器）+'px'；
});
prevButton.addEventListener（'单击'，函数prev（）{
if（反img）{
最大宽度：100vw；
高度：自动；
}
.按钮{
网格行：2/4；
网格柱：1；
自对准：居中；
填充：0.75em；
显示：网格；
网格模板柱：1fr 1fr；
过渡：0.5s到0.0s；
z指数：4；
宽度：100vw；
}
上一篇{
自我辩护：开始；
}
.下一个{
自我辩护：结束；
}
钮扣{
背景：无；
颜色：继承；
边界：无；
字体：继承；
光标：指针；
大纲：继承；
显示器：flex；
}
.按钮：悬停{
颜色：白色；
}
.页脚{
显示：网格；
网格模板列：1fr；
网格模板行：1fr 1fr；
z指数：3；
最小高度：80px；
网格行：3；
文本对齐：居中；
最大宽度：100vw；
}
.电话{
网格行：2；
自对准：居中；
自我辩护：中心；
}
.媒体{
列表样式类型：无；
显示器：flex；
证明内容：之间的空间；
填充：1em 0；
网格行：1；
垫底：1米；
}
李>a{
文字装饰：无；
颜色：黑色；
}
a:悬停{
字号：800；
}
}
设计爱好者问题
1/17
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不轻率，就必须为自己的行为负责。
上
下一个
+31231212
.work.work（也可从以下网址获得）
类滑块{
建造师（el）{
this.el=el；
this.activeIndex=0；
this.numItems=this.el.children（）.length；
//自动前进滑块
this.interval=setInterval（（）=>this.next（），5000）；
}
prev（）{
此.activeIndex--；
如果（this.activeIndex<0）
this.activeIndex=this.numItems-1；
this.updateDom（）；
}
下一个（）{
这个.activeIndex++；
如果（this.activeIndex>=this.numItems）
this.activeIndex=0；
this.updateDom（）；
}
updateDom（）{
this.el.children（）.css（'transform'，'translateX（-${this.activeIndex}00%）`）
}
}
$(() => {
让滑块=新滑块（$（“.work”）；
$（“.prev”）。单击（（）=>slider.prev（））；
$（“.next”）。单击（（）=>slider.next（））；
})；工作{
/*指定图像框的大小（可以是您想要的任何单位）*/
宽度：500px；
高度：300px；
溢出：隐藏；
显示器：flex；
}
img{
宽度：100%；
身高：100%；
转型：转型0.5s轻松；
改变：转变；
}
上
下一个
sliderImages