前端入门篇（四十八）JS应用3自动切换焦点图问题记录

css代码：

注意设置show时，如果不写#right .show，样式不生效，前置#right ，权重与前面的#right img一致，就会生效

效果：

[](()2.在左半部分加一个外框的效果，点击到哪个小图，就会有一个外框图片

---

html代码：

css代码：

.box {

position: relative;

}

#pointer {

position: absolute;

top: 0;

left: 0;

margin-top: 4px;

}

效果：

（所以何时用position，何时用浮动呢？

需要依赖某个元素，并且需要用到像素做位置调整时，用position，通常是某个部分的左上角或右下角这样的位置

先记录一下，回去看之前的知识）

[](()3.鼠标移动时，切换右侧图片

---

js代码：

效果：第一张图被外框图片挡住了，只有鼠标在没有挡住的地方上空时，才会切换到第一张图

[](()4.鼠标移动时，外框图片也跟着移动

---

在console上试出外框图片可以通过修改top值来移动位置，控制top在0-165px即可

js代码：

var pointer = document.getElementById(‘pointer’);

[](()5.让外框图片自动从上往下移动

---

var pointer = document.getElementById(‘pointer’);

var Top = 165;

var nowTop = 0;

var speed = 4;

var moveLoop = setInterval(moveFunc, 100);

function moveFunc(){

if (nowTop < Top){

nowTop += speed;

if (nowTop >= Top){

nowTop = 165;

clearInterval(moveLoop);

}

pointer.style.top = nowTop + ‘px’;

}

if (nowTop == Top){

clearInterval(moveLoop);

pointer.style.top = nowTop + ‘px’;

}

}

效果：

[](()6.让外框图片自动从下往上移动

---

var pointer = document.getElementById(‘pointer’);

var Top = 0;

var nowTop = 165;

var speed = 4;

var moveLoop = setInterval(moveFunc, 100);

function moveFunc(){

if (nowTop < Top){

nowTop += speed;

if (nowTop >= Top){

nowTop = 165;

clearInterval(moveLoop);