滑块上的Javascript按钮

时间：2018-12-30 01:24:50

标签： javascript html css

我想在滑块中添加一个按钮，我用一个“ a”标签完成了该操作，但是无法选择它并且不能将其用作链接。

我在网络上找到了此代码，但是我认为该代码非常复杂，我无法弄清楚在哪里编写具有按钮的正确代码。

我添加的按钮仅出现在第一张幻灯片中，但是我需要在每张幻灯片上添加一个按钮。

var slideIndex,slides,dots,captionText;
function initGallery(){
	// 1 para ocultar y mostrar imageHolder con opasity 0
    slideIndex = 0;
    slides=document.getElementsByClassName("imageHolder"); // slides=4
    slides[slideIndex].style.opacity=1;
	
    // 2 para mostrar las letras 
    captionText=document.querySelector(".captionTextHolder .captionText");
    captionText.innerText=slides[slideIndex].querySelector(".captionText").innerText;

    // 3 disable nextPrevBtn if slide count is one
    if(slides.length<2){
        var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
        nextPrevBtns.style.display="none";
        for (i = 0; i < nextPrevBtn.length; i++) {
            nextPrevBtn[i].style.display="none";
        }
    }

    // 4 add dots
    dots=[];
    var dotsContainer=document.getElementById("dotsContainer"),i;
    for (i = 0; i < slides.length; i++) {
        var dot=document.createElement("span");
        dot.classList.add("dots");
        dotsContainer.append(dot);
        dot.setAttribute("onclick","moveSlide("+i+")");
        dots.push(dot);
    }
    dots[slideIndex].classList.add("active");
}

// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
    moveSlide(slideIndex+n);
}
function moveSlide(n){
    var i;
    var current,next;
    var moveSlideAnimClass={
          forCurrent:"",
          forNext:""
    };
    var slideTextAnimClass;
    if(n>slideIndex) {
        if(n >= slides.length){n=0;}
        moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
        moveSlideAnimClass.forNext="moveLeftNextSlide";
        slideTextAnimClass="slideTextFromTop";
    }else if(n<slideIndex){
        if(n<0){n=slides.length-1;}
        moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
        moveSlideAnimClass.forNext="moveRightPrevSlide";
        slideTextAnimClass="slideTextFromBottom";
    }

    if(n!=slideIndex){
        next = slides[n];
        current=slides[slideIndex];
        for (i = 0; i < slides.length; i++) {
            slides[i].className = "imageHolder";
            slides[i].style.opacity=0;
            dots[i].classList.remove("active");
        }
        current.classList.add(moveSlideAnimClass.forCurrent);
        next.classList.add(moveSlideAnimClass.forNext);
        dots[n].classList.add("active");
        slideIndex=n;
        captionText.style.display="none";
        captionText.className="captionText "+slideTextAnimClass;
        captionText.innerText=slides[n].querySelector(".captionText").innerText;
        captionText.style.display="block";
    }

}
var timer=null;
function setTimer(){
    timer=setInterval(function () {
        plusSlides(1) ;
    },6000);
}
setTimer();
function playPauseSlides() {
    var playPauseBtn=document.getElementById("playPause");
    if(timer==null){
        setTimer();
        playPauseBtn.style.backgroundPositionY="0px"
    }else{
        clearInterval(timer);
        timer=null;
        playPauseBtn.style.backgroundPositionY="-33px"
    }
}
.galleryContainer{
	top: 0px;
	position: relative;
    width: 100%;
    height: 580px;
    max-width: 2000px;
    margin: auto;
    box-sizing: border-box;
	background-color: red;
}
.galleryContainer .slideShowContainer{
    width: 100%;
	max-width: 1600px;
	align-content: center;
    height: 100%;
    overflow: hidden;
    background-color: gainsboro;
    position: relative;
}
.galleryContainer .slideShowContainer #playPause{
    width: 32px;
    height: 32px;
    position: absolute;
    background-image: url(/img/playPause.png);
    background-repeat: no-repeat;
    z-index: 5;
    background-size: cover;
    margin: 5px;
    cursor: pointer;
	top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
    opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
    width: 100%;
    height: 100%;
    position: absolute;
	opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
    width: 100%;
    min-width: 1600px;
    height: 100%;
	background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
    display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
    position: absolute;
	display: block;
	width: 220px;
	height: 40px;
	font-size: 20px;
	text-decoration: none;
	left: 50%;
	top: 350px;
	padding-top: 4px;
	text-align: center;
	border: 2px solid #FF0000;
	border-radius: 15px;
	transition: all 0.5s;
	color: red;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
    width: 50px;
    background: #00000036;
    position: absolute;
    left: 0;
    z-index: 3;
    transition: background 0.5s;
    height: 72px;
    top: 50%;
    transform: translateY(-50%);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
    left: auto;
    right: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
    background: #000000a8;
    cursor: pointer;
}
.galleryContainer .arrow{
    display: inline-block;
    border: 3px solid white;
    width: 10px;
    height: 10px;
    border-left: none;
    border-bottom: none;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
    transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
    transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
    position: absolute;
    bottom: 30%;
    z-index: 1;
    color: red;
	font-family: "Nunito";
    font-size: 40px;
    text-align: left;
    width: 400px;
    height: 200px;
    line-height: 35px;
    overflow: hidden;
	margin-left: 50%;
    margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
    margin: 0;
}
.galleryContainer #dotsContainer{
	position: absolute;
    width: 10%;
    height: 3%;
    text-align: center;
    padding-top: 0px;
    box-sizing: border-box;
	margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
	bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 5px;
    background-color: #bbb;
    cursor: pointer;
    transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
    margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
    background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
    animation-name: moveLeftCurrent;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
    animation-name: moveLeftNext;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
    from {margin-left: 0;opacity: 1;}
    to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
    from {margin-left: 100%;opacity: 1;}
    to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
    animation-name: moveRightCurrent;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
    animation-name: moveRightPrev;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
    from {margin-left: 0;opacity: 1;}
    to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
    from {margin-left: -100%;opacity: 1;}
    to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
    animation-name: slideTextFromBottom;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
    from {opacity: 0;margin-top: 100px}
    to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
    animation-name: slideTextFromTop;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
    from {opacity: 0;margin-top: -100px}
    to {opacity: 1;margin-top: 0px;}
}
	    <div class="galleryContainer">
        <div class="slideShowContainer">
            <div id="playPause" onclick="playPauseSlides()"></div>
            <div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
            <div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
            <div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
				<a href="#" class="captionText">Todo lo que necesitas en un solo lugar</a>
				<a href="#" class="btnSlider">Mas informacion</a>
            </div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-02</p>
            </div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-03</p>
            </div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-04</p>
            </div>
        </div>
        <div id="dotsContainer"></div>
        </div>

