Slides, transition of images with JS and radius, when hitting the mouse on top of the image pause the transition, while withdrawing continue the transition

Navigation
2

 onload  = start;

function start(){	
var i = 1;
function Move(){ 	
	i = (i%3)+1; // 4 is the Number of image in slider
	document.getElementById('t'+i).checked = true;
}
setInterval(Move,3000); //change img in 3 sec
} 
body{ background-color:#0066FF;}

.ct{ 
 position:relative; 
 width:400px; 
 height:220px; 
 margin:auto; 
 border:2px solid #000; 
 overflow:hidden;
}
input{ display:none;}

.img_s{ position:absolute; 
 width:100%; 
 height:100%; 
 z-index:-1; 
 font-size:25px;
 text-align:center;
}

.im1, .im2, .im3{ position:relative; width:400px; 
 height:225px;
}

.pre, .nxt{ position:absolute;
 width:12%;
 height:100%;
 top:0;
 background:rgba(88,88,88,.4);
 z-index:99;
 cursor:pointer;
 font-size:30px;
}
p{ position:relative; top:50px;
}
.pre{ left:0; 
}
.nxt{ right:0; 
}
.cr{ width:100%;
 height:11px;
 bottom:12px;
 position:absolute;
 text-align:center;
 z-index:99;
}
.dts{ position: relative; 
 display: inline-block;
 background:rgba(0,0,0,.4);
}
	
#t1:checked ~ #one,
#t2:checked ~ #two,
#t3:checked ~ #three{
	z-index:99; transition:all 0.5s;
}
<div class="ct">
<input type="radio" name="tabs" id="t1" checked/>
<input type="radio" name="tabs" id="t2"/>
<input type="radio" name="tabs" id="t3"/>

<div class="img_s" id="one">
   <div class="im1" style="background-color: #FFF;">01-IMG</div>
   <label for="t3" class="pre"><p>&#10094;</p></label>
   <label for="t2" class="nxt"><p>&#10095;</p></label>
</div>

<div class="img_s" id="two">
   <div class="im2" style="background-color:#0C3;">02-IMG</div>
   <label for="t1" class="pre"><p>&#10094;</p></label>
   <label for="t3" class="nxt"><p>&#10095;</p></label>
</div>

<div class="img_s" id="three">
   <div class="im3" style="background-color:#F63;">03-IMG</div>
   <label for="t2" class="pre"><p>&#10094;</p></label>
   <label for="t1" class="nxt"><p>&#10095;</p></label>
</div>



</div>

I have a small slide, which works with radios and transition in JS. The code in the whole works normal, but I intend to increment in javascript that by leaning the mouse on top inside the slide box the JS transition of the pause radios giving the user the chance to click on the side arrows and select the images and when removing the mouse from inside the box the transition continues normally, would it be possible to increment with this simple code in javascript these functions ?? I tried here and I did not succeed,?

    
asked by anonymous 02.06.2018 / 04:03

2 answers

1

I separated the variable i and the move function from within the start function, added value to the radios to make it easier to identify where the current slider is. Stores the setInterval identifier, required to stop the setInterval. I added an id in the div of the slider just to make it easier to assign the events, mouseenter to stop the automatic slider and mouseleave to restart the automatic slider. 

onload  = start;
var intervalId;
var i = 1;
function Move(){ 	
 	 i = parseInt(document.querySelector('input[name="tabs"]:checked').value, 10) + 1;
   if(i > document.getElementsByName('tabs').length) {
    i = 1;
   }
	 document.getElementById('t'+i).checked = true;
}
function start(){	 
 intervalId = setInterval(Move,3000); //change img in 3 sec
}
function stop(){
  clearInterval(intervalId);
}
var slider = document.getElementById('slider');
slider.addEventListener('mouseenter', stop);
slider.addEventListener('mouseleave', start);
body{ background-color:#0066FF;}

.ct{ 
 position:relative; 
 width:400px; 
 height:220px; 
 margin:auto; 
 border:2px solid #000; 
 overflow:hidden;
}
input{ display:none;}

.img_s{ position:absolute; 
 width:100%; 
 height:100%; 
 z-index:-1; 
 font-size:25px;
 text-align:center;
}

.im1, .im2, .im3{ position:relative; width:400px; 
 height:225px;
}

.pre, .nxt{ position:absolute;
 width:12%;
 height:100%;
 top:0;
 background:rgba(88,88,88,.4);
 z-index:99;
 cursor:pointer;
 font-size:30px;
}
p{ position:relative; top:50px;
}
.pre{ left:0; 
}
.nxt{ right:0; 
}
.cr{ width:100%;
 height:11px;
 bottom:12px;
 position:absolute;
 text-align:center;
 z-index:99;
}
.dts{ position: relative; 
 display: inline-block;
 background:rgba(0,0,0,.4);
}
	
#t1:checked ~ #one,
#t2:checked ~ #two,
#t3:checked ~ #three{
	z-index:99; transition:all 0.5s;
}
<div class="ct" id="slider">
<input type="radio" name="tabs" id="t1" value="1" checked/>
<input type="radio" name="tabs" id="t2" value="2"/>
<input type="radio" name="tabs" id="t3" value="3"/>

