Javascript 如何正确指向滑块#
我的菜单在左边,有8个选项,全部和7个不同的队名。在右边,我有8张幻灯片。左侧的8个选项中的每一个都应更改为右侧的相关幻灯片 这是我的代码:Javascript 如何正确指向滑块#,javascript,html,slider,Javascript,Html,Slider,我的菜单在左边,有8个选项,全部和7个不同的队名。在右边,我有8张幻灯片。左侧的8个选项中的每一个都应更改为右侧的相关幻灯片 这是我的代码: var slideIndex=0; 放映幻灯片(幻灯片索引); 功能当前幻灯片(n){ 放映幻灯片(幻灯片索引=n); } 功能演示幻灯片(n){ var slides=document.getElementsByClassName(“mySlides”); 滑动索引=n 幻灯片[slideIndex].style.display=“block”; }
var slideIndex=0;
放映幻灯片(幻灯片索引);
功能当前幻灯片(n){
放映幻灯片(幻灯片索引=n);
}
功能演示幻灯片(n){
var slides=document.getElementsByClassName(“mySlides”);
滑动索引=n
幻灯片[slideIndex].style.display=“block”;
}
因此,我最终对JavaScript进行了一点干预。html中唯一真正改变的是为JS添加事件处理程序,并删除标记中对mySlides类的第二次引用 不管怎样,这是密码
<div style="display:flex;">
<div style="flex:1;padding-right:5px;padding-left:40px;"><img src="https://lh3.googleusercontent.com/DsmSNoqWSSXzEve4aAy3vxlHdCWLqZjLIbC_rhNY7xSU9HHqsBmDCX1QiveQ1Y18B1dVqe4PTSkhLjfMa_sL=s1600" usemap="#image-map" class="fr-fil fr-dib">
<map name="image-map">
<area target="" alt="Finance" title="Finance" href="#slide1" coords="245,5,348,123" shape="rect" onclick="showSlides(1);">
<area target="" alt="Customer Care" title="Customer Care" href="#slide2" coords="99,47,212,131" shape="rect" onclick="showSlides(2);">
<area target="" alt="People and Culture" title="People and Culture" href="#slide3" coords="13,170,123,298" shape="rect" onclick="showSlides(3);">
</map>
</div>
<div class="slideshow-container" style="flex:1;padding-left:5px;">
<div class="mySlides fade" id="slide1" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/6OiY01hC8ZkojpDQy3GFq447c1d31VIEG2Ur36CrazhJgRUAbe6u0XX_DCqXp94CP1xfCS-rDhVtqAJhEg55=s1600" class="fr-fic fr-dii"></div>
<div class="mySlides fade" id="slide2" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/agOhlVPvTSSFbpb2Gs2W1xQmqoEPLxbxrAtvtkcbQSACL-6hDsAzZsvZ3iEy3Iu9h-Te4belDEDzSP-ANQ=s1600" class="fr-fic fr-dii"></div>
<div class="mySlides fade" id="slide3" style="width: default; display: none"><img src="https://lh3.googleusercontent.com/x6JNN51TlsKNnJuOmOvGg41rx3JJkovcAZN2T2CKjAQU8nJe1hQPe_SXk8HyqPAI3w4_I-25pkdZNRJ3cak=s1600" class="fr-fic fr-dii"></div>
</div>
<script>
var slideIndex = -1;
function currentSlide(n)
{
showSlides(slideIndex = n);
}
function showSlides(n)
{
var slides = document.getElementsByClassName("mySlides");
var x;
if (slideIndex == n - 1){
slideIndex = -1;
}else{
slideIndex = n - 1
}
for (x = 0; x < slides.length; x++){
if (slideIndex == x){
slides[slideIndex].style.display = "block";
}else{
slides[x].style.display = "none";
}
}
}
</script>
var slideIndex=-1;
功能当前幻灯片(n)
{
放映幻灯片(幻灯片索引=n);
}
功能演示幻灯片(n)
{
var slides=document.getElementsByClassName(“mySlides”);
var x;
如果(slideIndex==n-1){
slideIndex=-1;
}否则{
slideIndex=n-1
}
对于(x=0;x
Heya Patryk!欢迎:)您是否也可以将您的JavaScript代码添加到示例中?HTML代码没有包含足够的信息。如果没有任何javascript,是否无法使其正常工作?到处都有编码下一个和上一个按钮的代码片段,但不是我想要的方式,我希望我可以在div中使用id来指向某个幻灯片?我也添加了JavaScript。