demo.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/banner.css">
</head>

<body>
    <div class="qf-banner">
        <ul class="banner-inner">
            <li>
                <img src="images/1.jpg" alt="">
            </li>
            <li>
                <img src="images/2.jpg" alt="">
            </li>
            <li>
                <img src="images/3.jpg" alt="">
            </li>
            <li>
                <img src="images/4.jpg" alt="">
            </li>
            <li>
                <img src="images/5.jpg" alt="">
            </li>
            <li>
                <img src="images/6.jpg" alt="">
            </li>
        </ul>
        <ul class="banner-tip"></ul>
        <a href="javascript:;" class="left-btn"></a>
        <a href="javascript:;" class="right-btn"></a>
    </div>
    <script src="js/common.js"></script>
    <script src="js/move1.1.0.js"></script>
    <script src="js/swiper2.0.js"></script>
    <script>
        swiper.init('.qf-banner');
     
    </script>
</body>
</html>

move1.1.0.js

// 如果多个参数需要选填, 把多个参数当成一个对象, 这样就没有先后顺序问题了
function move(ele, attr, target, options) {
    // 把options里面传入的参数, 替换__default
    const __default = {
        time: 500,
        callback: null,
        ...options
    }
    let $box = ele;
    if(typeof ele == 'string') {
        $box = $(ele);
    }
    clearInterval($box.timer);
    let init = parseFloat(getStyle($box, attr));
    if(attr == 'opacity') {
        init *= 100;
    }
    // (目标值 - 初始值) / 次 = (时间 / 频率)
    let speed = (target - init) / (__default.time / 10);
    $box.timer = setInterval(function () {
        init += speed;
        if ((speed <= 0 && init <= target) || (speed >= 0 && init >= target)) {
            // 终止运动条件
            init = target;
            clearInterval($box.timer);
            if (typeof __default.callback == 'function')
                __default.callback($box);
        }
        if(attr == 'opacity') {
            $box.style[attr] = init / 100
        } else {
            $box.style[attr] = init + 'px';
        }
    }, 10)
}

swiper2.0.js

// var swiper = (function() {
//     let $showBox,
//     $imgBox,
//     $imgLiBox,
//     $tipsBox,
//     $preBtn,
//     $nextBtn,
//     $tipsAll = [],
//     showBoxWidth,
//     showIndex, // 当前展示图片的索引
//     timer;  // 定时器
//     return {
//         init(ele) {
//             // 获取所用dom元素
//             $showBox = $(ele);
//             showBoxWidth = $showBox.clientWidth;
//             $imgBox = $showBox.querySelector('.banner-inner');
//             $imgLiBox = $imgBox.children;
//             $tipsBox = $showBox.querySelector('.banner-tip');
//             // 获取上一个按钮
//             $preBtn = $showBox.querySelector('.left-btn');
//             // 获取下一个按钮
//             $nextBtn = $showBox.querySelector('.right-btn');
//             // $tipsAll = $tipsBox.children;
//             // 根据图片的位数, 创建对应的小圆圈
//             this.createTips($imgLiBox.length);

//             // 获取第一张图片的li
//             const $firstLi = $imgLiBox[0];
//             console.log($firstLi);
//             // console.log($imgBox.firstElementChild);
//             // 获取最后一张图片的li
//             const $lastLi = $imgLiBox[$imgLiBox.length - 1];
//             // console.log($imgLiBox);
    
//             // 把第一张克隆到最后一张
//             $imgBox.appendChild($firstLi.cloneNode(true));
//             // 把最后一张克隆到第一张
//             $imgBox.insertBefore($lastLi.cloneNode(true), $firstLi);
//             // 克隆以后, 应该还是展现第一张
//             $imgBox.style.left = -showBoxWidth + 'px';
//             this.showImage(0);

