简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  JavaScript native image switching effect with thumbnails

JavaScript native image switching effect with thumbnails

青灯夜游
青灯夜游forward
2018-10-10 14:52:552397browse

This article will introduce to you the JavaScript native image switching effect with thumbnails. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The left side is the banner image, and the right side is the thumbnail image. When the mouse slides into the thumbnail image, the image will also be switched.

1. This section is html code, which can be copied directly. You need to prepare banner images of the same size. In the example, the images are all 500x300 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片轮播</title>
    <script src="./js.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            word-break: break-all;
        }
        body {
            background: #FFF;
            color: #333;
            font: 12px/1.6em Helvetica, Arial, sans-serif;
        }
        a {
            color: #0287CA;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        ul,li {
            list-style: none;
        }

        fieldset,
        img {
            border: none;
        }
        legend {
            display: none;
        }

        em,strong,cite,th {
            font-style: normal;
            font-weight: normal;
        }
        input,textarea,select,button {
            font: 12px Helvetica, Arial, sans-serif;
        }

        table {
            border-collapse: collapse;
        }

        html {
            overflow: -moz-scrollbars-vertical;
        }

        #ifocus {
            width: 620px;
            height: 320px;
            margin: 20px;
            border: 1px solid #DEDEDE;
            background: #F8F8F8;
        }

        #ifocus_pic {
            display: inline;
            position: relative;
            float: left;
            width: 500px;
            height: 300px;
            overflow: hidden;
            margin: 10px 0 0 10px;
        }
        #ifocus_piclist {
            position: absolute;
        }
        #ifocus_piclist li {
            width: 500px;
            height: 300px;
            overflow: hidden;
        }
        #ifocus_piclist img {
            width: 500px;
            height: 300px;
        }
        #ifocus_btn {
            display: inline;
            float: right;
            width: 94px;
            margin: 9px 9px 0 0;
        }
        #ifocus_btn li {
            width: 94px;
            height: 57px;
            cursor: pointer;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
        }
        #ifocus_btn img {
            width: 80px;
            height: 50px;
            margin: 7px 0 0 11px;
        }

        #ifocus_btn .current {
            /* background: url(i/ifocus_btn_bg.gif) no-repeat; */
            opacity: 1;
            -moz-opacity: 1;
            filter: alpha(opacity=100);
        }
    </style></head><body>
    <p id="ifocus">
        <p id="ifocus_pic">
            <p id="ifocus_piclist" style="left:0; top:0;">
                <ul>
                    <li><a href="#"><img src="./images/1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="./images/2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="./images/3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="./images/4.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="./images/5.jpg" alt="" /></a></li>
                </ul>
            </p>
        </p>
        <p id="ifocus_btn">
            <ul>
                <li class="current"><img src="./images/1.jpg" alt="" /></li>
                <li><img src="./images/2.jpg" alt="" /></li>
                <li><img src="./images/3.jpg" alt="" /></li>
                <li><img src="./images/4.jpg" alt="" /></li>
                <li><img src="./images/5.jpg" alt="" /></li>
            </ul>
        </p>
    </p></body></html>

2 , This section is js code, which uses several classic js codes. In js, you need to modify the corresponding id name, the size of the image movement, etc. 

