<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body,
html {
height: 100%;
}
#carousel {
position: relative;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="carousel">
<div class="carousel_inner">
<img src="enter/001.jpg">
<img src="enter/002.jpg">
<img src="enter/003.jpg">
<img src="enter/004.jpg">
</div>
</div>
<script>
var carousel = document.getElementById('carousel');
var inner = document.querySelector('.carousel_inner');
var indexTimer = speedTimer = null;
var index = 0;
var direction = 'left';
var imgtime = 1000;
var speed = 0;
basic_css(`
* {
margin: 0;
padding: 0;
}
/* carousel的宽度高度可以动态设置,因为所以的宽度高度都是根据他所设置所以设置之后,所有的元素大小都会随之改变*/
#carousel {
position: relative;
left: 0;
right: 0;
width: 100px;
height: 100px;
/* overflow: hidden;*/
}
.carousel_inner {
position: absolute;
height: 100%;
}
img {
display: block;
float: left;
}`);
inner.innerHTML += inner.innerHTML;
var img = document.querySelectorAll('.carousel_inner img');
inner.style.width = carousel.offsetWidth * img.length + 'px';
for (var i = 0; i < img.length; i++) {
img[i].style.width = carousel.offsetWidth + 'px';
img[i].style.height = carousel.offsetHeight + 'px';
}
window.addEventListener('resize', function () {
inner.style.width = carousel.offsetWidth * 6 + 'px';
for (var i = 0; i < img.length; i++) {
img[i].style.width = carousel.offsetWidth + 'px';
img[i].style.height = carousel.offsetHeight + 'px';
}
})
indexTimer = setInterval(indexFn, imgtime);
function indexFn() {
if (direction == 'left') {
speed = -10;
if (index == img.length / 2) {
inner.style.left = 0;
index = 1;
} else {
index++;
}
} else {
speed = 10;
if (index == 0) {
inner.style.left = -inner.offsetWidth / 2 + 'px';
index = 2
} else {
index--;
}
}
moveStart(-index * img[0].offsetWidth)
}
function moveStart(target) {
clearInterval(speedTimer);
speedTimer = setInterval(function () {
if (Math.abs(target - inner.offsetLeft) < 10) {
clearInterval(speedTimer);
} else {
inner.style.left = inner.offsetLeft + speed + 'px';
}
}, 10)
}
function basic_css(cssText) {
var style = document.createElement('style');
var head = document.head || document.getElementsByTagName('head')[0];
style.type = 'text/css';
if (style.styleSheet) {
var func = function () {
try {
style.styleSheet.cssText = cssText;
} catch (e) {
}
}
if (style.styleSheet.disabled) {
setTimeout(func, 10);
} else {
func();
}
} else {
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
if (head.children[0]) {
head.insertBefore(style, head.children[0]);
} else {
head.appendChild(style);
}
}
</script>
</body>
</html>
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签