Slides, transitioning images with JS and radio, while leaning the mouse over the image pause the transition, while removing continue the transition

Asked

Viewed 75 times

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 as a whole works normally, only that I intend to increment in javascript that by touching the mouse on top inside the slide box the JS transition of the radios pause giving the chance of the user to click the side arrows and select the images and while removing the mouse from inside the box the transition continues normally, Would it be possible to increase these functions with this simple code in javascript?? I tried here and did not succeed, ?

javascript html css radiobutton

  • Save the value returned by the function setInterval, in a variable. After this just use the methods mouseenter and mouseleave to detect when the mouse is, or is not, on the slider. Done this just use clearInterval or use this example as base https://stackoverflow.com/a/21278007/9101590

  • I tried to make with keyframes instead of using this JS, but it didn’t work, however I’m still pretty layabout in JS

  • There are commands that I do not know in JS and makes it difficult enough, probably I will not hit kkkk, but thanks for the information

2 answers

2

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

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

Then you can create events to stop the transition when the mouse is over the div, even need to stop the transition by clicking the arrows because by clicking the event mouseleave is called, making the transition continues even being with the mouse on the slider.

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

timer = setInterval(Move,3000);

The code well optimized would be this way, without many arrodeios:

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>

  • In that of the other user above I was in doubt, about the amount of checking that it changed, but you left the number of checks, I do not know if his is the number of checks even or if it is infinite, but yours became well fluid and well more indicated

  • I tweaked the code, there were some bugs still

  • In the other answer, if you click on the arrow and leave the mouse standing, the slide will continue. It’s because he didn’t handle the click I quoted in my reply: "even need to stop the transition by clicking on the arrows because clicking the mouseleave event is called"

  • I tested and - apparently - is okay. I clicked on both arrows and waited a few seconds (without moving the mouse), but the image has not changed. In fact, both codes work the same way; both change the image after clicking on the arrow (as long as you remove the mouse of the area of slider).

  • @Valdeirpsr Truth! By clicking the arrow and keeping the mouse on the element the slide is paused.

  • I was finding it strange, because the other one worked the same way and the transition made the function of pausing and continuing, only they change each other is the number of checks one possesses and the other does not need, which becomes optional, both solved

Show 1 more comment

1


I separated the variable i and the function moves from within the start function, added value to the radios to facilitate the identification of where the current slider is. Stores the setInterval identifier needed to stop setInterval. I added an id in the slider div just to facilitate the assignment of 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>

  • It was great! but in case I want to add more images, I need to change the . value, 10) + 1; ?

  • in the case there goes up to ten? I am correct?

  • if you pass 10 radios I just increment more values, correct?

  • @Elienayjunior O 10 is only a base (indicates that the values returned by parseInt must be decimal). Ps.: The value 10 is optional. If you want to add more images, there is no need to modify the Javascript.

Browser other questions tagged javascript html css radiobutton

You are not signed in. Login or sign up in order to post.