function $(id) {    return document.getElementById(id);
}function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}function moveElement(elementID, final_x, final_y, interval) {    if (!document.getElementById) return false;    if (!document.getElementById(elementID)) return false;    var elem = document.getElementById(elementID);    if (elem.movement) {
        clearTimeout(elem.movement);
    }    if (!elem.style.left) {
        elem.style.left = "0px";
    }    if (!elem.style.top) {
        elem.style.top = "0px";
    }    var xpos = parseInt(elem.style.left);    var ypos = parseInt(elem.style.top);    if (xpos == final_x && ypos == final_y) {        return true;
    }    if (xpos < final_x) {        var dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }    if (xpos > final_x) {        var dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }    if (ypos < final_y) {        var dist = Math.ceil((final_y - ypos) / 10);
        ypos = ypos + dist;
    }    if (ypos > final_y) {        var dist = Math.ceil((ypos - final_y) / 10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";    var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
    elem.movement = setTimeout(repeat, interval);
}function classNormal(iFocusBtnID) {    var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');    for (var i = 0; i < iFocusBtns.length; i++) {
        iFocusBtns[i].className = &#39;normal&#39;;
    }
}function classCurrent(iFocusBtnID, n) {    var iFocusBtns = $(iFocusBtnID).getElementsByTagName(&#39;li&#39;);
    iFocusBtns[n].className = &#39;current&#39;;
}function iFocusChange() {    if (!$(&#39;ifocus&#39;)) return false;
    $(&#39;ifocus&#39;).onmouseover = function () {
        atuokey = true
    };
    $(&#39;ifocus&#39;).onmouseout = function () {
        atuokey = false
    };    var iFocusBtns = $(&#39;ifocus_btn&#39;).getElementsByTagName(&#39;li&#39;);    var listLength = iFocusBtns.length;
    iFocusBtns[0].onmouseover = function () {
        moveElement(&#39;ifocus_piclist&#39;, 0, 0, 5);
        classNormal(&#39;ifocus_btn&#39;);
        classCurrent(&#39;ifocus_btn&#39;, 0);
    }    if (listLength >= 2) {
        iFocusBtns[1].onmouseover = function () {
            moveElement('ifocus_piclist', 0, -300, 5);
            classNormal('ifocus_btn');
            classCurrent('ifocus_btn', 1);
        }
    }    if (listLength >= 3) {
        iFocusBtns[2].onmouseover = function () {
            moveElement('ifocus_piclist', 0, -600, 5);
            classNormal('ifocus_btn');
            classCurrent('ifocus_btn', 2);
        }
    }    if (listLength >= 4) {
        iFocusBtns[3].onmouseover = function () {
            moveElement('ifocus_piclist', 0, -900, 5);
            classNormal('ifocus_btn');
            classCurrent('ifocus_btn', 3);
        }
    }    if (listLength >= 5) {
        iFocusBtns[4].onmouseover = function () {
            moveElement('ifocus_piclist', 0, -1200, 5);
            classNormal('ifocus_btn');
            classCurrent('ifocus_btn', 4);
        }
    }
}
setInterval('autoiFocus()', 3000);var atuokey = false;function autoiFocus() {    if (!$('ifocus')) return false;    if (atuokey) return false;    var focusBtnList = $('ifocus_btn').getElementsByTagName('li');    var listLength = focusBtnList.length;    for (var i = 0; i < listLength; i++) {        if (focusBtnList[i].className == 'current') var currentNum = i;
    }    if (currentNum == 0 && listLength != 1) {
        moveElement('ifocus_piclist', 0, -300, 5);
        classNormal('ifocus_btn');
        classCurrent('ifocus_btn', 1);
    }    if (currentNum == 1 && listLength != 2) {
        moveElement('ifocus_piclist', 0, -600, 5);
        classNormal('ifocus_btn');
        classCurrent('ifocus_btn',2);
    }    if (currentNum == 2 && listLength != 3) {
        moveElement('ifocus_piclist', 0, -900, 5);
        classNormal('ifocus_btn');
        classCurrent('ifocus_btn',3);
    }    if (currentNum == 3) {
        moveElement('ifocus_piclist', 0, -1200, 5);
        classNormal('ifocus_btn');
        classCurrent('ifocus_btn', 4);
    }    if (currentNum == 4) {
        moveElement('ifocus_piclist', 0, 0, 5);
        classNormal('ifocus_btn');
        classCurrent('ifocus_btn',0);
    }
   
}
addLoadEvent(iFocusChange);

The effect is as shown below

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial!

Related recommendations:

php public welfare training video tutorial

JavaScript graphic tutorial

JavaScriptOnline Manual

The above is the detailed content of JavaScript native image switching effect with thumbnails. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript html JS
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：In-depth understanding of JS code annotation methods and code annotation specificationsNext article：In-depth understanding of JS code annotation methods and code annotation specifications

Related articles

See more