<!--轮播图大盒子开始-->

<div class="wrap">

    <!--大盒子上部分轮播图-->

    <div class="wrapUp">

        <ul>

            <li class="cur"><a href="#"><img src="data:images/banner/banner01.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner/banner02.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner/banner03.jpg" alt=""></a></li>

            <li><a href="#"><img src="data:images/banner/banner04.jpg" alt=""></a></li>

        </ul>

        <span class="btn left">&lt;</span>

        <span class="btn right">&gt;</span>

    </div>

    <!--大盒子下部分标题-->

    <div class="wrapDown">

        <ol>

            <li class="cur">大牌特惠</li>

            <li>住进北欧</li>

            <li>绵绵爱意</li>

            <li>母婴盛宴</li>

        </ol>

        <!--底部红色下划线-->

        <span class="line"></span>

    </div>

</div>

<style>

        *{margin: 0;padding:0;list-style: none}

        /*设置页面图片背景*/

        body{background:url("images/banner/bg.jpg")no-repeat center top;}

        /*大盒子样式宽高,盒子投影，内边距*/

        .wrap{width: 1170px;height: 452px;background:rgba(255,255,255,0.5);margin:30px auto;

        padding:12px 12px 0;box-sizing:border-box;box-shadow:0 0 10px rgba(0,0,0,0.4);overflow: hidden}

/*图片盒子宽高，定位样式*/

        .wrapUp{width: 1146px;height: 400px;position: relative;}

        .wrapUp li{position:absolute;left:0;top:0;display: none;}

        .wrapUp .cur{display: block;}

        /*盒子两边箭头样式*/

        .wrapUp .btn{width: 33px;height: 66px;background:rgba(0,0,0,0.2);

        position: absolute;color:#ffffff;font-size: 40px;line-height: 66px;text-align: center;

            font-family:"黑体";border-radius:5px;top:50%;transform:translateY(-50%);cursor: pointer;transition:0.3s}

        /*盒子左箭头样式*/

        .wrapUp .left{left: -45px}

        .wrapUp .right{right: -45px}

        /*盒子移入显示*/

        .wrap:hover .wrapUp .left{left:0}

        .wrap:hover .wrapUp .right{right:0}

        /*盒子不透明度变化*/

        .wrapUp .btn:hover{background:rgba(0,0,0,0.4);}

        /*大盒子下部分标题样式*/

        .wrapDown{width: 800px;height: 40px;margin:0 auto;position: relative}

        /*大盒子下部分内容li样式*/

        .wrapDown li{width: 200px;height: 40px;font-size: 15px;line-height: 40px;float: left;text-align: center;color: #666666;position: relative;cursor: pointer}

        /*每个li后面的分割线样式*/

        .wrapDown li:after{content:"|";position: absolute;right: 0;top:0;color: #cccccc}

        /*设置第一个li字样式*/

        .wrapDown .cur{color:red;}

        /*最后一个li不需要分割线*/

        .wrapDown li:last-child:after{display: none}

        /*底部红色下划线相对于底部盒子定位*/

        .wrapDown .line{width: 200px;height: 2px;background:deeppink;left: 0;bottom:-1px;position: absolute}

    </style>

<script>

    //鼠标以上通过索引值切换

    //图片

    //当前文字颜色

    $(".wrapDown li").mouseenter(function () {

        //定义变量接收索引值

        var index=$(this).index();

        console.log(index);

        play(index);

        //根据索引值图片

      /*  $(".wrapUp li").eq(index).stop().fadeIn().siblings().stop().fadeOut();

        //文字切换

        $(".wrapDown li").eq(index).addClass("cur").siblings().removeClass("cur");

        //滑动线切换

        $(".line").stop().animate({left:index*200},100)*/

    });

    //把切换封装成一个函数

    //自动播放

    //定义播放

    function play(aaa){

        $(".wrapUp li").eq(aaa).stop().fadeIn().siblings().stop().fadeOut();

        //文字切换

        $(".wrapDown li").eq(aaa).addClass("cur").siblings().removeClass("cur");

        //滑动线切换

        $(".line").stop().animate({left:aaa*200},100)

    }

    var timer=null;//先设置个定时器timer 让值为空

    var num=0;//需要有一个索引数字控制它动，初始为0

    var len=$(".wrapDown li").length;//需要有一个索引值和num对比,为li的个数。

    //封装自定义播放动画

    function autoplay() {

        timer=setInterval(function () {//此处的timer是给定时器赋值

            num++;

            if(num>len-1){num=0;}

            play(num);

            console.log(num);

        },1000);

    }

//鼠标以上停止,鼠标离开调用自动播放

    $(".wrap").hover(function () {

        clearInterval(timer);

    },function () {

        autoplay();

    });

//箭头点击切换图片

    $(".right").click(function () {

        num++;

        if(num>len-1){num=0;}

        play(num);

    });

    $(".left").click(function () {

        num--;

        if(num<0){num=len-1;}

        play(num);

    });

</script>