轮播图

轮播图说明:利用html+css+jquery实现定时轮播播放和点击小圆圈自动切换图片。

注：img里面的图标连接地址是本地地址，如果需要更换图片地址

 

1、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="/CSS/new_css/轮播图.css">
    <script type="text/javascript" src="/JavaScript/new/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/JavaScript/new/轮播图.js"></script>
</head>
<body>
<div id="picture">
    <div class="image">
        <img src="/image/image01.jpg">
        <img src="/image/image02.jpg">
        <img src="/image/image04.jpg">
        <img src="/image/image05.jpg">
    </div>
    <div class="origin">
        <ul id="origin-ul"></ul>
    </div>
</div>
</body>
</html>

 

2、css代码

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: oldlace;
}

#picture {
    width: 1000px;
    height: 510px;
    margin: 0 auto;
    position: relative;
}

#picture .image img {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

ul li {
    list-style: none;
}

/*对li标签实现小圆圈操作*/
#picture .origin #origin-ul li {
    float: left;
    width: 10px;
    height: 10px;
    background-color: whitesmoke;
    margin-left: 10px;
    border-radius: 5px;
    opacity: 0.5;
    cursor: pointer;
}

#origin-ul {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

 

3、jQuery代码

/**
 * Created by Administrator on 2020/11/26.
 */
$(function () {
    
    // 根据图片数量动态添加li标签,使css生成小圆圈图标
    var imgLen = $('#picture .image img');
    $(function () {
        for (var i = 0; i < imgLen.length; i++) {
            $('.origin ul').append('<li></li>');
        }

        $('.image img:first').css('display', 'block');
        $('.origin ul li:first').css('backgroundColor', 'orangered');
    });
    
    // 实现图片切换
    function slideShow(num) {
        $('.image img').eq(num).css('display', 'block').siblings().css('display', 'none');
        $('.origin ul li').eq(num).css('backgroundColor', 'orangered').siblings().css('backgroundColor', 'whitesmoke');
        index++;
        if (num === imgLen.length) {
            index = 0;
        }
    }

    var index = 0;
    var timer;
    startInter();
    
    // 定时器设置
    function startInter() {
        timer = setInterval(function () {
            slideShow(index)
        }, 2000);
    }

    // 实现鼠标滑动到圆圈上面自动切换和清除定时器
    $('#picture').on('mouseenter', '.origin ul li', function () {
        clearInterval(timer);
        index = $(this).index();
        slideShow(index);
    });
    
    // 鼠标移开恢复定时器自动轮播
    $('#picture').on('mouseleave', '.origin ul li', function () {
        startInter()
    })

});

 

posted @ 2020-11-26 17:17  点点滴滴的努力  阅读(95)  评论(0)    收藏  举报