<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<script src="jquery-3.5.1.js"></script>
<script>
$(document).ready(function() {
var bg = ['red', 'yellow', 'pink', 'blue', 'green'];
$('.img').css({
backgroundColor: function(index) {
return bg[index];
},
});
mask_width = $('.img').width();
$('#prev').click(function() {
$('.img_wrap').animate({
left: 0,
}, 1000, function() {
$('.img_wrap').css({
left: -mask_width,
}).find('.img').last().prependTo('.img_wrap');
});
});
$('#next').click(function() {
$('.img_wrap').animate({
left: -mask_width,
}, 1000, function() {
$('.img_wrap').css({
left: 0,
}).find('.img').first().appendTo('.img_wrap');
});
});
function time() {
a = setInterval(function() {
$('#next').trigger('click');
}, 1000);
}
time();
$('.but').hover(function() {
clearInterval(a);
}, function() {
time();
});
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
.mask {
width: 500px;
height: 400px;
border: 5px solid black;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.but {
width: 50px;
height: 50px;
position: absolute;
top: 175px;
background-color: black;
color: white;
line-height: 50px;
text-align: center;
z-index: 9;
}
#next {
right: 0;
}
.img_wrap {
width: 2500px;
height: 400px;
position: absolute;
}
.img {
width: 500px;
height: 400px;
float: left;
font-size: 100px;
line-height: 400px;
text-align: center;
}
</style>
</head>
<body>
<div class="mask">
<div class="but" id="prev">prev</div>
<div class="but" id="next">next</div>
<div class="img_wrap">
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
<div class="img">5</div>
</div>
</div>
</body>
</html>