渐隐渐显轮播/fadeIn()/fadeOut()/左右点击轮播

来源：互联网发布：旧电脑安装linux 编辑：程序博客网时间：2024/06/05 19:25
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">    <style>    *{padding: 0;margin: 0;list-style: none;text-decoration: none; font-family: '微软雅黑'}    .container {        width: 1140px;        margin: 0 auto    }    .m1-common .title {        font-size: 40px;        color: #5c6670;        line-height: 50px    }    .m1-common .content {        font-size: 16px;        line-height: 24px;        color: #5c6670;        margin-top: 30px    }    .m1-common a.link {        font-size: 18px;        display: block;        line-height: 32px;        color: #df001f;        margin-top: 20px    }    .section {        position: relative;        min-height: 500px;        overflow: hidden;    }    .section .icon-right {        font-size: 12px    }    .abs-text {        position: absolute;        left: 50%    }    .summary-design .abs-text {        top: 85px;        z-index: 5;        width: 500px;        margin-left: -250px;    }    .summary-design .nav-rect {        position: absolute;        left: 0;        bottom: 60px;        width: 100%;        z-index: 3;        text-align: center;    }    .summary-design .nav-rect li {        width: 15px;        height: 15px;        display: inline-block;        margin: 0 4px;        transition: all .6s ease-out;        cursor: pointer;        background: #fff;        border-radius: 50%    }    .summary-design .nav-rect .last {        margin-right: 0    }    .summary-design .nav-rect .current {        background: #242424;        cursor: default    }    .summary-design .title,    .summary-design .content,    .summary-design a.link {        color: #fff    }    .summary-design.t-w .title,    .summary-design.t-w .content {        color: #5c6670    }    .summary-design.t-w a.link {        color: #df001f    }    .summary-design .img-list {        position: absolute;        width: 100%;        height: 100%;        top: 0;        left: 0;        z-index: 2    }    .summary-design .img-list li {        position: absolute;        width: 100%;        height: 100%;        top: 0;        left: 0;        z-index: 5;        opacity: 0;        transition: opacity .6s ease-out    }    .summary-design .img-list .img-a {background: black;}    .summary-design .img-list .img-b {background: rgba(0,0,255,.3);}    .summary-design .img-list .img-c {background: orange; }    .summary-design .img-list .img-f {background: #ddd; }    .summary-design .img-list .img-e {background: pink;}    .summary-design .img-list .img-d {background: rgba(255,0,0,.3);}    .summary-design .img-list .current {        opacity: 1    }    .summary-design .nav-forward {        position: absolute;        transition: all .3s ease-out;        top: 35%;        left: 50%;        z-index: 20;        margin-left: -570px;        opacity: 0    }    .summary-design .nav-forward .left-forward {        position: absolute;        left: 0;        width: 50px;        height: 150px;        border-radius: 2px;        cursor: pointer    }    .summary-design .nav-forward .right-forward {        position: absolute;        right: 0;        width: 50px;        height: 150px;        border-radius: 2px;        cursor: pointer    }    .summary-design .nav-forward li {        color: #fff;        text-align: center    }    .summary-design .nav-forward li span {        font-size: 50px;        font-weight: 100;        line-height: 150px    }    .summary-design .nav-forward li:hover {        background: rgba(204,204,204,.6)    }    .summary-design:hover .nav-forward {        opacity: 1    }    </style></head><body>    <!-- 轮播 -->    <div class="section summary-design m1-common">        <div class="abs-text">            <h2 class="title">精彩的科技 出彩的设计</h2>            <p class="content">M1 在延续 NIU 家族设计语言的同时，加入更多潮流色彩元素、以及聪明过人的智能科技，为你的行动表现力加分。</p>            <a class="link" href="/m1/design" target='_blank'>了解设计<span class='fa fa-angle-right'></span></a>        </div>        <ul class="img-list J_imgBlock"  data-index='0'>            <li class='img-a current'>a</li>            <li class='img-b'>b</li>            <li class='img-c'>c</li>            <li class='img-d'>d</li>            <li class='img-e'>e</li>            <li class='img-f'>f</li>        </ul>        <ul class="nav-forward container J_forNav">            <li class="left-forward">                <span class='fa fa-angle-left'></span>            </li>            <li class="right-forward">                <span class='fa fa-angle-right'></span>            </li>        </ul>        <ul class="nav-rect clearfix  J_listNav">            <li class='current'></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>    <script>        $(function(){            // 第二屏轮播            var listNav = $('.J_listNav li'); //点            var listNavLi = $('.J_imgBlock li'); //图片            var _index = 0;            var timer = null;            var rightForward = $('.right-forward'),leftForward = $('.left-forward');            // leftForward.hide();            rightForward.bind('click',function(){                _index = _index == listNav.length-1?0:_index+1;//是+1 不是+=                stopfn();//清除读秒                console.info(_index);                change();                startfn();//开始读秒            })            leftForward.bind('click',function(){                _index = _index == 0?listNav.length-1:_index-1;//同理                stopfn();//清除读秒                console.warn(_index);                change();                startfn();//开始读秒            })            listNav.bind('click',function(){                if($(this).hasClass('current')){                    return;                }                _index = $(this).index();                stopfn();//清除读秒                console.log(_index);                change();                startfn();//开始读秒            })            function autoChange(){                console.log(_index);                //change();                _index = _index == listNav.length-1?0:_index+1;//同理                change();//在index改变后执行            }            startfn();            function change(){                              listNav.eq(_index).addClass('current').siblings().removeClass('current');                listNavLi.eq(_index).addClass('current').siblings().removeClass('current');                $('.summary-design').toggleClass('t-w',_index==listNav.length-1);            }            function startfn(){timer = setInterval(autoChange,2000);}//读秒轮播            function stopfn(){clearInterval(timer)}//清除读秒            // END 轮播        })    </script></body></html>
0 0