Effet de changement d'image natif JavaScript avec vignettes-js tutoriel-php.cn

Effet de changement d'image natif JavaScript avec vignettes

青灯夜游

Libérer： 2018-10-10 14:52:55

avant

2441 Les gens l'ont consulté

Cet article vous présentera l'effet de changement d'image natif JavaScript avec des vignettes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le côté gauche est l'image de la bannière et le côté droit est l'image miniature. Lorsque la souris glisse dans l'image miniature, l'image change également.

1. Il s'agit d'un code html, qui peut être copié directement. Vous devez préparer vous-même des images de bannière de même taille. Dans l'exemple, les images sont toutes en 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>

Copier après la connexion

2. Cette section est du code js, qui utilise plusieurs codes js classiques. En js, vous devez modifier le nom de l'identifiant correspondant, la taille du mouvement de l'image, 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);

Copier après la connexion

L'effet est comme indiqué ci-dessous

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!