网页吸顶与水平轮播图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/c_l_a_n_n_d/article/details/126284963

这个博客展示了如何创建一个带有吸顶效果的页面布局，并实现水平轮播图。当页面滚动超过一定距离时，顶部元素变为固定位置；同时，通过JavaScript实现了图片轮播功能，用户可以平滑浏览多张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

.box {

width: 1200px;

height: 5000px;

overflow: hidden;

background-color: #ccc;

margin: 0 auto;

}

.top {

position: fixed;

width: 1200px;

height: 0;

background-color: red;

transition: height 1s;

}

#nav {

position: fixed;

width: 40px;

text-align: center;

line-height: 20px;

background-color: aqua;

right: 50%;

margin-right: -640px;

bottom: 100px;

}

.banner {

width: 895px;

height: 520px;

margin: 300px auto 0;

border: 1px #fff solid;

overflow: hidden;

}

img {

vertical-align: middle;

}

</style>

<body>

</div>

</body>

var _top = document.querySelector('.top');

var _nav = document.getElementById('nav');

var timer = null

window.onscroll = function () {

var str = document.documentElement.scrollTop

if (str >= 100) {

_top.style.height = "100px";

} else {

_top.style.height = 0 + "px";

}

_nav.onclick = function () {

clearInterval(timer);

timer = setInterval(() => {

document.documentElement.scrollTop -= 10;

var str = document.documentElement.scrollTop

console.log(str);

if (str === 0) {

clearInterval(timer);

}

}, .1);

}

var _banner = document.querySelector('.banner');

var _img = document.getElementsByTagName('img');

_banner.innerHTML = _banner.innerHTML + _banner.innerHTML;

var timer1 = null;

function autoPlay() {

clearInterval(timer1)

timer1 = setInterval(function () {

_banner.scrollTop++

if (_banner.scrollTop >= _banner.scrollHeight / 2) {

_banner.scrollTop = 0;

}

if (_banner.scrollTop % 519 === 0) {

clearInterval(timer1);

setTimeout(function () {

autoPlay();

}, 1000);

}

}, 1)

}

autoPlay();

_banner.onmouseover = function () {

clearInterval(timer1)

}

_banner.onmouseout = function () {

autoPlay()

}

</script>

</html>

吸顶效果及水平轮播图