轮播图基础版（点击切换图片）

最新推荐文章于 2024-01-18 22:18:01 发布

xsc9310

最新推荐文章于 2024-01-18 22:18:01 发布

阅读量446

点赞数 1

文章标签：前端 html css javascript

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

版权

点击右箭头可以切换下一张图片，点击左箭头可以切换上一张图片，并且图片是无缝衔接的

全部代码

<!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: 6000px;

position: relative;

left: 0px;

transition: left .5s ease 0s;

}

.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>

// 得到按钮和ul，ul整体进行运动

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

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

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

// 克隆第一张图片

var cloneli = list.firstElementChild.cloneNode(true);

list.appendChild(cloneli);

// 当前ul显示到第几张了，从0开始数

var idx = 0;

// 节流锁

var lock = true;

// 右边按钮监听

next.onclick = function () {

// 判断锁的状态

if (!lock) return;

lock = false;

// 给list加过渡，这是因为最后一张图片会把过渡去掉

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

idx++;

if (idx > 4) {

// 设置一个延时器，延时器的功能就是将ul瞬间拉回0的位置

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;

// 判断是不是第0张，如果是，就要瞬间用假的替换真的

if (idx == 0) {

// 取消掉过渡，因为要的是瞬间移动

list.style.transition = 'none';

// 直接瞬间移动到最后的假图片上

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

// 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上

setTimeout(function () {

// 加过渡

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

// idx改为真正的最后一张

idx = 4;

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

}, 0);

} else {

idx--;

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

}

// 函数节流

setTimeout(function () {

lock = true;

}, 500);

}

</script>

</body>

</html>

xsc9310

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
轮播图基础版（点击切换图片）

基础版轮播图，点击实现图片切换
复制链接

扫一扫