小米商城轮播图

最新推荐文章于 2023-09-03 21:42:30 发布

zxkzhang

最新推荐文章于 2023-09-03 21:42:30 发布

阅读量1.2k

点赞数 2

分类专栏：实例代码

本文链接：https://blog.youkuaiyun.com/zxkzhang/article/details/100528228

版权

实例代码专栏收录该内容

16 篇文章

订阅专栏

要求

1.自动播放
2.鼠标移入暂停播放,鼠标移除回复播放
3.点击左右箭头鼠标,切换图片
4.点击右下方源点,切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="js/jquery-3.4.0.js"></script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #box{
            height: 460px;
            width: 1226px;
            margin: 30px auto;
            position: relative;
        }
        #box .img{
            list-style: none;
        }
        #box .img li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #box .left{
            width: 41px;
            height: 69px;
            position: absolute;
            left:20px;
            top:195px;
            background-image: url("images/icon-slides.png");
            background-position: -83px 0;
        }
        #box .right{
            width: 41px;
            height: 69px;
            position: absolute;
            right:20px;
            top:195px;
            background-image: url("images/icon-slides.png");
            background-position: -124px 0;
        }
        #box .left:hover{
            background-position: 0 0;
        }
        #box .right:hover{
            background-position: -42px 0;
        }
        #box .focus{
            width: 250px;
            height: 20px;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        #box .focus span{
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: gray;
            margin-left: 15px;
        }
        #box .focus .content{
            background-color: gainsboro;
        }
    </style>

    <script>
        $(function () {
            function changeImg(num) {
                $(".img li").eq(num).fadeIn().siblings().fadeOut();
                $(".focus span").eq(num).addClass("content").siblings().removeClass("content");
            }

            var num = 0;
            //1、实现自动播放
            var timer = 0;
            function autoPlay() {
                timer =  setInterval(function () {
                    num++;
                    num = (num == 7 ? 0 : num);
                    /*num = (num==7?0:num);*/
                    changeImg(num)
                },2000)
            }
            autoPlay();
            $("#box").mouseenter(function () {
                clearInterval(timer);
            }).mouseleave(function () {
                clearInterval(timer);
                autoPlay();
            })

            //4、点击左右的箭头，切换图片
            $("#box .left").click(function () {
                num--;
                num = num == -1 ? 6 : num;
                changeImg(num);
            })
            $("#box .right").click(function () {
                num++;
                num = num == 7 ? 0 : num;
                changeImg(num);
            })
            $("#box .focus span").click(function () {
                num = $(this).index();
                changeImg(num);
            })
        })
    </script>
</head>
<body>
    <div id="box">
            <ul class="img">
                <li  style=" display:block;"><img src="images/ban01.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban02.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban03.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban04.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban05.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban06.jpg" height="460" width="1226"/></li>
                <li><img src="images/ban07.jpg" height="460" width="1226"/></li>
            </ul>
        <a class="left"></a>
        <a class="right"></a>
        <div class="focus">
            <span class="content" ></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述