11.轮播图（练习）

Posted 2021-01-13 alex-xxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11.轮播图（练习）相关的知识，希望对你有一定的参考价值。

效果图：

技术分享图片

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img{
            display: block;
        }
        .box{
            margin: 100px auto;
            width: 650px;
            height: 250px;
            border: 1px solid pink;
            position: relative;
            overflow: hidden;
        }
        #lbt{
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
        }
        #lbt li{
            float: left;
        }
        .box .disc{
            width: 165px;
            height: 20px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            bottom: 10px;
            left: 50%;
            border-radius: 20px;
            padding: 5px 0 5px 15px;
            margin-left: -60px;
        }
        .disc li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #fff;
            border-radius: 10px;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
            color: #fff;
        }
        .disc li.current{
            background: #fff;
            color: #000;
        }
    </style>
    <script>
        $(function () {
            var timer = setInterval(autoplay,3000);
            var target=0;
            var num=0;
            function autoplay(){
                target-=650;
                num++;
                $("#lbt").animate({"left":target},1000);
                $("#disc").children("ul").children("li:eq("+num+")").addClass("current").siblings().removeClass("current");
                if(target==-5*650){
                    target = 0;
                    $("#lbt").animate({"left":target},0);
                }
                if(num==4){
                    num=-1;
                }
            }
            $("#lbt li").mouseenter(function () {
                clearInterval(timer);
            })
            $("#lbt li").mouseout(function () {
                clearInterval(timer);
                timer = setInterval(autoplay,3000);
            })
        })
    </script>
</head>
<body>
<div class="box">
    <ul id="lbt">
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
    </ul>
    <div class="disc" id="disc">
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
</body>
</html>
图：

图：

技术分享图片

以上是关于11.轮播图（练习）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery轮播图练习

使用jQuery写一个简单的轮播图

jquery轮播图详解，40行代码即可简单解决。

轮播图

web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图

无缝轮播图的一种方式原理