示例网站主页

欢迎来到示例网站

这是一个演示网站，用于展示一些基本的前端技术和实现效果。我们努力让它看起来不那么丑，希望你会喜欢它。

技术栈

• HTML5
• CSS3
• JavaScript

实现效果

顶部菜单导航

我们为网站添加了一个顶部菜单导航，使得用户可以方便地浏览整个网站。代码如下：

<nav class="navbar">
    <ul class="nav-list">
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

图片轮播

我们在网站的首页添加了一个图片轮播，用于展示一些最新的产品或活动。代码如下：

<div class="slideshow">
    <img src="img/slide1.jpg" alt="Slide 1">
    <img src="img/slide2.jpg" alt="Slide 2">
    <img src="img/slide3.jpg" alt="Slide 3">
</div>

var slideshow = $('.slideshow'),
    slides = slideshow.find('img'),
    currentIndex = 0;

setInterval(function() {
    // 显示下一张图片
    var nextIndex = (currentIndex + 1) % slides.length;
    $(slides[nextIndex]).fadeIn();
    $(slides[currentIndex]).fadeOut();
    currentIndex = nextIndex;
}, 5000);

表单验证

我们在网站的联系页面添加了一个表单，通过 JavaScript 实现了表单验证功能，使得用户输入的信息更加安全和规范。代码如下：

<form id="contact-form">
    <div class="form-group">
        <label for="name-input">姓名</label>
        <input type="text" id="name-input" name="name">
        <p class="error-message" id="name-error">请输入您的姓名</p>
    </div>
    <div class="form-group">
        <label for="email-input">邮箱</label>
        <input type="email" id="email-input" name="email">
        <p class="error-message" id="email-error">请输入正确的邮箱地址</p>
    </div>
    <div class="form-group">
        <label for="message-input">留言</label>
        <textarea id="message-input" name="message"></textarea>
        <p class="error-message" id="message-error">请输入您的留言</p>
    </div>
    <button type="submit">提交</button>
</form>

var contactForm = $('#contact-form');

contactForm.on('submit', function(event) {
    event.preventDefault();

    // 验证表单
    var name = $('#name-input').val(),
        email = $('#email-input').val(),
        message = $('#message-input').val(),
        hasError = false;

    if (!name) {
        $('#name-error').show();
        hasError = true;
    } else {
        $('#name-error').hide();
    }

    if (!email) {
        $('#email-error').show();
        hasError = true;
    } else if (!/\S+@\S+\.\S+/.test(email)) {
        $('#email-error').text('请输入正确的邮箱地址').show();
        hasError = true;
    } else {
        $('#email-error').hide();
    }

    if (!message) {
        $('#message-error').show();
        hasError = true;
    } else {
        $('#message-error').hide();
    }

    if (!hasError) {
        // 提交表单
        $.post(contactForm.attr('action'), {name: name, email: email, message: message}, function() {
            alert('提交成功');
        });
    }
});

结尾

感谢你参观我们的示例网站。如果你对网站有任何建议或反馈，请不要犹豫地联系我们。