原生js模仿小米轮播图

来源：互联网发布：淘宝待发货订单生成器编辑：程序博客网时间：2024/05/17 21:39

<!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>

图片没贴上

0 0