我对之前请教的轮播图还有一部分不太理解，希望老师答疑解惑，有的是讲过，可是还是有点混乱
if(index==0){//确定图片的索引
index=length-1;
hezi.style.left=-index * imgWidth + "px";
}
index--;
if (index == len - 1) {//确定图片的索引
index = 0;
wrap.style.left = 0 + "px";
}
index++;
这两个按钮确定索引的时候，为什么要left，有什么效果？
能不能从索引的角度分析一下，因添加一张图片导致我非常混乱，希望老师帮我捋一捋
for(var d=0;d<navneirong.length;d++){
if(d==index){
navneirong[d].className="bg";
}else{
navneirong[d].className="";
}
if(index==img.length-1){navneirong[0].className="bg";}
//添加一个判断，
}
这段话是老师添加的，为什么删除就没有效果？
for(var j=0;j<navneirong.length;j++){//切换按钮
navneirong[j].className="";
img[j].className="hide";
};
img[index].className="";
navneirong[index].className="bg";
是不是二者功能是重复的？
if(panduan){
juli-=40;
}else{
juli+=40;
}
if (panduan ? juli > target : juli < target) {
hezi.style.left = juli + "px"; //如果当前位置不是在目标位置则进行位置处理
} else {
clearInterval(timer);
hezi.style.left = target + "px";
}
老师这段代码，还是有点蒙，我觉得不需要hezi.style.left = target + "px";，为什么不能直接移动距离hezi.style.left = juli + "px";？
另，我的代码有一个问题，右按钮移动到第一张图片的时候，导航条不显示
全部代码：
<!doctype html>
<html><head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>轮播图</title>
</head>
<body>
<div id="menu">
<div id="nav">
<div class="bg">首页</div>
<div>点击查看</div>
<div>会自动的</div>
<div>我的网站</div>
</div>
<div id="banner">
<div id="hezi">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="button">
<div></div>
<div></div>
</div>
</div>
</body>
<script>
window.onload=function(){
//封装查找节点的函数
function id(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var menu=id("menu"),//最外面的盒子
nav=id("nav"),//导航条
navneirong=nav.getElementsByTagName("div"),
banner=id("banner"),//图片
hezi=id("hezi"),//移动的盒子
img=hezi.getElementsByTagName("div"),
imgWidth=img[0].offsetWidth,//图片的宽度
length=img.length,//图片的个数
button=id("button").getElementsByTagName("div"),//按钮
timer=null,
timer2=null,
index=0;
//封装创建事件的函数
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, true);
}
else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
}
else {
element['on' + type] = handler;
}
}
//利用定时器封装滑动效果的函数
function donghua(){
clearInterval(timer);//先清除定时器
timer=setInterval(function(){
var juli=hezi.offsetLeft;
var target=-index * imgWidth;
var panduan=juli > target ? true : false;
//主要是这段代码不理解，为什么juli-=10;？逻辑分析一下？而且肯定有问题
if(panduan){
juli-=40;
}else{
juli+=40;
}
if (panduan ? juli > target : juli < target) {
hezi.style.left = juli + "px"; //如果当前位置不是在目标位置则进行位置处理
} else {
clearInterval(timer);
hezi.style.left = target + "px";
}/**/
},10);
}
//封装自动轮播的效果的函数
function dingshiqi(){
timer2=setInterval(function(){
index++;
if(index>3){index=0;}
donghua();
},3000);
}
//封装解除自动轮播的函数
function qingchu(){
if(timer2){clearInterval(timer2);}
}
//给向左移动的按钮添加事件
addHandler(button[1],"click",function(){
if(index==0){//确定图片的索引
index=length-1;
hezi.style.left=-index * imgWidth + "px";
}
index--;
donghua();
for(var j=0;j<navneirong.length;j++){//改变导航条
navneirong[j].className="";
};
navneirong[index].className="bg";
});
//给向右移动的按钮添加事件
addHandler(button[0],"click",function(){
if (index == len - 1) {//确定图片的索引
index = 0;
hezi.style.left = 0 + "px";
navneirong[0].className="bg";
}
index++;
donghua();
for(var j=0;j<navneirong.length;j++){//改变导航条
navneirong[j].className="";
};
navneirong[index].className="bg";
});
//给导航条添加事件
for(var i=0,len=img.length;i<len-1;i++){
navneirong[i].id=i;
addHandler(navneirong[i],"click",function(){
index=this.id;
for(var j=0;j<navneirong.length;j++){//切换按钮
navneirong[j].className="";
img[j].className="hide";
};
img[index].className="";
navneirong[index].className="bg";
for(var d=0;d<navneirong.length;d++){
if(d==index){
navneirong[d].className="bg";
}else{
navneirong[d].className="";
}
if(index==img.length-1){navneirong[0].className="bg";}
//添加一个判断，
}
});
}
//添加自动轮播事件
dingshiqi();
addHandler(menu,"mouseover",qingchu);
addHandler(menu,"mouseout",dingshiqi);
}
</script>
</html>@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
#menu{width: 1200px;height: 500px;margin: 0 auto;position: relative;}
#nav{width: 100%;height: 38px;line-height: 38px;font-size: 18px;overflow: hidden;color: #666;font-weight: 700;}
#nav div{float: left;width: 25%;text-align: center;cursor: pointer;}
#banner{overflow: hidden;width: 1200px;height: 460px;position: relative;}
#hezi{overflow: hidden;width: 6000px;position: relative;}
#hezi div{width: 1200px;height: 460px;float: left;}
#banner #hezi div:first-of-type,#banner #hezi div:last-of-type{
background-image: url("../img/1.jpg");background-repeat: no-repeat;}
#banner #hezi div:nth-of-type(2){background-image: url("../img/3.jpg");background-repeat: no-repeat;}
#banner #hezi div:nth-of-type(3){background-image: url("../img/4.jpg");background-repeat: no-repeat;}
#banner #hezi div:nth-of-type(4){background-image: url("../img/5.jpg");background-repeat: no-repeat;}
#button div:first-of-type{position: absolute;width: 16px;height: 30px;right: 20px;top: calc(50% - 15px);
background-image: url("../img/arrow.png");z-index: 400;cursor: pointer;}
#button div:last-of-type{position: absolute;width: 16px;height: 30px;left: 20px;top: calc(50% - 15px);
background-image: url("../img/arrow.png");transform: rotate(180deg);z-index: 401;cursor: pointer;}
.bg{background-color: #ffcc00;}
.hide{display: none;}正在回答 回答被采纳积分+1
同学你好， 对于你的问题解答如下：
因为设置left才可以让hezi移动，显示不同的图片。
如下所示，默认显示第一张图片，其他图片挨着第一张图片的后面显示.
给盒子设置left值，改变盒子的位置，显示不同的图片，如下：
如下所示这段代码， index等于0时，当前显示第一张图片，再点击左侧按钮时，需要显示第四张图片。
也就是如下这种情况：
我们这里添加判断，让盒子瞬间移动，显示最后一张图片（我们提前添加的与第一张图片一样的图片），此时在视觉上显示的还是第一张图片，实现从第一张图片慢慢切换到第四张图片的效果。如下：
如下这部分代码，与前面的原理一样，当index等于len-1时，显示的是最后一张图片
我们这里添加判断，让盒子瞬间移动，显示第一张图片，此时在视觉上显示的还是第一张图片，实现从第一张图片慢慢切换到第二张图片的效果。如下：
老师给你添加的这段代码是针对图片向左移动过程， 对导航的样式进行设置，因为图片最后一张是与第一张图片一行，所以当移动到最后一张的时候，需要给第一个选项卡设置特殊样式
两者不是重复的。老师给你提供的代码对index进行了判断，下图这种写法没有，选项卡只有四个，最大索引是3，那么移动到最后一张图片时，index的值是4，nacneirogn[4]获取不到元素，导致报错。
因为juli是盒子每一次轮播移动的距离，可能会由于计算的误差，并不能刚刚好移动到下一张图片显示的区域。所以添加一层判断，确保hezi一定能够移动到要显示的区域。
右按钮移动到第一张图片的时候，导航条不显示问题， 需要在右按钮点击事件下，添加判断
如果帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星