轮播图，jquery

2023-06-20 19:16•python•阅读 4750

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <link href="fk.css" rel="stylesheet" type="text/css" />
                <script src="../1.10.2.jquery.min.js"></script>
        </head>
        <body>
                <div >
                        <!--img[src=img/$.jpg]*6-->
                        <img src="img/1.jpg" alt="" />
                        <img src="img/2.jpg" alt="" />
                        <img src="img/3.jpg" alt="" />
                        <img src="img/4.jpg" alt="" />
                        <img src="img/5.jpg" alt="" />
                        <img src="img/6.jpg" alt="" />
                        <ul>
                                <li ></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                        </ul>
                </div>
        </body>
        <script>
//              如果使用jQuery,
//              移入事件建议写成mouseenter
//              移出事件建议写成mouseleave
                var c=0;
                function autorun(){
                        c++;
                        c=c==6?0:c;
//                      让c号元素显示,兄弟元素隐藏
                        $("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200);
//                      让c号li变红,兄弟li变灰色
                        $("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd');
                }
                var timer=setInterval(autorun,1000)
                
                $("#fk").mouseenter(function(){
//                      清理定时器
                        clearInterval(timer);
                })
                $("#fk").mouseleave(function(){
                        timer=setInterval(autorun,1000)
                })
//              给小圆点加鼠标移入事件
                $("#fk ul li").mouseenter(function(){
//                      获得移入的li的序号
                c=$(this).index();
//              让c号元素显示,兄弟元素隐藏
                        $("#fk img").eq(c).fadeIn(200).siblings('img').fadeOut(200);
//                      让c号li变红,兄弟li变灰色
                        $("#fk ul li").eq(c).css('background','#a10000').siblings('li').css('background','#ddd');
                })
        </script>
</html>

css代码

*{
        margin: 0;
        padding: 0;
}
#fk{
        width: 1200px;
        height: 535px;
        position: relative;
        border: 4px solid palevioletred;
        margin: 0 auto;
}
#fk img{
        position: absolute;
        left: 0;
        top: 0;
        display: none;
}
#fk ul{
        position: absolute;
        left: 528px;
        bottom: 23px;
}
#fk ul li{
        width: 12px;
        height: 12px;
        background: #ddd;
        list-style: none;
        float: left;
        margin-right: 8px;
        border-radius: 50%;
}

上一篇 »HTML/CSS，轮播图 - 小柴同学
下一篇 »css轮播图