帮我写个简单的图形滑块验证码代码吧，类似腾讯的滑块验证码

好的，以下是一个简单的图形滑块验证码的代码实现：

HTML部分：

<div class="captcha-container">
    <div class="captcha-bg"></div>
    <div class="captcha-slider"></div>
</div>

CSS部分：

.captcha-container {
    position: relative;
    width: 300px;
    height: 150px;
    margin: 0 auto;
}

.captcha-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 150px;
    background-image: url('captcha-bg.jpg'); /* 背景图 */
    background-size: cover;
    z-index: 1;
}

.captcha-slider {
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    background-image: url('captcha-slider.png'); /* 滑块图 */
    background-size: cover;
    z-index: 2;
    cursor: pointer;
    transition: left .2s;
}

JavaScript部分：

var slider = document.querySelector('.captcha-slider');
var container = document.querySelector('.captcha-container');
var startX = 0;
var moveX = 0;
var isDown = false;

slider.addEventListener('mousedown', function(e) {
    isDown = true;
    startX = e.clientX - slider.offsetLeft;
    container.classList.add('slider-active');
});

document.addEventListener('mousemove', function(e) {
    if (!isDown) return;
    e.preventDefault();
    moveX = e.clientX - startX;
    if (moveX < 0) moveX = 0;
    if (moveX > container.offsetWidth - slider.offsetWidth) {
        moveX = container.offsetWidth - slider.offsetWidth;
        // 验证码验证成功的逻辑
        alert('验证码验证成功！');
    }
    slider.style.left = moveX + 'px';
});

document.addEventListener('mouseup', function() {
    isDown = false;
    container.classList.remove('slider-active');
    slider.style.left = 0;
});

这段代码实现了一个简单的滑块验证码，用户需要按住滑块，拖动到滑块底部，才能通过验证。当滑块到达底部时，会弹出提示框，说明验证码验证成功。