suchen

Heim  >  Artikel  >  Web-Frontend  >  JS-Bild-Diashow-Umschalteffekt wechseln

JS-Bild-Diashow-Umschalteffekt wechseln

韦小宝
韦小宝Original
2017-12-04 10:03:312656Durchsuche

In diesem Artikel wird ausführlich erklärt, dass js den Diashow-Effekt beim Wechseln von Bildern ausführt und jede Zeile des js-Codes erklärt wird! Für Studierende, die mit js nicht vertraut sind, gibt es einen Vorteil: Sie können mehr lesen!

Code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JS切换图片幻灯切换效果</title>
    <style>
        body, p, ul, li { margin: 0; padding: 0; }
        ul { list-style-type: none; }
        body { background: #000; text-align: center; font: 12px/20px Arial; }
        #box { position: relative; width: 322px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; }
        #box .list { position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid #ccc; }
        #box .list li { position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha(opacity=0); }
        #box .list li.current { opacity: 1; filter: alpha(opacity=100); }
        #box .count { position: absolute; right: 0; bottom: 5px; }
        #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; filter: alpha(opacity=70); border-radius: 20px; }
        #box .count li.current { color: #fff; opacity: 1; filter: alpha(opacity=100); font-weight: 700; background: #f60; }
        #tmp { width: 100px; height: 100px; background: red; position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oBox = document.getElementById("box");            var aUl = document.getElementsByTagName("ul");            var aImg = aUl[0].getElementsByTagName("li");            var aNum = aUl[1].getElementsByTagName("li");            var timer = play = null;            var i = index = 0;            var bOrder = true;            //切换按钮
            for(i = 0; i < aNum.length; i++) {
                aNum[i].index = i;
                aNum[i].onmouseover = function() {
                    show(this.index)
                }
            }            //鼠标划过关闭定时器
            oBox.onmouseover = function() {
                clearInterval(play)
            };            //鼠标离开启动自动播放
            oBox.onmouseout = function() {
                autoPlay()
            };            //自动播放函数
            function autoPlay() {
                play = setInterval(function() {
                    //判断播放顺序
                    bOrder ? index++ : index--;                    //正序
                    index >= aImg.length && (index = aImg.length - 2, bOrder = false);                    //倒序
                    index <= 0 && (index = 0, bOrder = true);                    //调用函数
                    show(index)
                }, 2000);
            }

            autoPlay();//应用
            function show(a) {
                index = a;                var alpha = 0;                for(i = 0; i < aNum.length; i++)aNum[i].className = "";
                aNum[index].className = "current";
                clearInterval(timer);                for(i = 0; i < aImg.length; i++) {
                    aImg[i].style.opacity = 0;
                    aImg[i].style.filter = "alpha(opacity=0)";
                }
                timer = setInterval(function() {
                    alpha += 2;
                    alpha > 100 && (alpha = 100);
                    aImg[index].style.opacity = alpha / 100;
                    aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                    alpha == 100 && clearInterval(timer)
                }, 20);
            }
        };    </script></head><body><p id="box">
    <ul class="list">
        <li class="current"><img src="img/3.jpg" width="320" height="240"/></li>
        <li><img src="img/1.jpg" width="320" height="240"/></li>
        <li><img src="img/2.jpg" width="320" height="240"/></li>
        <li><img src="img/3.jpg" width="320" height="240"/></li>
        <li><img src="img/4.jpg" width="320" height="240"/></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul></p></body></html>

Das Obige ist der gesamte Inhalt des JS-Umschalteffekts für Bild-Diashows. Ich hoffe, dass er für die Schüler hilfreich sein wird!

Verwandte Empfehlungen:

JS-Diashow kann mit Scroll-Navigation (selbst geschrieben)_javascript reibungslos wiederholt und gedreht werden Tipps

Detaillierte Einführung in das Stücklistenobjektmodell der Js-Operation

So legen Sie zufällig wechselnde Hintergrundbilder in js fest

Das obige ist der detaillierte Inhalt vonJS-Bild-Diashow-Umschalteffekt wechseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung und Definition der Methode „clearInterval()“ in JavaScriptNächster Artikel：Detaillierte Erläuterung der Verwendung und Definition der Methode „clearInterval()“ in JavaScript

In Verbindung stehende Artikel

Mehr sehen