Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

Automatic Image Change Like Daraz Home Page Layout Or Any Educational Website🖼️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • HTML DOM (like querySelector,querySelectorAll etc)
  • setTimeOut method in JS
  • You need to know CSS (display, box-shadow, opacity etc) for some design purpose

After being 2 second each image will be changed.

Hello
img_snow_wide
img_mountains_wide
img_lights_wide
img_nature_wide
img_5terre_wide
img_woods_wide

HTML


<div class="showcontent">

<h3>After being 2 second each image will be changed.</h3>

<div class="imgrow">

<div class="slideshow">

    <div class="imgdisplay">

        <img src="All images\img_lights_wide.jpg" alt="">

    </div>

    <div class="caption">Hello</div>

</div>


<div class="gallery">

    <div><img src="All images\img_snow_wide.jpg" alt="img_snow_wide"></div>

    <div><img src="All images\img_mountains_wide.jpg" alt="img_mountains_wide"></div>

    <div><img src="All images\img_lights_wide.jpg" alt="img_lights_wide"></div>

    <div><img src="All images\img_nature_wide.jpg" alt="img_nature_wide"></div>

    <div><img src="All images\img_5terre_wide.jpg" alt="img_5terre_wide"></div>

    <div><img src="All images\img_woods_wide.jpg" alt="img_woods_wide"></div>

</div>



</div>

JavaScript


let index=0;
let images=document.querySelectorAll(".gallery div img");

let showed=document.querySelector(".slideshow .imgdisplay img");


let captn=document.querySelector(".slideshow .caption");
//console.log(captn.innerHTML);
// console.log(showed.src);
myfun();

function myfun(){ 
    if(index>=images.length){
        index=0;
    }
    index+=1;
    for(let i=0;i< images.length;i++){
        images[i].className=images[i].className.replace("Inopacity","");
    }
    images[index-1].className+="Inopacity";
    //console.log(images[index-1]);

    showed.src=images[index-1].src;
    captn.innerHTML=images[index-1].alt;

    setTimeout(myfun,2000);
    
}

CSS


.imgrow{
    width: 98%;
    margin: auto;
    
}
.slideshow{
    box-shadow: 2px 2px 3px 1px #333;
}

.imgdisplay img{
    width: 100%;
    margin: auto;
}
.caption{
    background-color: #333;
    padding: 15px;
    color: white;
    text-align: center;
    margin-top: -5px;
    font-size: 20px;
}
.gallery{
    width:100%; 
    display: flex;
    padding-top: 3px;
    box-shadow: 2px 2px 3px 1px #333;
    
}
.gallery img{
    opacity: 0.5;
    width: 16.66%;
}
.gallery div img{
    width: 100%;
}
.gallery .Inopacity {
    opacity: 1;
}

HTML DOM

  • querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
  • You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

  • The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
    const char = str.charAt(7)

setTimeOut method()

  • setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
    clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

  • requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
    Example requestAnimationFrame(function_name);