js夯实基础之：轮播

来源：互联网发布：文学系知乎编辑：程序博客网时间：2024/06/06 09:32

我一直觉得仅仅将js应用于前段交互对于理解js是远远不够的，但是经常练习我认为可以夯实js基础。这一块逻辑比较简单也很基础，重点在于对dom的操控和委托事件。需要扎实的html、css基础。同时呢，ES6已经漫天飞舞，公司依然用的ES5标准，极其难受。这对于想提升的童鞋怕是要憋出病来。感兴趣的同学可以将下列代码封装成插件的形式。

整个代码分为三部分：style.css/ curousel.js/ index.html

style.css

    * {        margin: 0;        padding: 0;        text-decoration: none;    }        body {        padding: 20px;    }        #container {        position: relative;        width: 600px;        height: 400px;        border: 3px solid #333;        overflow: hidden;    }        #list {        position: absolute;        z-index: 1;        width: 4200px;        height: 400px;    }        #list img {        float: left;        width: 600px;        height: 400px;    }        #buttons {        position: absolute;        left: 250px;        bottom: 20px;        z-index: 2;        height: 10px;        width: 100px;    }        #buttons span {        float: left;        margin-right: 5px;        width: 10px;        height: 10px;        border: 1px solid #fff;        border-radius: 50%;        background: #333;        cursor: pointer;    }        #buttons .on {        background: orangered;    }        .arrow {        position: absolute;        top: 180px;        z-index: 2;        display: none;        width: 40px;        height: 40px;        font-size: 36px;        font-weight: bold;        line-height: 39px;        text-align: center;        color: #fff;        background-color: RGBA(0, 0, 0, .3);        cursor: pointer;    }        .arrow:hover {        background-color: RGBA(0, 0, 0, .7);    }        #container:hover .arrow {        display: block;    }        #prev {        left: 20px;    }        #next {        right: 20px;        }

curousel.js

/**轮播新手教程，参考博主http://www.cnblogs.com/LIUYANZUO/p/5679753.html*删去了原代码中部分冗余的代码，简化逻辑，同时将代码改为ES6*采用js原生写就，适合夯实基础，但是，这段代码是毒，极难维护和扩展。*建议学习此代码了解思路之后看大神写的插件*/window.onload = function () {let list = document.getElementById( 'list' );let perv = document.getElementById( 'prev' );let next = document.getElementById( 'next' );let buttons = document.getElementById( 'buttons' ).getElementsByTagName( 'span' );let index = 1;buttons[0].className = 'on';list.style.left = 0;var buttonsShow = () => {for( let i = 0; i < buttons.length; i++) {buttons[i].className = '';}buttons[index-1].className = 'on';}var animation = ( offset ) => {let newLeft = parseInt(list.style.left) + offset;list.style.left = newLeft + 'px';if( newLeft < -2400 ) {            list.style.left = 0 + 'px';        }        if( newLeft > 0 ){            list.style.left = -2400 + 'px';        }}prev.onclick = () => {index -= 1;if(index < 1){index = 5;}buttonsShow();animation(600);}next.onclick = () => {index += 1;if( index > 5 ){index = 1;}buttonsShow();animation( -600 );}let timer;var play = () => {timer = setInterval( () => {next.onclick();} , 3000 );}play();let container = document.getElementById( 'container' );var stop = () => {clearInterval( timer );}container.onmouseover = stop;container.onmouseout = play;for(let i = 0; i < buttons.length; i++ ){    buttons[i].onclick = () => {    let clickIndex = parseInt(buttons[i].getAttribute('index'));    let offset = 600 * (index - clickIndex);    animation(offset);    index = clickIndex;    buttonsShow();}}}

index.html

<!Doctype html><html><head><link rel = "stylesheet" type = "text/css" href = "style.css"></head><body><div id="container">        <div id="list" >                        <img src="img/1.jpg" alt="1" />            <img src="img/2.jpeg" alt="2" />            <img src="img/3.jpg" alt="3" />            <img src="img/4.jpg" alt="4" />            <img src="img/5.jpg" alt="5" />                   </div>        <div id="buttons">            <span index="1"></span>            <span index="2"></span>            <span index="3"></span>            <span index="4"></span>            <span index="5"></span>        </div>        <a href="javascript:;" id="prev" class="arrow"><</a>        <a href="javascript:;" id="next" class="arrow">></a></div><script src = "curousel.js" ></script></body></html>

访问https://hopepdm.github.io/curousel/

可以看到轮播效果

阅读全文

0 0