幻灯片按钮下划线并淡出动画

Question

I'm currently using a default shape of slideshow indicator which is a dot/bullet shaped indicator.

Questions :

• Everytime my mouse hover on the next button, it will display a underline below the button. Is there a way to remove it ?
• And Is there is a way to change the fade animation into Fade Out ?

Because of time constraint I don't have much time to make a slideshow from scratch so I just grab this code mostly from W3School sites and used it as it is.

Here's a part of the HTML code :

 var slideIndex = 1; var timer = null; showSlides(slideIndex); function plusSlides(n) { clearTimeout(timer); showSlides(slideIndex += n); } function currentSlide(n) { clearTimeout(timer); showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n == undefined) { n = ++slideIndex } if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; timer = setTimeout(showSlides, 4000); } 

 * { box-sizing: border-box } <meta name="viewport" content="width=device-width, initial-scale=1.0">body { font-family: Verdana, sans-serif; margin: 0 } .mySlides { display: none } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: black; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* Caption text */ .text { background-color: #424242; color: #ffffff; opacity: 0.8; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 0px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .1 } to { opacity: 1 } } @keyframes fade { from { opacity: .1 } to { opacity: 1 } } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next, .text { font-size: 11px } } 

 <div class="slideshow-container"> <h1 class="page_title">IR</h1> <div class="mySlides fade"> <a href="/ir/library/results_briefing/"></a> <img src="/ir/images/slider_img02.jpg" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/investment/event/"></a> <img src="/ir/images/slider_img01.jpg" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/library/"></a> <img src="/ir/images/slider_img03.jpg" alt="IRA" style="width:100%"> <div class="text">IRA</div> </div> <div class="mySlides fade"> <a href="/ir/business/message/"></a> <img src="/ir/images/slider_img04.jpg" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/calendar/"></a> <img src="/ir/images/slider_img05.jpg" alt="A" style="width:100%"> <div class="text">A</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> </div> 

Answer 1

I can't reproduce that as the CSS alignment is a bit out of place. But my first guess would be to use the following for the underline removal.

.next, .prev { text-decoration: none; }

Answer 2

  var slideIndex = 1; var timer = null; showSlides(slideIndex); function plusSlides(n) { clearTimeout(timer); showSlides(slideIndex += n); } function currentSlide(n) { clearTimeout(timer); showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n==undefined){n = ++slideIndex} if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; timer = setTimeout(showSlides, 4000); } 

 * {box-sizing: border-box} <meta name="viewport" content="width=device-width, initial-scale=1.0"> body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: black; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; text-decoration: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* Caption text */ .text { background-color: #424242; color: #ffffff; opacity: 0.8; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 0px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation: fade 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fade 2s; /* Firefox < 16 */ -ms-animation: fade 2s; /* Internet Explorer */ -o-animation: fade 2s; /* Opera < 12.1 */ animation: fade 2s; } @-webkit-keyframes fade { from {opacity: 0} to {opacity: 1} } @keyframes fade { from {opacity: 0} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } 

 <div class="slideshow-container"> <h1 class="page_title">IR</h1> <div class="mySlides fade"> <a href="/ir/library/results_briefing/"></a> <img src="http://via.placeholder.com/100x30" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/investment/event/"></a> <img src="http://via.placeholder.com/100x30" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/library/"></a> <img src="http://via.placeholder.com/100x30" alt="IRA" style="width:100%"> <div class="text">IRA</div> </div> <div class="mySlides fade"> <a href="/ir/business/message/"></a> <img src="http://via.placeholder.com/100x30" alt="A" style="width:100%"> <div class="text">A</div> </div> <div class="mySlides fade"> <a href="/ir/calendar/"></a> <img src="http://via.placeholder.com/100x30" alt="A" style="width:100%"> <div class="text">A</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> </div> 

this should work