jQuery实现简易轮播图的效果

（图片素材取自于小米官网）

刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。

下面简易的轮播图效果，还请前辈多多指教~

（努力学习react vue angular中，加油~~~）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,p,ul{margin:0px;padding:0px;}
        #box{width:1226px;height:460px;margin:0 auto;position:relative;}
        img{position:absolute;width:100%;display:none;}
        #cir{position:absolute;height:20px;width:150px;bottom:0;left:50%;transform:translateX(-50%);}
        span{height:20px;width:20px;border-radius:10px;background:blue;display:inline-block;box-sizing:border-box;}
        #left{height:69px;width:41px;position:absolute;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -83px 0px;}
        #right{height:69px;width:41px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -125px 0px;}
        #left:hover{background:url("img/icon-slides.png") no-repeat 0px 0px;}
        #right:hover{background:url("img/icon-slides.png") no-repeat -42px 0px;}
        .span_on{background:red;border:1px solid yellow;}
        .img_on{display:block;}
    </style>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function(){
            var index=0;
            var timer=null;
            function play(){
                index++;
                if(index>5){
                    index=0;
                }
                $("span").eq(index).prop("class","span_on").siblings().prop("class","");
                $("img").eq(index).prop("class","img_on").siblings().prop("class","");
            }
            timer=setInterval(play,1000);
            $("#box").mouseover(function(){
                clearInterval(timer);
            })

            $("#box").mouseout(function(){
                timer=setInterval(play,1000);
            })
            $("#left").click(function(){
                index--;
                if(index<0){
                    index=5;
                }
                $("span").eq(index).prop("class","span_on").siblings().prop("class","");
                $("img").eq(index).prop("class","img_on").siblings().prop("class","");
            })
            $("#right").click(function(){
                play();
            })
            $("span").mouseover(function(){
                $(this).prop("class","span_on").siblings().prop("class","");
                index=$(this).index();
            })
        })
    </script>
</head>
<body>
<div>
    <div id="box">

        <img class="img_on" src="img/11.jpg" alt="">
        <img src="img/22.jpg" alt="">
        <img src="img/33.jpg" alt="">
        <img src="img/44.jpg" alt="">
        <img src="img/55.jpg" alt="">
        <img src="img/66.jpg" alt="">

        <div id="cir">
            <span class="span_on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div id="left">
        </div>
        <div id="right">
        </div>
    </div>
</div>
</body>
</html>

jQuery实现简易轮播图的效果

猜你喜欢