轮播图-蒲公英云

轮播图

**## CSS样式**
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            div{
                width: 300px;
                height: 300px;
                position: relative;
                border: 1px solid gray;
                margin-left: 250px;
                overflow: hidden;
            }
            ul{
                width: 1500px;
                height: 300px;
                position: absolute;
            }
            ul>li{
                width: 300px;
                height: 300px;
                float: left;
            }
            ul>li>img{
                width: 100%;
                height: 100%;
            }
            button{
                position: absolute;
                top: 120px;
                border: none;
                width: 50px;
                height: 80px;
                background: rgba(120,120,120,0.6);
                display: none;
                color: orange;
                font-size: 22px;
            }
            button:nth-of-type(1){
                left: 0;
            }
            button:nth-of-type(2){
                right: 0;
            }
            ol{
                position: absolute;
                bottom: 10px;
                width: 100%;
                display: flex;
                justify-content: space-around;
            }
            ol>li{
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: white;
            }
## HTML代码
        <div>
            <ul>
                <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
                <li><img src="img/WuTa_2019-02-25_18-33-14.jpg" ></li>
                <li><img src="img/WuTa_2019-02-25_18-33-21.jpg" ></li>
                <li><img src="img/WuTa_2019-03-16_20-12-13.jpg" ></li>
                <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
            </ul>
            <ol>
                <li style="background: #FF0000;"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <button>prev</button>
            <button>next</button>
        </div>
## js代码
        var timer
        var index = 0
        $(function(){
            $("button").eq(1).click(function(){
                $("ul").stop(true,true)
                index++
                if(index>3){
                    index=0
                }
                if($("ul").position().left<=-1200){
                    $("ul").css("left","0")
                }
                $("ul").animate({"left":"-=300px"},500)
                yuan()
            })
            $("button").eq(0).click(function(){
                index--
                if(index<0){
                    index = 3
                }
                $("ul").stop(true,true)
                if($("ul").position().left>=0){
                    $("ul").css("left","-1200px")
                }
                $("ul").animate({"left":"+=300px"},500)
                yuan()
            })
        })
        var bian = function(){
            index++
            if(index>3){
                index=0
            }
            $("ul").stop(true,true)
            if($("ul").position().left<=-1200){
                $("ul").css("left","0")
            }
            $("ul").animate({"left":"-=300px"},500)
            yuan()
        }
        //动画自动轮播
        timer = setInterval(bian,2000)
        $("div").hover(function(){
            clearInterval(timer)
            // 圆点点击
            $("ol>li").click(function(){
                $(this).css("background","red").siblings().css("background","white")
                index =$(this).index()
                $("ul").stop().animate({'left':index*-300+"px"},500)
            })
            $("button").fadeIn(300)
        },function(){
            timer= setInterval(bian,2000)
            $("button").fadeOut(300)
        })
        function yuan(){
            $("ol>li").eq(index).css("background","red").siblings().css("background","white")
        }