用javascript写一个移动广告网页

好的，我可以为您提供一些基本的代码，您可以根据您自己的需要和设计进行调整。

首先，您需要编写HTML和CSS代码来设置网页的基本布局和样式。然后，您可以添加以下JavaScript代码来实现移动广告的轮播效果：

HTML代码：

<div class="ad-container">
  <div class="ad-images">
    <img src="ad1.jpg">
    <img src="ad2.jpg">
    <img src="ad3.jpg">
  </div>
  <div class="ad-buttons">
    <button class="active"></button>
    <button></button>
    <button></button>
  </div>
</div>

CSS代码：

/* set container size and position */
.ad-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden; /* hide overflowing content */
}

/* style the ad images */
.ad-images {
    position: absolute;
    width: 300%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    transition: transform 0.5s ease-in-out; /* add a transition effect */
}

.ad-images img {
    width: 33.333%;
    height: 100%;
}

/* style the buttons */
.ad-buttons {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.ad-buttons button {
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: transparent;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.ad-buttons button.active {
    background-color: #ccc;
}

JavaScript代码：

// get elements
const container = document.querySelector('.ad-container');
const images = document.querySelector('.ad-images');
const buttons = document.querySelectorAll('.ad-buttons button');

// set slideshow properties
let slideIndex = 1;
let interval = setInterval(() => {
    slideIndex++;
    showSlide(slideIndex);
}, 2000);

// show slide function
function showSlide(n) {
    let shiftAmount = -100 * (n - 1);
    images.style.transform = `translateX(${shiftAmount}%)`;
    if (n < 1) {
        slideIndex = images.childElementCount - 3;
    } else if (n > images.childElementCount - 3) {
        slideIndex = 1;
    }
    // update active button
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.remove('active');
    }
    buttons[slideIndex - 1].classList.add('active');
}

// add button click event listeners
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', () => {
        clearInterval(interval);
        slideIndex = i + 1;
        showSlide(slideIndex);
        interval = setInterval(() => {
            slideIndex++;
            showSlide(slideIndex);
        }, 2000);
    });
}

// pause slideshow when container is hovered
container.addEventListener('mouseover', () => {
    clearInterval(interval);
});

container.addEventListener('mouseout', () => {
    interval = setInterval(() => {
        slideIndex++;
        showSlide(slideIndex);
    }, 2000);
});

这段JavaScript代码使用了 setInterval() 方法来在页面中不断轮播移动广告。每次调用 showSlide() 函数，它会通过 CSS 的 transform 属性来移动广告图片容器的位置，以此实现轮播效果。此外，当用户点击广告按钮时，它会停止自动轮播并立即切换到指定的广告图片。

希望这可以帮助到您！