//             this.autoPlay();
//             this.event();
//         },
//         event() {
//             var _this = this;
//             $tipsBox.onclick = function(e) {
//                 e = e || window.event;
//                 const target = e.target || e.srcElement;
//                 if(target.nodeName == 'LI') {
//                     _this.showImage(target.index);
//                     _this.autoPlay()
//                 }
//             }
//             $preBtn.onclick = function() {
//                 _this.showImage(showIndex - 1);
//                 _this.autoPlay();
//             }
//             $nextBtn.onclick = function() {
//                 _this.showImage(showIndex + 1);
//                 _this.autoPlay()
//             }
//         },
//         createTips(num) {
//             for(let i = 0; i< num; i++) {
//                 const $li = document.createElement('li');
//                 $li.index = i;
//                 $tipsBox.appendChild($li);
//                 // 把所有的tip存放到数组中
//                 $tipsAll.push($li);
//             }
//         },
//         showImage(index) {
//             // 合法判断
//             let maxIndex = $tipsAll.length - 1
//             if(index < 0) {
//                 // 展示最后一张图片
//                 index = maxIndex;
//                 $imgBox.style.left = -showBoxWidth * ( maxIndex + 2) + 'px';

//             } else if(index > maxIndex) {
//                 // 展示第一张
//                 index = 0;
//                 $imgBox.style.left = 0 + 'px';
//             }
//             showIndex = index;
//             $tipsAll.forEach(x => {
//                 x.classList.remove('active');
//             })
//             $tipsAll[index].classList.add('active');

//             move($imgBox, 'left',  -showBoxWidth * (index + 1));
//         },
//         autoPlay() {
//             clearInterval(timer);
//             timer = setInterval( _ => {
//                 this.showImage(showIndex + 1);
//             }, 2000)
//         }
//     }
// }())



var swiper = (function(){
    let $showBox,
    $imgBox,
    $imgLiBox,
    $tipsBox,
    $preBtn,
    $nextBtn,
    $tipsAll = [],
    $showBoxWidth,
    showIndex,
    timer;
    return{
        init(ele){
            $showBox = $(ele);
            //因为通过 DOM 已经获取了$showBox,于是可以从$showBox中找到.banner-inner
            showBoxWidth = $showBox.clientWidth;
            $imgBox = $showBox.querySelector('.banner-inner');
            $imgLiBox = $imgBox.children;
            $tipsBox = $('.banner-tip');
            // $tipsAll = $tipsBox.children;
            $preBtn = $('.left-btn');
            $nextBtn = $('.right-btn');

            // console.log($imgLiBox.length);
            this.createTips($imgLiBox.length);
            const $firstLi = $imgLiBox[0];
            const $lastLi = $imgLiBox[$imgLiBox.length - 1];
            
            $imgBox.appendChild($firstLi.cloneNode(true));
            $imgBox.insertBefore($lastLi.cloneNode(true),$firstLi);

            $imgBox.style.left = -showBoxWidth + 'px';
            
            this.showImage(0);
            this.event();
            this.autoPlay();
        },
        event(){
            var _this = this;
            $tipsBox.onclick = function(e){
                e = e || window.event;
                const target = e.target || e.srcElent;
                if(target.nodeName == 'LI'){
                   _this.showImage(target.index) ;
                }
            }
            $preBtn.onclick = function(){
                _this.showImage(showIndex - 1);
                _this.autoPlay();

            }
            $nextBtn.onclick = function(){
                _this.showImage(showIndex + 1);
                _this.autoPlay();
            }
        },
        createTips(num){
            for(let i= 0;i < num;i ++){
                const $li = document.createElement('li');
                $li.index = i;
                $tipsBox.appendChild($li);
                $tipsAll.push($li);
            }
        },
        showImage(index){
            let maxIndex = $tipsAll.length - 1;
            if(index < 0){
                index = $tipsAll.length - 1;
                $imgBox.style.left = -showBoxWidth*($tipsAll.length + 2) +'px';
            }else if(index > maxIndex){
                index = 0;
                $imgBox.style.left = 0 + 'px';
            }
            showIndex = index;
            $tipsAll.forEach((x, i) => {
                x.classList.remove('active');
            })
            $tipsAll[index].classList.add('active');
            move($imgBox,'left',-showBoxWidth * (index + 1));
        },
        autoPlay(){
            clearInterval(timer);
            timer = setInterval( _ =>{
                this.showImage(showIndex + 1)
            },2000);
        }
    }
}())

common.js

//  判断数组是否还有这个元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       } 
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        } 
     }
     return -1;
}

// 任意区间随机整数
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 数组去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 获取参数
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 获取非行内样式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}
posted on 2019-04-03 09:16  风往南  阅读(80)  评论(0编辑  收藏  举报