01/10/2018, 08:15
Slide ảnh dùng javascript
Chào mọi người, em đang hoàn hiện một silde ảnh bằng javascript .
Em có thảm khảo cách tạo silde của w3school. Họ có 2 loại là auto chạy và mình tự ấn nút để chuyển slide.
Em giờ muốn áp dụng cả 2 vừa auto, mà vừa chuyển silde khi mình ấn nút bên phải hoặc trái. Nhưng khi em làm e bị lỗi là, khi để auto thì không sao. Nhưng khi ấn nút chuyển thì slide bị chuyển sai, rồi thời gian để chuyển cũng bị loạn theo.
Em chưa tìm được cách giải quyết cho phần này, nên mong mọi người giúp đỡ chỉ em đã sai ở đoạn nào, và hướng giải quyết ạ.
Em cảm ơn mọi người.
Đây là phần code ạ, chúc mọi người ăn tết vui vẻ :3
<head>
<style type="text/css"> /* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
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;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.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: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="prev()">❮</a>
<a class="next" onclick="next()">❯</a>
</div>
<script type="text/javascript">
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
function next(){
slideIndex++;
carousel();
clearTimeout(carousel);
setTimeout(carousel, 2000);
}
</script>
</body>
Bài liên quan
