JS图片轮播

JS图片轮播

2021 年 09 月 01 日

1177 次浏览

3775字数

<p><img src="https://www.xxhzm.cn/usr/uploads/2021/08/1847730818.png" alt="老婆们" title="老婆们"style=""></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
        }
        
        #cont {
            width: 600px;
            height: 300px;
            background: royalblue;
            position: relative;
            left: 50%;
            transform: translate(-50%);
            overflow: hidden;
        }
        
        #cont ul {
            width: 600px;
            height: 200px;
            margin-top: 50px;
            position: absolute;
        }
        
        #cont ul li {
            width: 150px;
            height: 150px;
            float: left;
            list-style: none;
        }
        
        img {
            width: 150px;
            height: 150px;
        }
        
        .a {
            width: 100px;
            height: 30px;
            position: relative;
            left: 50%;
            transform: translate(-50%);
        }
    &lt;/style&gt;
    &lt;script&gt;
        window.onload = function() {
            let cont = document.getElementById('cont');
            let ul = document.getElementsByTagName('ul')[0];
            let li = document.getElementsByTagName('li');
            ul.innerHTML += ul.innerHTML;
            ul.style.width = li[0].offsetWidth * li.length + 'px';

let LEFT = document.getElementById('left');
            let RIGHT = document.getElementById('right');
            let OFF = document.getElementById('off');
            let timeL = null
            let timeR = null

function Right() {
                if (ul.offsetLeft == 0) {
                    ul.style.left = -li[0].offsetWidth * li.length / 2 + 'px'
                } else {
                    ul.style.left = ul.offsetLeft + 15 + 'px'
                }
            }

LEFT.onclick = function() {
                clearInterval(timeR, timeL)
                timeL = setInterval(() =&gt; {
                    Left()
                }, 100);
            }

RIGHT.onclick = function() {
                clearInterval(timeL, timeR)
                timeR = setInterval(() =&gt; {
                    Right()
                }, 100);
            }
            OFF.onclick = function() {
                clearInterval(timeR)
                clearInterval(timeL)
            }
        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id=&quot;cont&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;img src=&quot;1.jpg&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src=&quot;2.jpg&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src=&quot;3.jpg&quot;&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src=&quot;4.jpg&quot;&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class=&quot;a&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;右&quot; id=&quot;left&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;暂停&quot; id=&quot;off&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;左&quot; id=&quot;right&quot;&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

</code></pre>