jQuery实现简易轮播图的效果

时间：2024-11-30 08:05:07

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

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

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

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

jQuery实现简易轮播图的效果

<!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>

相关文章