<html>
<head>
<style type="text/css">
#slider{
position:relative;
width:1024px;
height:400px;
margin:0 auto 0 auto;
top:5%;
padding:0;
border:1px solid black;
}
#button_prev{
position:absolute;
width:50px;
height:50px;
top:175px;
left:20px;
border-radius:100%;
background-color:#FFF;
transistion-property: width, height;
transition-duration:1s;
}
#button_next{
position:absolute;
width:50;
height:50px;
top:175px;
right:20px;
border-radius:100%;
background-color:#FFF;
transistion-property: width, height;
transition-duration:1s;
}
#button_prev:hover{
width:60px;
height:60px;
}
#button_next:hover{
width:60px;
height:60px;
}
@-webkit-keyframes 'pulse' {
0% {
opacity:0;
}
33% {
opacity:0,7;
}
67% {
opacity:0,3;
}
100% {
opacity:1;
}
}
@keyframes 'pulse'{
0% {
opacity:0;
}
33% {
opacity:0,7;
}
67% {
opacity:0,3;
}
100% {
opacity:1;
}
}
.pulsedbox {
-webkit-animation: pulse 2s;
animation: pulse 2s;
}
</style>
<script src="jquery-3.1.1.min.js"></script>
<script>
var gallery = new Array();
gallery[0] = "1.jpg";
gallery[1] = "2.jpg";
gallery[2] = "3.jpg";
gallery[3] = "4.jpg";
var i = 0;
function prev(){
if (i == 0)
{
i = gallery.length - 1;
}
else
{
i--;
}
var elm = document.getElementById('ok');
elm.style.animation='pulse 2s';
var newone = elm.cloneNode(true);
newone.src = gallery[i];
elm.parentNode.replaceChild(newone, elm);
}
function next(){
if (i < gallery.length - 1)
{
i++;
}
else
{
i=0;
}
var elm = document.getElementById('ok');
elm.style.animation='pulse 2s';
var newone = elm.cloneNode(true);
newone.src = gallery[i];
elm.parentNode.replaceChild(newone, elm);
}
</script>
</head>
<body>
<div id="slider">
<img src="1.jpg" style="width:100%; height:400px;" name="immagine" class="pulsedbox" id="ok">
<a href="javascript:prev()"><div id="button_prev" class="trans">
</div></a>
<a href="javascript:next()"><div id="button_next" class="trans">
</div></a>
</div>
</body>
</html>