JavaScript to achieve simple image switching

JavaScript to achieve simple image switching

This article shares the specific code for JavaScript to achieve simple image switching for your reference. The specific content is as follows

Here are several ways to switch pictures:

Method 1 (for beginners! Easy to understand) The code is attached below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Switch 2</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        //Beginner's writing method // 1. Get the event source var item1 = document.getElementById("item1");
        var item2 = document.getElementById("item2");
        var item3 = document.getElementById("item3");
        var item4 = document.getElementById("item4");
        var item5 = document.getElementById("item5");
        var oBos = document.getElementById("box");

        // 2. Add event item1.onmouseover = function (){
         //When the mouse hovers over the relevant id, the image pointing path changes oBos.style.background = "url('img/big_pic01.jpg') no-repeat";
        }
        item2.onmouseover = function (){
            oBos.style.background = "url('img/big_pic02.jpg') no-repeat";
        }
        item3.onmouseover = function (){
            oBos.style.background = "url('img/big_pic03.jpg') no-repeat";
        }
        item4.onmouseover = function (){
            oBos.style.background = "url('img/big_pic04.jpg') no-repeat";
        }
        item5.onmouseover = function (){
            oBos.style.background = "url('img/big_pic05.jpg') no-repeat";
        }

    </script>
</body>
</html>

The JS code above may be cumbersome and may easily cause code redundancy.

Then let's make some modifications and look at method 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Switch 2</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li id="item2">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li id="item3">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li id="item4">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li id="item5">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">

        // 1. Get the event source. This saves a lot of var definition process. function $(id){
            return typeof id === "string"?document.getElementById(id):null;
        }
        // Change the background image liId is the id pointed to and imgSrc is the parameter to pass the background image in function changebgcImg(liId,imgSrc){
            // 2. Add event $(liId).onmouseover = function (){
                // 3. Change the background image $("box").style.background = imgSrc;
            }
        }
        changebgcImg("item1",'url("img/big_pic01.jpg") no-repeat');
        changebgcImg("item2",'url("img/big_pic02.jpg") no-repeat');
        changebgcImg("item3",'url("img/big_pic03.jpg") no-repeat');
        changebgcImg("item4",'url("img/big_pic04.jpg") no-repeat');
        changebgcImg("item5",'url("img/big_pic05.jpg") no-repeat');

    </script>
</body>
</html>

As you can see, method 2 uses less JS code than method 1.

Following the above modifications, we can look at method three:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image switch full version</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 450px;
            background: url("img/big_pic01.jpg") no-repeat;
        }
        #box ul li{
            float: left;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="item">
                <img src="img/pic01.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic02.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic03.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic04.webp">
            </li>
        </ul>
        <ul>
            <li class="item">
                <img src="img/pic05.webp">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1. Get the event source function $(id){
            return typeof id === 'string'? document.getElementById(id):null;
        }
        // Get all the li tags named item below var items = document.getElementsByClassName("item");
        // console.log(items);
        for (var i=0;i<items.length;i++){
            var item = items[i];
            item.index = i+1;
            items[i].onmouseover = function (){
                $("box").style.background = `url("img/big_pic0${this.index}.jpg") no-repeat`
                // You cannot directly set ${i} but need to redefine the variable item because the i called in the function is a global variable, and i will always point to 5 after the for loop
                // $("box").style.background = `url("img/big_pic0${i}.jpg") no-repeat`
            }
        }
    </script>
</body>
</html>

All three methods can achieve the image switching effect (the first method is not recommended if there are many images and the number of images to be displayed is not the same). The image switching effects are as follows:

I also have a blog post that also implements image switching effects. The methods used are slightly different from these three. You can refer to it, so I won’t merge them for now: JavaScript to implement Taobao product image switching effects

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • The simplest js picture switching effect implementation code
  • A simple image switching effect implemented with html+css+js
  • Pure js to achieve background image switching effect code
  • Simple js code to switch pictures by clicking arrows
  • CSS picture switching effect code [without js]
  • Pure js without flash imitating Sohu Women's Channel FLASH picture switching effect code
  • JavaScript to achieve the slide effect source code of picture switching
  • JavaScript to achieve image switching effect
  • js mouse click picture switching effect code sharing
  • JS realizes the picture switching effect

<<:  Continuous delivery using Jenkins and Docker under Docker

>>:  MySQL 5.7.21 installation and configuration tutorial

Recommend

jQuery plugin to implement minesweeper game (3)

This article shares the third article on how to u...

Solve the problem that Docker pulls MySQL image too slowly

After half an hour of trying to pull the MySQL im...

Use Docker to build a Git image using the clone repository

Overview I have been using Docker for more than a...

Javascript tree menu (11 items)

1. dhtmlxTree dHTMLxTree is a feature-rich Tree M...

Installation and use tutorial of Elasticsearch tool cerebro

Cerebro is an evolution of the Elasticsearch Kopf...

MySQL master-slave configuration study notes

● I was planning to buy some cloud data to provid...

Detailed explanation of JavaScript prototype chain

Table of contents 1. Constructors and instances 2...

Perfect solution for theme switching based on Css Variable (recommended)

When receiving this requirement, Baidu found many...

Detailed explanation of Nginx configuration required for front-end

Nginx (engine x) is a lightweight, high-performan...

Why Nginx is better than Apache

Nginx has taken over the majority of the Web serv...

Pure js to achieve the effect of carousel

This article shares the specific code of js to ac...

Example code for implementing stacked carousel effect with HTML+CSS+JS

Effect: When the slideshow moves in one direction...