1 个答案:

答案 0 :(得分：0)

完成并正常工作（再次！）。我在div中移动链接，并用.innerHTML替换.innerText选择器（但是链接现在看起来像链接，因此您必须设置其样式）。是的，它可能更简单，但这也可行。

var slideIndex,slides,dots,captionText;
function initGallery(){
	// 1 para ocultar y mostrar imageHolder con opasity 0
    slideIndex = 0;
    slides=document.getElementsByClassName("imageHolder"); // slides=4
    slides[slideIndex].style.opacity=1;
	
    // 2 para mostrar las letras 
    captionText=document.querySelector(".captionTextHolder .captionText");
    captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;

    // 3 disable nextPrevBtn if slide count is one
    if(slides.length<2){
        var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
        nextPrevBtns.style.display="none";
        for (i = 0; i < nextPrevBtn.length; i++) {
            nextPrevBtn[i].style.display="none";
        }
    }

    // 4 add dots
    dots=[];
    var dotsContainer=document.getElementById("dotsContainer"),i;
    for (i = 0; i < slides.length; i++) {
        var dot=document.createElement("span");
        dot.classList.add("dots");
        dotsContainer.append(dot);
        dot.setAttribute("onclick","moveSlide("+i+")");
        dots.push(dot);
    }
    dots[slideIndex].classList.add("active");
}

// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
    moveSlide(slideIndex+n);
}
function moveSlide(n){
    var i;
    var current,next;
    var moveSlideAnimClass={
          forCurrent:"",
          forNext:""
    };
    var slideTextAnimClass;
    if(n>slideIndex) {
        if(n >= slides.length){n=0;}
        moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
        moveSlideAnimClass.forNext="moveLeftNextSlide";
        slideTextAnimClass="slideTextFromTop";
    }else if(n<slideIndex){
        if(n<0){n=slides.length-1;}
        moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
        moveSlideAnimClass.forNext="moveRightPrevSlide";
        slideTextAnimClass="slideTextFromBottom";
    }

    if(n!=slideIndex){
        next = slides[n];
        current=slides[slideIndex];
        for (i = 0; i < slides.length; i++) {
            slides[i].className = "imageHolder";
            slides[i].style.opacity=0;
            dots[i].classList.remove("active");
        }
        current.classList.add(moveSlideAnimClass.forCurrent);
        next.classList.add(moveSlideAnimClass.forNext);
        dots[n].classList.add("active");
        slideIndex=n;
        captionText.style.display="none";
        captionText.className="captionText "+slideTextAnimClass;
        captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
        captionText.style.display="block";
    }
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
    timer=setInterval(function () {
        plusSlides(1) ;
    },6000);
}
setTimer();
function playPauseSlides() {
    var playPauseBtn=document.getElementById("playPause");
    if(timer==null){
        setTimer();
        playPauseBtn.style.backgroundPositionY="0px"
    }else{
        clearInterval(timer);
        timer=null;
        playPauseBtn.style.backgroundPositionY="-33px"
    }
}
.galleryContainer{
	top: 0px;
	position: relative;
    width: 100%;
    height: 580px;
    max-width: 2000px;
    margin: auto;
    box-sizing: border-box;
	background-color: red;
}
.galleryContainer .slideShowContainer{
    width: 100%;
	max-width: 1600px;
	align-content: center;
    height: 100%;
    overflow: hidden;
    background-color: gainsboro;
    position: relative;
}
.galleryContainer .slideShowContainer #playPause{
    width: 32px;
    height: 32px;
    position: absolute;
    background-image: url(/img/playPause.png);
    background-repeat: no-repeat;
    z-index: 5;
    background-size: cover;
    margin: 5px;
    cursor: pointer;
	top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
    opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
    width: 100%;
    height: 100%;
    position: absolute;
	opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
    width: 100%;
    min-width: 1600px;
    height: 100%;
	background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
    display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
    position: absolute;
	display: block;
	width: 220px;
	height: 40px;
	font-size: 20px;
	text-decoration: none;
	left: 50%;
	top: 350px;
	padding-top: 4px;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 15px;
	transition: all 0.5s;
	color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
    width: 50px;
    background: #00000036;
    position: absolute;
    left: 0;
    z-index: 3;
    transition: background 0.5s;
    height: 72px;
    top: 50%;
    transform: translateY(-50%);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
    left: auto;
    right: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
    background: #000000a8;
    cursor: pointer;
}
.galleryContainer .arrow{
    display: inline-block;
    border: 3px solid white;
    width: 10px;
    height: 10px;
    border-left: none;
    border-bottom: none;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
    transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
    transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
    position: absolute;
    bottom: 30%;
    z-index: 1;
    color: white;
	font-family: "Nunito";
    font-size: 40px;
    text-align: left;
    width: 400px;
    height: 200px;
    line-height: 35px;
    overflow: hidden;
	margin-left: 50%;
    margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
    margin: 0;
}
.galleryContainer #dotsContainer{
	position: absolute;
    width: 10%;
    height: 3%;
    text-align: center;
    padding-top: 0px;
    box-sizing: border-box;
	margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
	bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 5px;
    background-color: #bbb;
    cursor: pointer;
    transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
    margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
    background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
    animation-name: moveLeftCurrent;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
    animation-name: moveLeftNext;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
    from {margin-left: 0;opacity: 1;}
    to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
    from {margin-left: 100%;opacity: 1;}
    to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
    animation-name: moveRightCurrent;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
    animation-name: moveRightPrev;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
    from {margin-left: 0;opacity: 1;}
    to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
    from {margin-left: -100%;opacity: 1;}
    to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
    animation-name: slideTextFromBottom;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
    from {opacity: 0;margin-top: 100px}
    to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
    animation-name: slideTextFromTop;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
    from {padding-bottom: 90%;}
    to {padding-bottom: 0;}
}
	    <div class="galleryContainer">
        <div class="slideShowContainer">
            <div id="playPause" onclick="playPauseSlides()"></div>
            <div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
            <div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
            <div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
				<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
				<a href="#">Mas informacion</a>
            </div></div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-02</p>
            </div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-03</p>
            </div>
            <div class="imageHolder">
                <img src="https://picsum.photos/g/1600/500/?random">
                <p class="captionText">Caption Text-04</p>
            </div>
        </div>
        <div id="dotsContainer"></div>
        </div>

相关问题
最新问题