js

最新推荐文章于 2020-05-14 18:59:04 发布

lulchen

最新推荐文章于 2020-05-14 18:59:04 发布

阅读量243

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lulchen/article/details/105422831

版权

JS从入门到放弃

JS更改css样式

直接使用js更改样式
通过js更改css类进而更改样式
直接使用css选择器进行样式更改

除了第一个其他都不错

slider插件编写

(这块代码没读懂，只能实现第一版，以下是第三版)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="my-slider" class="slider-list"></div>
</body>
<script>
    class Component {
        constructor(id, opts = { name, data: [] }) {
            this.container = document.getElementById(id);
            this.options = opts;
            this.container.innerHTML = this.render(opts.data);
        }
        registerPlugins(...plugins) {
            plugins.forEach(plugin => {
                const pluginContainer = document.createElement('div');
                pluginContainer.className = `.${name}__plugin`;
                pluginContainer.innerHTML = plugin.render(this.options.data);
                this.container.appendChild(pluginContainer);

                plugin.action(this);
            });
        }
        render(data) {
            /* abstract */
            return ''
        }
    }

    class Slider extends Component {
        constructor(id, opts = { name: 'slider-list', data: [], cycle: 3000 }) {
            super(id, opts);
            this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
            this.cycle = opts.cycle || 3000;
            this.slideTo(0);
        }
        render(data) {
            const content = data.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());

            return `<ul>${content.join('')}</ul>`;
        }
        getSelectedItem() {
            const selected = this.container.querySelector('.slider-list__item--selected');
            return selected
        }
        getSelectedItemIndex() {
            return Array.from(this.items).indexOf(this.getSelectedItem());
        }
        slideTo(idx) {
            const selected = this.getSelectedItem();
            if (selected) {
                selected.className = 'slider-list__item';
            }
            const item = this.items[idx];
            if (item) {
                item.className = 'slider-list__item--selected';
            }

            const detail = { index: idx }
            const event = new CustomEvent('slide', { bubbles: true, detail })
            this.container.dispatchEvent(event)
        }
        slideNext() {
            const currentIdx = this.getSelectedItemIndex();
            const nextIdx = (currentIdx + 1) % this.items.length;
            this.slideTo(nextIdx);
        }
        slidePrevious() {
            const currentIdx = this.getSelectedItemIndex();
            const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
            this.slideTo(previousIdx);
        }
        addEventListener(type, handler) {
            this.container.addEventListener(type, handler);
        }
        start() {
            this.stop();
            this._timer = setInterval(() => this.slideNext(), this.cycle);
        }
        stop() {
            clearInterval(this._timer);
        }
    }

    const pluginController = {
        render(images) {
            return `
      <div class="slide-list__control">
        ${images.map((image, i) => `
            <span class="slide-list__control-buttons${i === 0 ? '--selected' : ''}"></span>
         `).join('')}
      </div>    
    `.trim();
        },
        action(slider) {
            let controller = slider.container.querySelector('.slide-list__control');

            if (controller) {
                let buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
                controller.addEventListener('mouseover', evt => {
                    var idx = Array.from(buttons).indexOf(evt.target);
                    if (idx >= 0) {
                        slider.slideTo(idx);
                        slider.stop();
                    }
                });

                controller.addEventListener('mouseout', evt => {
                    slider.start();
                });

                slider.addEventListener('slide', evt => {
                    const idx = evt.detail.index;
                    let selected = controller.querySelector('.slide-list__control-buttons--selected');
                    if (selected) selected.className = 'slide-list__control-buttons';
                    buttons[idx].className = 'slide-list__control-buttons--selected';
                });
            }
        }
    };

    const pluginPrevious = {
        render() {
            return `<a class="slide-list__previous"></a>`;
        },
        action(slider) {
            let previous = slider.container.querySelector('.slide-list__previous');
            if (previous) {
                previous.addEventListener('click', evt => {
                    slider.stop();
                    slider.slidePrevious();
                    slider.start();
                    evt.preventDefault();
                });
            }
        }
    };

    const pluginNext = {
        render() {
            return `<a class="slide-list__next"></a>`;
        },
        action(slider) {
            let previous = slider.container.querySelector('.slide-list__next');
            if (previous) {
                previous.addEventListener('click', evt => {
                    slider.stop();
                    slider.slideNext();
                    slider.start();
                    evt.preventDefault();
                });
            }
        }
    };

    const slider = new Slider('my-slider', {
        name: 'slide-list', data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
            'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
            'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
            'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle: 3000
    });

    slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
    slider.start();
</script>

</html>
<style>
    #my-slider{
  position: relative;
  width: 790px;
  height: 340px;
}

.slider-list ul{
  list-style-type:none;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  text-align: center;
}

.slider-list__item--selected{
  transition: opacity 1s;
  opacity: 1;
}

.slide-list__control{
  position: relative;
  display: table;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  border-radius: 12px;
  bottom: 30px;
  margin: auto;
}

.slide-list__next,
.slide-list__previous{
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 30px;
  height:50px;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  overflow: hidden;
  border: none;
  background: transparent;
  color: white;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;
}

.slide-list__previous {
  left: 0;
}

.slide-list__next {
  right: 0;
}

#my-slider:hover .slide-list__previous {
  opacity: 1;
}


#my-slider:hover .slide-list__next {
  opacity: 1;
}

.slide-list__previous:after {
  content: '<';
}

.slide-list__next:after {
  content: '>';
}

.slide-list__control-buttons,
.slide-list__control-buttons--selected{
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: white;
  cursor: pointer;
}

.slide-list__control-buttons--selected {
  background-color: red;
}

</style>

重复触发函数引发error

talk is cheap ，show me the code

block.onclick = function(evt){
  block.onclick = null;//点击后设置为null
  console.log('hide');
  evt.target.className = 'hide';
  setTimeout(function(){
    document.body.removeChild(block);
  }, 2000);
};
//异步获取数据，async，await，promise。
//节流，防抖应该也可以吧