原生js模仿小米轮播图

最新推荐文章于 2022-07-04 23:22:07 发布

lgdshr123

最新推荐文章于 2022-07-04 23:22:07 发布

阅读量813

点赞数

分类专栏： JavaScript 文章标签： web前端函数 js

本文链接：https://blog.csdn.net/lgdshr123/article/details/52292253

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #banner {
        width: 992px;
        height: 420px;
        margin: 100px auto;
        position: relative;
    }

    #main {
        width: 992px;
        height: 420px;
        overflow: hidden;
    }

    #con {
        width: 7000px;
        height: 420px;
        overflow: hidden;
    }

    #con img {
        width: 992px;
        height: 420px;
        float: left;
        cursor: pointer;
    }

    #banner ol {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    #banner ol li {
        height: 20px;
        width: 30px;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid #fff;
        line-height: 20px;
        text-align: center;
        margin-left: 10px;
        float: left;
    }

    #banner #left, #banner #right {
        width: 41px;
        height: 69px;
        position: absolute;
        background: url("img/arr.png") no-repeat -84px 0;
        top: 50%;
        margin-top: -35px;
    }

    #banner #right {
        right: 0;
        background-position: -125px 0;
    }

    #banner #left:hover {
        background-position: 0 0;
    }

    #banner #right:hover {
        background-position: -42px 0;
    }

    #num .show {
        border-color: #000;
        background: rgba(255, 255, 255, 0.5);
    }
</style>
<div id="banner">
    <div id="main">
        <div id="con">
            <img src="img/1.jpg" alt=""/>
            <img src="img/2.jpg" alt=""/>
            <img src="img/3.jpg" alt=""/>
            <img src="img/4.jpg" alt=""/>
        </div>
    </div>

    <ol id="num">
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <a href="javascript:;" id="left"></a>
    <a href="javascript:;" id="right"></a>
</div>
<script src="../tween.js"></script>
<script>
    var con = document.getElementById('con');   //得到图片的父级
    var imgs = con.getElementsByTagName('img'); //根据图片的父级得到图片
    var num = document.getElementById('num');
    var lis = num.getElementsByTagName('li');
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var picNum = 1,num = 0;//picNum保存当前要滚动的图片的下标值,num表示下面的数字
    var timer1 = null, timer2 = null;    // timer1用来控制换图片的间隔，timer2用来控制图片滚动
    /*新建图片节点插入到图片块中*/
    var newImg1 = document.createElement('img');
    newImg1.src = imgs[0].src;
    var newImg2 = document.createElement('img');
    newImg2.src = imgs[imgs.length-1].src;
    con.appendChild(newImg1);
    con.insertBefore(newImg2,imgs[0]);

    main.scrollLeft=imgs[0].clientWidth;//初始化滚动条的位置在一张图片宽度位置
    function move() {
        var start = main.scrollLeft;    //获取滚动开始位置
        var end = imgs[0].clientWidth * picNum;   //获取滚动结束位置
        var change = end - start; //求得滚动距离的差值
        var minStep = 0;    //设置最小步数
        var maxStep = 31;   //设置最大步数
        var aveSpace = change / maxStep;  //求得平均每步的距离
        clearInterval(timer2);
        timer2 = setInterval(function () {
            minStep++;
            if (minStep >= maxStep) {
                clearInterval(timer2);
            }
            start += aveSpace;
            main.scrollLeft = start;
           // main.scrollLeft = Tween.Quint.easeIn(minStep,start,change,maxStep);
            //main.scrollLeft = Tween.Quart.easeIn(minStep,start,change,maxStep);
            //main.scrollLeft = Tween.Sine.easeIn(minStep,start,change,maxStep);
            //main.scrollLeft = Tween.Bounce.easeIn(minStep,start,change,maxStep);
        }, 10);
        for (var i = 0; i < lis.length; ++i) {
            lis[i].className = '';
        }
        lis[num].className = 'show';
    }

    function autoMove() {
        clearInterval(timer1);  //在建立一个计时器时要先清除一个
        timer1 = setInterval(function () {
            picNum++;
            if (picNum >= imgs.length) {
                picNum = 2;
                main.scrollLeft=imgs[0].clientWidth;
            }
            num++;
            if(num>=lis.length){
                num=0;
            }
            move();
        }, 2000);
    }
    autoMove(); //刚打开后自动播放
    //点击右按钮
    right.onclick = function () {
        picNum++;
        if (picNum >= imgs.length) {
            picNum = 2;
            main.scrollLeft=imgs[0].clientWidth;
        }
        num++;
        if(num>=lis.length){
            num=0;
        }
        move();
        autoMove();
    }

    //点击左按钮
    left.onclick = function () {
        picNum--;
        if (picNum < 0) {
            picNum = imgs.length - 3;
            main.scrollLeft=imgs[0].clientWidth*(picNum+1);
        }
        num--;
        if (num < 0) {
            num = lis.length - 1;
        }
        move();
        autoMove();
    }
    //当鼠标移动到数字上
    for (var i = 0; i < lis.length; ++i) {
        lis[i].index = i;
        lis[i].onmouseenter = function () {
            num = this.index;
            picNum = num+1;
            move();
            autoMove();
        }
    }
    for(var i = 0 ; i < imgs.length ; ++i){
        imgs[i].onmouseenter = function () {
            clearInterval(timer1);
            clearInterval(timer2);
        }
        imgs[i].onmouseleave = function () {
            autoMove();
        }
    }
</script>
</body>
</html>