轮播图升级版（自动切换图片）

最新推荐文章于 2024-07-20 21:01:09 发布

xsc9310

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量100

点赞数 1

文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/qq_52710895/article/details/131450929

版权

使用HTML5+CSS3+JavaScript实现轮播图，可点击切换图片，也可自动切换图片（0.5秒切换一次），图片自动衔接

代码实现：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.box {

width: 650px;

height: 360px;

border: 1px solid #000;

margin: 50px auto;

overflow: hidden;

position: relative;

}

.box ul {

list-style: none;

width: 5000px;

position: relative;

}

.box ul li {

float: left;

}

.box .last {

position: absolute;

left: 20px;

top: 50%;

margin-top: -25px;

width: 50px;

height: 50px;

background: url(images/icons.png) no-repeat -21px -94px;

}

.box .next {

position: absolute;

right: 20px;

top: 50%;

margin-top: -25px;

width: 50px;

height: 50px;

background: url(images/icons.png) no-repeat -21px -29px;

}

</style>

</head>

<body>

</ul>

</div>

var box = document.getElementById('box');

var list = document.getElementById('list');

list.innerHTML += list.innerHTML;

var left = 0;

var idx = 0;

var timer;

move();

var lock = true;

function move() {

clearInterval(timer);

timer = setInterval(function () {

left -= 650;

if (left <= -3250) {

left = 0;

}

list.style.left = left + 'px';

}, 1000);

}

box.onmouseenter = function () {

clearInterval(timer);

next.onclick = function () {

if (!lock) return;

lock = false;

list.style.transition = 'left 0s ease 0s';

idx++;

if (idx > 4) {

setTimeout(function () {

list.style.transition = 'none';

list.style.left = 0;

idx = 0;

}, 500);

}

list.style.left = -idx * 650 + 'px';

// 函数节流

setTimeout(function () {

lock = true;

}, 500);

}

last.onclick = function () {

if (!lock) return;

lock = false;

if (idx == 0) {

list.style.transition = 'none';

list.style.left = -5 * 650 + 'px';

setTimeout(function () {

list.style.transition = 'left 0s ease 0s';

idx = 4;

list.style.left = -idx * 650 + 'px';

}, 0);

} else {

idx--;

list.style.left = -idx * 650 + 'px';

}

// 函数节流

setTimeout(function () {

lock = true;

}, 500);

}

box.onmouseleave = function () {

move();

}

</script>

</body>

</html>

xsc9310

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
轮播图升级版（自动切换图片）

轮播图升级版，自动切换图片
复制链接

扫一扫

轮播图升级版（自动切换图片）

“相关推荐”对你有帮助么？