JS 面向对象封装无限轮播插件。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
<style type="text/css">
    html{ background-color: #00b0e4;}
    body,ul,li{ margin: 0; padding: 0;}
    ul li{ list-style: none;}
    .container{ height: 300px; margin: 100px auto; padding: 60px 0; overflow: hidden;}
    .container ul{ display: -webkit-flex; display: flex; height: 100%;}
    .container ul li{ -webkit-flex-shrink: 0;  width: 400px; height: 100%;
        padding: 5px; box-sizing: border-box; -webkit-transition: all .6s; transition: all .6s;}
    .container ul li:hover{ z-index: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    .container ul li img{ width: 100%; height: 100%; object-fit: cover; box-sizing: border-box;
        border: 10px solid #fff; box-shadow: 0 0 5px #333;}

</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
<script>
    function FreeSlider(selector,speed) {

        /* 变量改为属性 */
        this.oContainer = document.querySelector(selector);
        this.oWrapper = this.oContainer.querySelector('ul');
        this.oSlide = this.oWrapper.querySelectorAll('li');

        /* 当不传入轮播速度时，速度默认为100 */
        this.speed = speed || 100;

        this.containerW = this.oContainer.offsetWidth;
        this.wrapperW = this.oSlide[0].offsetWidth * this.oSlide.length;
        this.x = 0;
        this.timer = null;

        this.init();

    }

    /* 构造函数的原型对象 */
    FreeSlider.prototype = {

        constructor: FreeSlider,

        /* 功能抽离，此处实现初始化 */
        init: function(){
            // this.oWrapper.style.width = this.wrapperW * 2 + 'px';
            this.oWrapper.innerHTML += this.oWrapper.innerHTML;

            if(this.wrapperW < this.containerW){
                this.oContainer.style.width = this.wrapperW + 'px';
            }

            // this.slideMove();
        },

        /* 图片自动无限轮播 */
        slideMove: function(){
            /* 此处需要注意this的指向，
               在setInterval回调函数中的this指向为window */
            var that = this;
            this.timer = setInterval(function () {
                that.x++;
                if(that.x > that.wrapperW){
                    that.x = 0;
                }
                that.oWrapper.style.transform = 'translate('+ (-that.x) +'px)';
            },this.containerW / this.speed);   // 将速度转化成定时器时间
        },

        /* 图片停止轮播 */
        stopSlideMove: function () {
            clearInterval(this.timer);
        }
    };

    window.onload = function(){

        var oContainer = document.querySelector('.container');

        // 新建图片轮播对象
        var mySlider = new FreeSlider('.container',300);

        // 鼠标移入时清除定时器，图片停止轮播
        oContainer.addEventListener('mouseover',function () {
            mySlider.stopSlideMove();
        });

        // 鼠标移出时图片继续轮播
        oContainer.addEventListener('mouseout',function () {
            mySlider.slideMove();
        });

    }

</script>

</head>
<body >
<div class="container">
    <ul class="wrapper">
        <li class="slide"><img src="./1.jpg" alt=""></li>
        <li class="slide"><img src="./2.jpg" alt=""></li>
        <li class="slide"><img src="./3.jpg" alt=""></li>
    </ul>
</div>

</body>
</html>
巴特西

JS 面向对象封装无限轮播插件。

最新文章

热门文章

巴特西

JS 面向对象封装 无限轮播 插件。

最新文章

热门文章

JS 面向对象封装无限轮播插件。
