3.轮播图
3.1轮播图-交互
-
问题1 最后一张切换到第一张的时候 会倒着移动
-
分析原因:最后一张图到第一张图 是left值-2400px 到 0px的过程 就有倒叙效果
-
解决方法:在最后再添加第一张图片 给用户造成视觉差
-
-
问题2:最后一张图片的指示点对应不上
-
分析原因: n = 4 oSpan[4]不存在
-
解决方法:n=4是第一张图片 让oSpan[0]设置背景色
-
<script> // 1.自动切换 定时器 var list = document.getElementsByClassName("list")[0]; var oSpan = document.getElementsByTagName("span"); var oBox = document.getElementsByClassName("box")[0]; var timer = setInterval(auto, 1000); var n = 0; function auto() { // 显示第一张 left -800px*0 // 显示第二张 left -800px*1 // 显示第三张 left -800px*2 // 显示第四张 left -800px*3 // 显示第一张 left -800px*4 n++; if (n > 4) { list.style.left = "0px"; n = 1; } move(list, "left", 100, -800 * n); /* 问题1 最后一张切换到第一张的时候 会倒着移动 解决方法:在最后再添加第一张图片 给用户造成视觉差 */ // 改变指示点颜色 for (var i = 0; i < oSpan.length; i++) { oSpan[i].style.backgroundColor = "#fff"; } /* 问题2:最后一张图片的指示点对应不上 分析原因:n = 4 oSpan[4]不存在 解决方法:n=4是第一张图片 让第一个指示显示 */ if (n == 4) { oSpan[0].style.backgroundColor = "red" } else {// n= 1 2 3 让对应span显示红色背景 // 第一张图 oSpan[0] 第二章图 oSpan[1] oSpan[n].style.backgroundColor = "red"; } } // 2.划入盒子 停止图片切换 oBox.onmouseover = function () { clearInterval(timer); } // 3.滑出盒子 开启图片切换 oBox.onmouseout = function () { timer = setInterval(auto, 1000) } // 4.点击左箭头 切换图片 // 5.点击右箭头 切换图片 // 6.点击指示点 切换图片 </script>