美文网首页
JS 淡入淡出轮播图

JS 淡入淡出轮播图

作者: 春和景明5143 | 来源:发表于2018-12-13 12:50 被阅读0次

    HTML+CSS部分

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>My First Website</title>

        <link rel="stylesheet" type="text/css" href="font_i85zuoyl9tg/iconfont.css">

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .box{

                margin: 20px auto;

                width: 1100px;

                height: 482px;

                position: relative;

                /*overflow: hidden;*/

            }

            a{

                display: block;

                width: 100px;

                height: 100px;

                border-radius: 50%;

                background:rgba(0,0,0,0.5);

                line-height: 100px;

                text-decoration: none;

                text-align: center;

                color: #fff;

                opacity:0 ;

            }

            #left{

                position: absolute;

                top: 191px;

                left: 10px;

            }

            #right{

                position: absolute;

                top: 191px;

                right: 10px;

            }

            img{

                position: absolute;

                opacity: 0;

            }

            .to{

                opacity: 1;

            }

            .on{

                opacity: 1;

                transition: opacity 1s ;

            }

            .in{

                opacity: 0;

                transition: opacity 1s ;

            }

            ul{

                display: flex;

                /*justify-content: space-between;*/

                align-items: center;

                justify-content: center;

                width: 600px;

                list-style: none;

                position: absolute;

                top: 450px;

                left:250px

                /*left:*/

            }

            ul li{

                width: 30px;

                height: 30px;

                background:rgba(0,0,0,.5);

                line-height: 30px;

                text-align: center;

                margin-left: 20px;

            }

            .oLi{

                background: #fff;

            }

            .oLi1{

                background: #fff;

                transition: opacity 1s;

            }

        </style>

    </head>

    <body>

    <div class="box">

        <img src="image/slideshow-apartments-01.jpg" alt="" >

        <img src="image/slideshow-apartments-02.jpg" alt="" >

        <img src="image/slideshow-apartments-03.jpg" alt="" >

        <img src="image/slideshow-apartments-04.jpg" alt="" >

        <img src="image/slideshow-apartments-05.jpg" alt="" >

        <a id="left" href="javascript:;"><i class="iconfont icon-xiaoyuhao"></i></a> //左边的按钮

        <a id="right" href="javascript:;"><i class="iconfont icon-dayu"></i></a>//右边的按钮

        <ul id="oList">//序号标签

            <li class="oLi">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

    </body>

    </html>

    JS部分

    <script>

        var oDiv=document.querySelector('.box');//大盒子

        var oImg=document.querySelectorAll('img');//获取所有图片标签

        var oLeft=document.querySelector('#left');//获取左边按钮

        var oRight=document.querySelector('#right');//获取右边按钮

        var oLi=document.querySelectorAll('li');获取所有序号标签

        var index=0;//定义下标值

        var timer;//定义一个变量,用于定时器

        oDiv.onmouseenter=function () {//移入显示两边按钮

            oLeft.className='on';

            oRight.className='on';

            clearInterval(timer);//清除定时器

        };

        oDiv.onmouseleave=function () {//移出隐藏按钮

            oLeft.className='in';

            oRight.className='in';

            timer=setInterval(show,1000)//开启定时器

        };

        oRight.onclick=function () {//往右边的点击事件

            index++;

            if(index>=oImg.length) index=0;

            time();

        };

        oLeft.onclick=function () {//往左边的点击事件

            index--;

            if(index<0) index=oImg.length-1;

            time();

        };

        function time() {

            for(var i=0;i<oImg.length;i++){

                oImg[i].className='';

                oLi[i].className='';

            }

                oImg[index].className='on';

                oLi[index].className='oLi1'

            }

            function show() {//自动播放事件

                index++;

                if(index>=oImg.length) index=0;

                time();

            }

    //单击序号按钮显示对应的图片

            for(var i=0;i<oLi.length;i++) {//循环清样式,加样式

                +function (x) {

                    oLi[i].onclick = function () {

                        index=x;

                        for (var i = 0; i < oLi.length; i++) {

                            oImg[i].className = '';

                            oLi[i].className = '';

                        }

                        oImg[x].className = 'on';

                        oLi[x].className = 'oLi1';

                    }

                }(i)

            }

            timer=setInterval(show,1000);//1000毫秒切换一次

    </script>

    相关文章

      网友评论

          本文标题:JS 淡入淡出轮播图

          本文链接:https://www.haomeiwen.com/subject/vtivhqtx.html