<div class="img_s" id="one">
   <div class="im1" style="background-color: #FFF;">01-IMG</div>
   <label for="t3" class="pre"><p>&#10094;</p></label>
   <label for="t2" class="nxt"><p>&#10095;</p></label>
</div>

<div class="img_s" id="two">
   <div class="im2" style="background-color:#0C3;">02-IMG</div>
   <label for="t1" class="pre"><p>&#10094;</p></label>
   <label for="t3" class="nxt"><p>&#10095;</p></label>
</div>

<div class="img_s" id="three">
   <div class="im3" style="background-color:#F63;">03-IMG</div>
   <label for="t2" class="pre"><p>&#10094;</p></label>
   <label for="t1" class="nxt"><p>&#10095;</p></label>
</div>



</div>
    
02.06.2018 / 05:17
2

Instead of using class="ct" it would be more interesting to use id="ct" if the element is unique. This makes it easier to select it: 

#ct{ 
 position:relative; 
 width:400px; 
 height:220px; 
 margin:auto; 
 border:2px solid #000; 
 overflow:hidden;
}

Next, you can create events to stop the transition when the mouse is over div , even need to stop the transition in the click on the arrows because clicking the mouseleave event is called, making the transition still with the mouse over the slider.

You also have to assign the setInterval to a variable to be able to control it: 

timer = setInterval(Move,3000);

Well optimized code would look like this without too many bugs: 

var timer;
var slider = document.querySelector("#ct");
var i = 1;

slider.onmouseover = slider.onclick = function(e){
   if(e.type == "click" && e.target.tagName == "INPUT"){
      i = e.target.id.match(/\d+/)[0];
   }
   clearInterval(timer);
}

window.onload = slider.onmouseleave = function(){
   timer = setInterval(Move,3000); //change img in 3 sec
}

function Move(){ 	
   i = (i%3)+1; // 4 is the Number of image in slider
   document.getElementById('t'+i).checked = true;
}
body{ background-color:#0066FF;}

#ct{ 
 position:relative; 
 width:400px; 
 height:220px; 
 margin:auto; 
 border:2px solid #000; 
 overflow:hidden;
}
input{ display:none;}

.img_s{ position:absolute; 
 width:100%; 
 height:100%; 
 z-index:-1; 
 font-size:25px;
 text-align:center;
}

.im1, .im2, .im3{ position:relative; width:400px; 
 height:225px;
}

.pre, .nxt{ position:absolute;
 width:12%;
 height:100%;
 top:0;
 background:rgba(88,88,88,.4);
 z-index:99;
 cursor:pointer;
 font-size:30px;
}
p{ position:relative; top:50px;
}
.pre{ left:0; 
}
.nxt{ right:0; 
}
.cr{ width:100%;
 height:11px;
 bottom:12px;
 position:absolute;
 text-align:center;
 z-index:99;
}
.dts{ position: relative; 
 display: inline-block;
 background:rgba(0,0,0,.4);
}
	
#t1:checked ~ #one,
#t2:checked ~ #two,
#t3:checked ~ #three{
	z-index:99; transition:all 0.5s;
}
Clique nas imagens:
<br>
<div id="ct">
   <input type="radio" name="tabs" id="t1" checked/>
   <input type="radio" name="tabs" id="t2"/>
   <input type="radio" name="tabs" id="t3"/>

   <div class="img_s" id="one">
      <div class="im1" style="background-color: #FFF;">01-IMG</div>
      <label for="t3" class="pre"><p>&#10094;</p></label>
      <label for="t2" class="nxt"><p>&#10095;</p></label>
   </div>

   <div class="img_s" id="two">
      <div class="im2" style="background-color:#0C3;">02-IMG</div>
      <label for="t1" class="pre"><p>&#10094;</p></label>
      <label for="t3" class="nxt"><p>&#10095;</p></label>
   </div>

   <div class="img_s" id="three">
      <div class="im3" style="background-color:#F63;">03-IMG</div>
      <label for="t2" class="pre"><p>&#10094;</p></label>
      <label for="t1" class="nxt"><p>&#10095;</p></label>
   </div>
</div>
    
02.06.2018 / 06:07
How do you "remember" an action on a site? How to manipulate a span element using pure JS