Question

我在这里的第一篇文章！

我正在一个网站上工作，该网站有一个全屏幻灯片着陆页。它每隔几秒就会改变一次图像，并在页面的一侧有小点，以指示当前活动的图像。到目前为止，它的工作效果都很好，但我想让小点可点击，然后更改为相应的图像。

由于我在编码方面还很陌生，所以我找不到有效的解决方案。我可以在网上找到的每个图像滑块都是手动的，带有可点击的按钮，或者是自动的，根本没有按钮。

这是我的代码：

HTML

<div id="slideshow">
        <div id="slide1" class="mySlides fade">Image 1</div>
        <div id="slide2" class="mySlides fade">Image 2</div>
        <div id="slide3" class="mySlides fade">Image 3</div>
        <div id="dotContainer">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>          
</div>

CSS

.mySlides{
    display: none;  
}

#slideshow{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #717171;
}

#dotContainer{
    position: absolute;
    top: 50%;
    left: 98%;
    transform: translate(-50%, -50%);
}

.dot{
    width: 12px;
    height: 12px;
    margin: 6px 15px 6px 0;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: block;
    transition: 0.6s;
}

.activeDot{
    background-color: rgba(34,34,34, 0.7);
}

.fade{
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade{
    from{
        opacity: 0.4;
    }
    to{
        opacity: 1;
    }
}

的JavaScript

var slideIndex = 0;
    showSlides();

    function showSlides(){
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");

        for (var i = 0; i < slides.length; i++){
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length){
            slideIndex = 1;
        }
        for (var i = 0; i < dots.length; i++){
        dots[i].className = dots[i].className.replace(" activeDot", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " activeDot";
        setTimeout(showSlides, 3000);       
    }

您可以在此处看到它：JSFiddle Demo

非常感谢所有帮助，谢谢

Answer 1

https://jsfiddle.net/0wLgdoru/37/

＆＃13;

.mySlides{
	display: none;  
}

#slideshow{
	width: 100%;
	height: 100vh;
	position: relative;
  background-color: #717171;
}

#dotContainer{
	position: absolute;
	top: 50%;
	left: 98%;
	transform: translate(-50%, -50%);
}

.dot{
	width: 12px;
	height: 12px;
	margin: 6px 15px 6px 0;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	display: block;
	transition: 0.6s;
}

.activeDot{
	background-color: rgba(34,34,34, 0.7);
}

.fade{
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade{
	from{
		opacity: 0.4;
	}
	to{
		opacity: 1;
	}
}

＆＃13;

<div id="slideshow">
			<div id="slide1" class="mySlides fade">Image 1</div>
			<div id="slide2" class="mySlides fade">Image 2</div>
			<div id="slide3" class="mySlides fade">Image 3</div>
			<div id="dotContainer">
				<span class="dot" slideDot="1"></span>
				<span class="dot" slideDot="2"></span>
				<span class="dot" slideDot="3"></span>
			</div>			
</div>

＆＃13;

public partial class P_GET_USER_Result
{
    [key]
    public int Id {get; set;}
    public string USERNAME { get; set; }
    public string NAME { get; set; }
    public int ROLE { get; set; }
    public int STATUS { get; set; }
    public string CREATED_DATE { get; set; }
}

＆＃13;

JavaScript自动幻灯片，试图获得工作按钮

1 个答案: