图片轮播大全
发布时间：2024年01月21日
案例1：上下轮播切割重组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
font-family: "Sen";
}
* {
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: transparent;
cursor: none;
user-select: none;
-webkit-user-drag: none;
}
#main {
display: flex;
}
#main .part {
flex: 1;
}
#main .part .section {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#main .part .section img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: absolute;
left: var(--x);
pointer-events: none;
}
.cursor {
width: var(--size);
height: var(--size);
border-radius: 50%;
background: white;
position: absolute;
z-index: 999;
pointer-events: none;
mix-blend-mode: difference;
}
.cursor-f {
width: var(--size);
height: var(--size);
position: absolute;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");
background-size: cover;
mix-blend-mode: difference;
pointer-events: none;
opacity: 0.5;
}
.buttons {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.buttons button {
border: none;
background-size: contain;
background: url("data:image/svg+xml,%3Csvg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2' /%3E%3C/svg%3E%0A")
no-repeat;
background-position: center;
width: 10px;
height: 30px;
display: block;
margin: 20px 0;
padding: 0 15px;
transition-duration: 0.6s;
}
.buttons button.next {
transform: scaleY(-1);
}
.buttons button.prev:active {
transform: translateY(8px);
}
.buttons button.next:active {
transform: scaleY(-1) translateY(8px);
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
z-index: 99;
color: white;
text-align: center;
font-size: 2.6em;
mix-blend-mode: overlay;
pointer-events: none;
}
.content {
width: 90%;
position: absolute;
bottom: 20px;
text-align: center;
left: 0;
right: 0;
margin: auto;
color: white;
z-index: 99;
font-size: 0.8em;
}
.content p {
margin: 0.5em auto;
}
.content kbd {
width: 15px;
height: 15px;
border: 1px solid white;
display: inline-block;
border-radius: 3px;
font-size: 0.9em;
vertical-align: text-top;
}
.content a {
color: rgba(227, 227, 227, 0.78);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.content a:hover {
padding-bottom: 1px;
}
</style>
</head>
<body>
<div id="main">
<h1>something</h1>
<div class="content">
<p>
You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe
up/down to navigate. Mouse wheel works too.
</p>
</div>
<div class="buttons">
<button class="next" onclick="go(-1)"></button>
<button class="prev" onclick="go(1)"></button>
</div>
</div>
<script src="gsap.min.js"></script>
<script>
const cols = 3;
const main = document.getElementById("main");
let parts = [];
let images = [
"https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
"https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80",
];
let current = 0;
let playing = false;
for (let i in images) {
new Image().src = images[i];
}
for (let col = 0; col < cols; col++) {
let part = document.createElement("div");
part.className = "part";
let el = document.createElement("div");
el.className = "section";
let img = document.createElement("img");
img.src = images[current];
el.appendChild(img);
part.style.setProperty("--x", (-100 / cols) * col + "vw");
part.appendChild(el);
main.appendChild(part);
parts.push(part);
}
let animOptions = {
duration: 2.3,
ease: Power4.easeInOut,
};
function go(dir) {
if (!playing) {
playing = true;
if (current + dir < 0) current = images.length - 1;
else if (current + dir >= images.length) current = 0;
else current += dir;
function up(part, next) {
part.appendChild(next);
gsap
.to(part, { ...animOptions, y: -window.innerHeight })
.then(function () {
part.children[0].remove();
gsap.to(part, { duration: 0, y: 0 });
});
}
function down(part, next) {
part.prepend(next);
gsap.to(part, { duration: 0, y: -window.innerHeight });
gsap.to(part, { ...animOptions, y: 0 }).then(function () {
part.children[1].remove();
playing = false;
});
}
for (let p in parts) {
let part = parts[p];
let next = document.createElement("div");
next.className = "section";
let img = document.createElement("img");
img.src = images[current];
next.appendChild(img);
if ((p - Math.max(0, dir)) % 2) {
down(part, next);
} else {
up(part, next);
}
}
}
}
window.addEventListener("keydown", function (e) {
if (["ArrowDown", "ArrowRight"].includes(e.key)) {
go(1);
} else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
go(-1);
}
});
function lerp(start, end, amount) {
return (1 - amount) * start + amount * end;
}
const cursor = document.createElement("div");
cursor.className = "cursor";
const cursorF = document.createElement("div");
cursorF.className = "cursor-f";
let cursorX = 0;
let cursorY = 0;
let pageX = 0;
let pageY = 0;
let size = 8;
let sizeF = 36;
let followSpeed = 0.16;
document.body.appendChild(cursor);
document.body.appendChild(cursorF);
if ("ontouchstart" in window) {
cursor.style.display = "none";
cursorF.style.display = "none";
}
cursor.style.setProperty("--size", size + "px");
cursorF.style.setProperty("--size", sizeF + "px");
window.addEventListener("mousemove", function (e) {
pageX = e.clientX;
pageY = e.clientY;
cursor.style.left = e.clientX - size / 2 + "px";
cursor.style.top = e.clientY - size / 2 + "px";
});
function loop() {
cursorX = lerp(cursorX, pageX, followSpeed);
cursorY = lerp(cursorY, pageY, followSpeed);
cursorF.style.top = cursorY - sizeF / 2 + "px";
cursorF.style.left = cursorX - sizeF / 2 + "px";
requestAnimationFrame(loop);
}
loop();
let startY;
let endY;
let clicked = false;
function mousedown(e) {
gsap.to(cursor, { scale: 4.5 });
gsap.to(cursorF, { scale: 0.4 });
clicked = true;
startY =
e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY;
}
function mouseup(e) {
gsap.to(cursor, { scale: 1 });
gsap.to(cursorF, { scale: 1 });
endY = e.clientY || endY;
if (clicked && startY && Math.abs(startY - endY) >= 40) {
go(!Math.min(0, startY - endY) ? 1 : -1);
clicked = false;
startY = null;
endY = null;
}
}
window.addEventListener("mousedown", mousedown, false);
window.addEventListener("touchstart", mousedown, false);
window.addEventListener(
"touchmove",
function (e) {
if (clicked) {
endY = e.touches[0].clientY || e.targetTouches[0].clientY;
}
},
false
);
window.addEventListener("touchend", mouseup, false);
window.addEventListener("mouseup", mouseup, false);
let scrollTimeout;
function wheel(e) {
clearTimeout(scrollTimeout);
setTimeout(function () {
if (e.deltaY < -40) {
go(-1);
} else if (e.deltaY >= 40) {
go(1);
}
});
}
window.addEventListener("mousewheel", wheel, false);
window.addEventListener("wheel", wheel, false);
</script>
</body>
</html>
案例2：左右轮播（传统方式，最常见的一种）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
#slider-container {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#image-slider {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100%;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
cursor: pointer;
color: #333;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.indicator-container {
position: absolute;
bottom: 15px;
padding: 5px 5px;
left: 50%;
transform: translateX(-50%); /* 使用负的50%的平移来实现水平居中 */
width: auto;
height: auto;
border-radius: 7px;
background: rgba(158, 154, 154, 0.7);
display: flex;
justify-content: space-between;
}
.indicator {
width: 8px;
height: 8px;
margin: 0 10px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.indicator.selected {
background-color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<div id="slider-container">
<div id="image-slider">
<div class="slide">
<img
src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV8yIByPqAEBpHxFxY58AAMhuQO39iYAQGk3263.jpg"
alt="Slide 1"
/>
</div>
<div class="slide">
<img
src="https://b.zol-img.com.cn/desk/bizhi/image/11/960x600/1675646737470.jpg"
alt="Slide 2"
/>
</div>
<div class="slide">
<img
src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV-iID9g0AEjGoSWnrl4AAMhvAH0En8ASMa5359.jpg"
alt="Slide 3"
/>
</div>
<!-- Add more slides as needed -->
<div class="slide">
<img
src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/08/0A/ChMkLGPgV8yIByPqAEBpHxFxY58AAMhuQO39iYAQGk3263.jpg"
alt="Slide 1"
/>
</div>
</div>
<div id="prev" onclick="changeSlide(-1)">?</div>
<div id="next" onclick="changeSlide(1)">?</div>
<div class="indicator-container">
<div class="indicator selected" onclick="changeSlideTo(0)"></div>
<div class="indicator" onclick="changeSlideTo(1)"></div>
<div class="indicator" onclick="changeSlideTo(2)"></div>
<!-- Add more indicators as needed -->
</div>
</div>
<script>
let currentSlide = 0; // 当前幻灯片索引
const totalSlides = document.querySelectorAll(".slide").length - 1; // 幻灯片总数（减去克隆的一张）
const slider = document.getElementById("image-slider"); // 幻灯片容器元素
const indicators = document.querySelectorAll(".indicator");
const slidercontainer = document.getElementById("slider-container");
// 切换幻灯片
function changeSlide(direction) {
currentSlide += direction; // 更新当前幻灯片索引
if (currentSlide > totalSlides) {
// 如果当前索引超过最大索引，执行无缝循环
slider.style.transition = "none"; // 去掉过渡效果
currentSlide = 0; // 回到第一张幻灯片
slider.style.transform = "translateX(0)"; // 瞬间移动到第一张的位置
setTimeout(() => {
slider.style.transition = "transform 0.5s ease-in-out"; // 恢复过渡效果
currentSlide += direction; // 更新索引
translateSlider(); // 移动到下一张幻灯片
}, 0);
} else if (currentSlide < 0) {
// 如果当前索引小于0，执行无缝循环
slider.style.transition = "none"; // 去掉过渡效果
currentSlide = totalSlides; // 移动到最后一张幻灯片
slider.style.transform = "translateX(" + -totalSlides * 100 + "%)"; // 瞬间移动到最后一张的位置
setTimeout(() => {
slider.style.transition = "transform 0.5s ease-in-out"; // 恢复过渡效果
currentSlide += direction; // 更新索引
translateSlider(); // 移动到下一张幻灯片
}, 0);
} else {
translateSlider(); // 正常移动到下一张幻灯片
}
}
// 移动到指定位置
function translateSlider() {
const translateValue = -currentSlide * 100 + "%"; // 计算移动距离
slider.style.transform = "translateX(" + translateValue + ")"; // 设置移动
updateIndicators(); // 更新指示器
}
// 移动到指定索引的幻灯片
function changeSlideTo(index) {
currentSlide = index;
translateSlider();
}
// 更新指示器状态
function updateIndicators() {
console.log("------updateIndicators------");
indicators.forEach((indicator, index) => {
console.log(index, currentSlide);
if (index === currentSlide) {
console.log("激活", currentSlide, totalSlides);
}
indicator.classList.toggle("selected", index === currentSlide);
});
// 特殊情况处理，解决：备用image的指示器无法正常更新的问题
// 如果当前是最后一张
if (totalSlides === currentSlide) {
console.log(
"特殊情况处理，解决：备用image的指示器无法正常更新的问题",
totalSlides,
currentSlide
);
indicators[0].classList.toggle("selected");
}
}
// 定义自动切换的时间间隔（单位：毫秒）
const autoSlideInterval = 2000;
// 设置自动切换定时器
var autoSlideTimer = setInterval(() => {
changeSlide(1); // 切换到下一张图片
}, autoSlideInterval);
// 停止自动切换的定时器，当鼠标进入幻灯片区域时停止自动切换
slidercontainer.addEventListener("mouseenter", () => {
console.log("mouseenter-清除定时器");
clearInterval(autoSlideTimer);
});
// 恢复自动切换的定时器，当鼠标离开幻灯片区域时恢复自动切换
slidercontainer.addEventListener("mouseleave", () => {
console.log("mouseleave-增加定时器");
autoSlideTimer = setInterval(() => {
changeSlide(1); // 切换到下一张图片
}, autoSlideInterval);
});
</script>
</body>
</html>
案例3：匀速播放（看实际需求）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
body,
div,
ul,
li,
p {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height: 170px;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
}
#div1 ul li {
float: left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img {
width: 150px;
height: 150px;
}
h1 {
text-align: center;
}
</style>
<body>
<h1>通过控制iSpeed变量控制方向</h1>
<div id="div1">
<ul>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F12f18496-3075-4367-b599-ae390f0e0b37%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=ac9c35bc3241e3c7064bbd6ff0825f26"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F47c3b9ca-945f-4722-be80-ee68f856fc5d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=0b5c2721036e75f2003b57d10d525959"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6061840a2056a61ed620e00200725336"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=7cda4ac6e5655353e36d4754983b95a1"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F600e0252-5aec-4d5f-826b-795848bba7e0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6a46723df4e4c0b70763ca11fb9392bb"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=b9ffce8d28c7e78304d93597d6211bf9"
alt=""
/>
</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = -1;
//复制一遍ul
oUl.innerHTML += oUl.innerHTML;
//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";
function fnMove() {
//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = 0;
}
//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft >= 0) {
//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
//给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
oUl.style.left = oUl.offsetLeft + iSpeed + "px";
}
//从左往右
// iSpeed = -1;
//自动滚动
timer = setInterval(fnMove, 10);
//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
oDiv.onmouseover = function () {
clearInterval(timer);
};
//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
oDiv.onmouseout = function () {
timer = setInterval(fnMove, 10);
};
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无缝滚动_从上往下</title>
</head>
<style>
body,
div,
ul,
li,
p {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
margin: 50px auto;
border: 1px solid black;
width: 170px;
height: 680px;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
}
#div1 ul li {
float: left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img {
width: 150px;
height: 150px;
}
h1 {
text-align: center;
}
</style>
<body>
<h1>通过控制iSpeed变量控制方向</h1>
<div id="div1">
<ul>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F12f18496-3075-4367-b599-ae390f0e0b37%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=ac9c35bc3241e3c7064bbd6ff0825f26"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F47c3b9ca-945f-4722-be80-ee68f856fc5d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=0b5c2721036e75f2003b57d10d525959"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6061840a2056a61ed620e00200725336"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc5f6153c-589f-4b46-a371-705652eeb8ec%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=7cda4ac6e5655353e36d4754983b95a1"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F600e0252-5aec-4d5f-826b-795848bba7e0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=6a46723df4e4c0b70763ca11fb9392bb"
alt=""
/>
</li>
<li>
<img
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708427206&t=b9ffce8d28c7e78304d93597d6211bf9"
alt=""
/>
</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = -1;
//复制一遍ul
oUl.innerHTML += oUl.innerHTML;
//ul的高度是所有li高度之和，复制ul之后的整个ul的高度就是li的长度乘以一个li的高度
oUl.style.height = oLi.length * oLi[0].offsetHeight + "px";
function fnMove() {
//图片向上移动时的条件，即在div里的ul的offsetTop小于一个ul的高度
if (oUl.offsetTop < -oUl.offsetHeight / 2) {
//将整个复制的ul向下拖拽直至整个ul中的第一张图归位到起点
oUl.style.top = 0;
}
//图片向下移动时的条件，即在div里的ul的offsetTop大于等于0
else if (oUl.offsetTop >= 0) {
//将整个复制的ul向上拖拽直至整个ul中的第一张图归位到起点
oUl.style.top = -oUl.offsetHeight / 2 + "px";
}
//给ul一个速度让整个ul的offsetTop增加或减少，速度为正则向下移动，速度为负则向上移动
oUl.style.top = oUl.offsetTop + iSpeed + "px";
}
//自动滚动
timer = setInterval(fnMove, 10);
//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
oDiv.onmouseover = function () {
clearInterval(timer);
};
//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
oDiv.onmouseout = function () {
timer = setInterval(fnMove, 10);
};
};
</script>
</body>
</html>
文章来源:https://blog.csdn.net/qq_34045989/article/details/135733685
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 我们需要练习关爱自己，让自己松弛下来，而练习的方式就是慈心，祝福自己也祝福他人
- ElaticSearch 是如何建立索引的？
- 【RT-DETR有效改进】Google | EfficientNetV1一种超轻量又高效的网络 （附代码 + 添加教程）
- R306指纹识别模块的硬件接口
- 如何将AIDA模型应用到宣传中，媒介盒子揭秘
- css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效
- 利用Rust库从bing抓取各行业企业的官网信息
- 黑客（网络/信息安全）技术自学30天
- 0.2费率微信商户号申请开通
- 《边缘计算》施巍松——第二章读书笔记