Postingan lainnya
Error slider gambar tidak lanjut lagi, pas klik before atau after
ERROR NYA, ketika klik after gambar ga slide otomatis lagi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<div class="container">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/1.jpg"></div>
</div>
</div>
<button id="before">before</button>
<button id="after">after</button>
<script src="jquery.js"></script>
<script src="main.js"></script>
</body>
</html>
body {
font-family: Arial, Helvetica, sans-serif;
width: 70%;
margin: 30px auto;
}
.main-container {
width: 400px;
margin: 0 auto;
overflow: hidden;
}
.container {
width: 4000px;
margin: 0 auto;
}
.container div {
float: left;
width: 400px;
}
.container img {
width: 100%;
}
$(document).ready(function() {
function slide(num) {
if ( $('.container').css('marginLeft') == '-1600px') {
$('.container').css('marginLeft', '0px');
} else {
$('.container').animate({marginLeft : num});
}
}
var autoslide = setInterval(function() {
slide('-=400px');
}, 2000);
$('#after').click(function() {
slide('-=400px');
clearInterval(autoslide);
});
$('#before').click(function() {
if ( $('.container').css('marginLeft') == '0px') {
$('.container').css('marginLeft', '-1200px');
}
else {
slide('+=400px');
clearInterval(autoslide);
}
});
});
0
Tanggapan
jangan hanya screenshot, jelaskan di pertanyaan kamu masalahnya apa dan dimana. Untuk menampilkan kode, kamu harus copy-paste dan gunakan tag kode, bukan upload sebagai gambar
1 Jawaban:
<pre>// bukannya di sini :
$('#after').click(function() {
slide('-=400px');
clearInterval(autoslide);
});
// ada clearInterval yaa ? jadi autoslide nya udah ga berinterval lagi,, // jadinya autoslidenya ga nyala</pre>
0