极客观点
项目管理
HarmonyOS
用开发者模式看过了，但是还是不知道是如何实现的。
知道的只有这些：
1.所有图片放到一个div中，div position：absolute，div overflow：hidden，所有图片float：left。控制left，来进行右移。
2.表面上看轮播图片有5张，1，2，3，4，5.
3.实际div中有7张图片，dom排列顺序为，5，1，2，3，4，5，1
求大神解答啊！
淘宝首页的图片无缝轮播是如何实现的
阅读 8.7k
guangpunba
5.4k42754
大致就是6张图片1，2,3,4,5,1，当到达第五张开始切换，第六张作为缓冲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 600px;
height: 350px;
position: relative;
overflow: hidden;
margin: 20px auto;
}
#ball {
width: 4200px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#ball li {
width: 600px;
line-height: 350px;
float: left;
text-align: center;
font-size: 50px;
}
#btn {
width: 180px;
overflow: hidden;
position: absolute;
right: 20px;
bottom: 20px;
}
#btn li {
width: 20px;
height: 20px;
margin-right: 10px;
float: left;
background: #ffffff;
opacity: 0.2;
border-radius: 50%;
}
#box h3 {
position: absolute;
font-size: 40px;
padding: 10px 5px;
color: #ffffff;
background: rgba(0, 0, 0, 0.4);
top: 50%;
margin-top: -30px;
cursor: pointer;
display: none;
opacity: 0;
}
#prev {
left: 0;
}
#next {
right: 0;
}
</style>
</head>
<body>
<div id="box">
<ul id="ball">
<li style="background:red;">1</li>
<li style="background:blue;">2</li>
<li style="background:#d6fc0a;">3</li>
<li style="background:pink;">4</li>
<li style="background:green;">5</li>
<li style="background:yellow;">6</li>
<li style="background:red;">1</li>
</ul>
<ul id="btn">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h3 id="prev"><</h3>
<h3 id="next">></h3>
</div>
</body>
<script>
var box = document.getElementById('box');
var ball = document.getElementById('ball');
var btns = document.getElementById('btn').getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var flag = true;
var l = 0;
//设置第一个焦点高亮
btns[0].style.opacity = '0.9';
//自动轮播
var timer = setTimeout(scroll, 1000);
//自动轮播函数
function scroll() {
l -= 600;
//判断是否滚到最后一张
if (l == -4200) {
l = -600;
ball.style.left = 0;
}
//大图调用运动函数
move.speedDown({
dom: ball,
attr: {
left: l
},
step: 10,
callback: function () {
//设置循环
if (flag == true) {
clearTimeout(timer)
timer = setTimeout(scroll, 1000);
}
}
})
//焦点切换
//所有焦点非高亮
for (var i = 0; i < btns.length; i++) {
btns[i].style.opacity = '0.2';
}
//判断大图是否走到最后一张
if (-l / 600 == 6) {
btns[0].style.opacity = '0.9';
}
//当前位置焦点高亮
if (btns[-l / 600]) {
btns[-l / 600].style.opacity = '0.9';
}
}
//点击切换
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onmouseover = function () {
//停止自动轮播
clearTimeout(timer);
//保证轮播从当前位置开始
l = this.index * -600;
//设置焦点高亮
for (var i = 0; i < btns.length; i++) {
btns[i].style.opacity = '0.2';
}
this.style.opacity = '0.9';
//调用运动函数，大图切换
move.speedDown({
dom: ball,
attr: {
left: this.index * -600
},
step: 10
})
}
}
//滑入停止
box.onmouseover = function () {
flag = false;
clearTimeout(timer)
prev.style.display = 'block';
next.style.display = 'block';
move.speedDown({
dom: prev,
attr: {
opacity: 100
},
step: 100
})
move.speedDown({
dom: next,
attr: {
opacity: 100
},
step: 100
})
}
//滑出循环轮播
box.onmouseout = function () {
timer = setTimeout(scroll, 1000);
flag = true;
move.speedDown({
dom: prev,
attr: {
opacity: 0
},
step: 100,
callback: function () {
prev.style.display = 'none';
}
})
move.speedDown({
dom: next,
attr: {
opacity: 0
},
step: 100,
callback: function () {
next.style.display = 'none';
}
})
}
//返回上一张
prev.onclick = function () {
l += 600;
if (l > 0) {
l = -3000;
ball.style.left = -3600 + 'px';
}
move.speedDown({
dom: ball,
attr: {
left: l
},
step: 10
})
//焦点切换
//所有焦点非高亮
for (var i = 0; i < btns.length; i++) {
btns[i].style.opacity = '0.2';
}
//判断大图是否走到最后一张
if (-l / 600 == 6) {
btns[0].style.opacity = '0.9';
}
//当前位置焦点高亮
if (btns[-l / 600]) {
btns[-l / 600].style.opacity = '0.9';
}
//阻止文本被选中
this.onselectstart = function () {
return false;
}
}
//前进到下一张
next.onclick = function () {
l -= 600;
if (l == -4200) {
l = -600;
ball.style.left = 0 + 'px';
}
move.speedDown({
dom: ball,
attr: {
left: l
},
step: 10
})
//焦点切换
//所有焦点非高亮
for (var i = 0; i < btns.length; i++) {
btns[i].style.opacity = '0.2';
}
//判断大图是否走到最后一张
if (-l / 600 == 6) {
btns[0].style.opacity = '0.9';
}
//当前位置焦点高亮
if (btns[-l / 600]) {
btns[-l / 600].style.opacity = '0.9';
}
//阻止文本被选中
this.onselectstart = function () {
return false;
}
}
/*move.speedDown({
dom: div, //设置运动的元素
attr: 'width', //设置变化的属性
end: 600, //设置变化的终点
step: 40, //步数
callback: function () { //回调函数
self.style.background = "blue";
}
})*/
var move = {
//获取元素样式
getStyle: function (obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj, false)[attr];
},
//缓冲运动
speedDown: function (opt) {
//保存this
var self = this;
//清除已有计时器
clearInterval(opt.dom.timer);
//添加计时器
opt.dom.timer = setInterval(function () {
//假设动画结束
opt.dom.isMove = true;
for (key in opt.attr) {
if (key == 'opacity') {
var start = parseFloat(self.getStyle(opt.dom, key)) * 100;
} else {
var start = parseFloat(self.getStyle(opt.dom, key));
}
var len = ((opt.attr[key] - start) / opt.step) > 0 ? Math.ceil((opt.attr[key] - start) / opt.step) : Math.floor((opt.attr[key] - start) / opt.step);
if (start != opt.attr[key]) {
if (key == 'opacity') {
//关闭动画结束的开关
opt.dom.isMove = false;
opt.dom.style.opacity = (start + len) / 100;
opt.dom.style.filter = 'alpha(opacity=' + parseFloat(start + len) + ')';
} else {
//关闭动画结束的开关
opt.dom.isMove = false;
opt.dom.style[key] = (start + len) + 'px';
}
}
//判断是否结束动画
if (opt.dom.isMove) {
clearInterval(opt.dom.timer);
opt.callback ? opt.callback() : null;
}
}
}, 10)
}
}
</script>
</html>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.1k 阅读
为什么在谷歌浏览器中 'a' == ['a'] 返回 true？
'a' == ['a'] 谷歌浏览器返回了true 是为什么16 回答3k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.8k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.1k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.7k 阅读✓ 已解决
纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？
纯css绘制倒过来的等腰梯形的样式。而且可以把梯形的背景色调整为无色。可以接受复杂代码（比如布局复杂，单个div单个css样式是无法完成，需要多个div搭配多个样式），但是至少满足以下要求（1）可以调整边框的颜色大小粗细等，（2）可以调整边框内外阴影（3）梯形里面还能放文字3 回答5.1k 阅读✓ 已解决
请问zustand的slice里面的属性，如何配置TypeScript类型约束？
参考：官方文档 zustand slice {代码...} 请问应该如何定义slice呢？（需要结合TypeScript的类型）尝试都报错： {代码...} ===store/index.ts为： {代码...}3 回答1.9k 阅读✓ 已解决