Learn How To Code in Java !!!!!!

Introduction

These our best friends to help us make our website awesome! Let's take a look at some of great thing that we can do using them.

Here is my 3 examples of how you can use them toghether and make nice things!

logo

Tutorial #1 --> Automatic slide-show on Mouseover

Move your mouse around the picture and pay attention to slide show numbers...

landscape
1 / 6
landscape
2 / 6
landscape
3 / 6
landscape
4 / 6
landscape
5 / 6
landscape
6 / 6

#1 HTML is just adding img(s) with their numbers to keep track of the direction of slide show.



#2 on CSS we need to hidden the over flow to just show one picture at a time...

Also an animation to fade the picture and show the next one.

 
		/* Slideshow container */
		.slideshow-container {
		  max-width: 1000px;
		  position: relative;
		  margin-left: 25%;
		  margin-top: 5%;
		  overflow: hidden;
		  height: 397px;
		  width: 500px;
		}
		.slide {
			width: 500px;
			height: 397px;
			position: absolute;
			left: 0;
			right: 0;
			background-color: white;
		}
		.slide-number{
			margin-left: 240px;
		}
		/* Fading animation */
		.fade {
		  -webkit-animation-name: fade;
		  -webkit-animation-duration: 1.5s;
		  animation-name: fade;
		  animation-duration: 1.5s;
		}
		@-webkit-keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		}
		@keyframes fade {
		  from {opacity: .4} 
		  to {opacity: 1}
		}

#3 Finally the most important one which make the pictures slide to right or left based on the position of the mouse.



		const $slidesContainer = $('#slideshow');
		const $slides = $slidesContainer.children('div');
		const imgWidth = $slides.first().width();
		const slideDuration = 2000;
		let isSlideAnimating = false;
		let timer;

		$slides.each(function(i){
		  const leftPos = i * imgWidth;
		  $(this).css('left', leftPos);
		  
		});

		$slides.last()
		       .prependTo($slidesContainer)
		       .css('left', -(imgWidth));

		$slidesContainer.on('mouseleave', pauseSlides);

		function pauseSlides(){
		  clearInterval(timer);
		}

		function startSlides(){
		  timer = setInterval(nextSlide, slideDuration);
		}

		function startSlidesPrev(){
		  timer = setInterval(prevSlide, slideDuration);
		}

		function startSlidesNext(){
		  timer = setInterval(nextSlide, slideDuration);
		}

		function prevSlide(e){    		  
		  if(isSlideAnimating){
		    return;
		  }
		  if(e){
		    pauseSlides();
		  }
		  
		  isSlideAnimating = true;
		  
		  $slidesContainer.children()
		                  .last()
		                  .css('left', -(imgWidth * 2))
		                  .prependTo($slidesContainer);
  
		   $slides.animate({'left': '+=' + imgWidth }, 300)
		          .promise()
		          .done( () => slideAnimationComplete(e, 'prev') );                     
		}

		function nextSlide(e){    
		  
		  if(isSlideAnimating){
		    return;
		  }
		  
		  if(e){
		    pauseSlides(e);
		  } 
		  
		  isSlideAnimating = true;
		  
		  $slidesContainer.children()
		                  .first()
		                  .css('left', imgWidth * ($slides.length - 1) )
		                  .appendTo($slidesContainer);
		 
		  
		  $slides.animate({'left': '-=' + imgWidth }, 300)
		         .promise()
		         .done( () => slideAnimationComplete(e, 'next') );  

		} 

		function slideAnimationComplete(evt, prevNext){
		  isSlideAnimating = false;
		  if(evt){
		    if(prevNext === 'prev'){
		      startSlidesPrev();
		    }else{
		      startSlidesNext();
		    }
		  } 
		} 

		var divPos = {};
		var offset = $slidesContainer.offset();
		var scWidth = $slidesContainer.width();
		var scHeight = $slidesContainer.height();
		var inLeftSide = false;
		var inRightSide = false;
		var leftSideCounter = 0;
		var rightSideCounter = 0;

		$slidesContainer.mousemove(function(e){
		    divPos = {
		        left: e.pageX - offset.left,
		        top: e.pageY - offset.top
		    };
		    if(divPos.left > 0 && divPos.left <(scWidth / 2)){
		      if(rightSideCounter > 0){
		        leftSideCounter = 0;
		        rightSideCounter = 0;
		      }
		      if(leftSideCounter === 0){
		        clearInterval(timer);
		        leftSideCounter++;
		        startSlidesPrev();
		      }
		    }else {
		      if(rightSideCounter === 0){
		        clearInterval(timer);
		        rightSideCounter++;
		        startSlidesNext();
		      }
		    }
		});
		$slidesContainer.mouseenter(function(e){
		  if(divPos.left > 0 && divPos.left ((scWidth/2)){
		    inLeftSide = true;
		  }else {
		    inRightSide = true;
		  }
		});
		$slidesContainer.mouseleave(function(e){
		  inLeftSide = false;
		  inRightSide = false;
		  leftSideCounter = 0;
		  rightSideCounter = 0;
		});